Game Design: Planning and Prototyping

Objectives and Overview

Lesson Objectives


Planning and Prototyping

Planning and prototyping is a critical discovery phase in game development. Investing time in this phase will make the development and programming of mechanics and gameplay far smoother.

You’ll create several games throughout this course. Since each game will be developed in Game Jam Hackathon style, you’ll have lots of practice rapidly prototyping and delivering games. You’re going to be using the same prototyping methods that professional developers include in their process. Lots of thought and consideration go into every aspect of the levels of games that you play. Before we begin, think of your favorite level/stage from any game that you’ve played. Consider the following:

Shigeru Miyamoto, the developer responsible for creating Mario, shares his insight on the importance of planning and level design in this excellent video:

Nintendo’s Shigeru Miyamoto discusses level design in Mario World 1:1

The Planning Phase

The goal for this day is to refine your idea. Think of this as a time to “zoom in” on the design process. In the previous session, you brainstormed a general overview of your game. Now you need to begin thinking about the following aspects:

  • Sprites and assets to include on the level
  • Level layout: Scratch’s screen is 480x360px. Consider how many screen changes you need.
  • Game mechanics: If you’re making a side-scrolling platformer, you’ll need to know how to horizontally scroll.
  • Art design: How many characters do you need? Can anything be repeated?

The Prototyping Phase

Prototyping your game is valuable for several reasons. First, it helps refine the concept that you’ve chosen, and you can get a glimpse into what mechanics and assets are going to need to be developed in order to realize your vision. The next steps after this stage are writing the code for the play mechanics and creating your art assets, and detailed prototyping helps with both of these areas.

At the very least, you should aim to accomplish the following:

  • A basic draft of your Game Menu and Game Over screens
  • The style of game you’re making: this will help determine the mechanics you need to develop. For example, if you’re making a platformer, you know that an understanding of gravity will be necessary.
  • Include information about the following: Scene, situation, protagonist, antagonist, power-ups, levels, scoring, the overall narrative
  • A list of art assets you’ll need: Characters, objects, etc.
  • A general sketch of the level

Here are some examples:

Example of a game planning template with notes about the level layout
Example of a game planning template with notes about gameplay in the platformer

These examples can guide your development process. The left box represents the Scratch stage. Try to draw a rough sketch of the level or scene you’re creating. Next, include some of the mechanics that you’re going to use. For example, in the first prototype above you can see that note F corresponds to the score mechanic.

This is a great way to map out the mechanics that you’ll need to include in each scene of the game. If your game has multiple scenes or levels you can staple together several sheets.

Tile Mapping

One of the benefits of Scratch is that you can prototype your level designs and preview them as you go. Professional game designers use a technique called tile mapping for planning game backgrounds. Even though you won’t be using a tile generation system, this process of planning out a level will have a great impact on your game. It will result in levels that are detailed and organized, and this planning process will carry over as you move into more advanced game frameworks, whether it be the increasingly popular combination of HTML5 and JavaScript or a full engine like Unity or Unreal.

One common design shortcoming with several Scratch games is the misconception that the entire game needs to occur within a single screen. Scratch’s backdrop is 480x360px (pixels). This isn’t much space to create an entire level, but yet many developers will attempt to cram the entirety of the world or level into this space. This is highly unnecessary, as Scratch allows for vertical and horizontal scrolling.

This problem still exists even when considering the usage of scene changes between multiple backdrops because often the backdrop is viewed a being the entirety of a level/scene and this results in crowded level design that often doesn’t realize the creative vision of the developer.

Level Design in Scratch

Think of the initial backdrop size as the first screen on a mobile game, or the first tile of a multiple tile game where each backdrop is part of a level/scene instead of the entirety of the level/scene.

Thinking along these lines, the backdrop evolves into a part of a whole level and developing in Scratch becomes much more like developing in a professional game framework. Here are two examples demonstrating the difference between the two approaches. Which one feels more complete?

As a quick design activity, consider the following:
Think of Level 1-1 in the first Super Mario Bros. game. What elements are included in the very first segment/frame of the level?

One screen of the first Mario level

You see Mario, a cloud, a mountain, a bush, and some blocks that you can hit. Imagine if the entirety of the level was contained within this first segment. Would the level feel the same or would it be cramped and crowded? Here’s an image of the entire level layout:

The complete first level of Mario

Prototyping Tips

With this in mind, consider each individual backdrop in Scratch as a segment of a larger level. You should challenge yourself to think both vertically and horizontally while doing your prototype. If you want your game to include a detailed, rich level your prototype should definitely include a tile map.

While prototyping, think of the scale between your sprites and level. For example, should the playable character consist of half of each backdrop segment? What about enemies? Thinking of this scaling should be done during the prototyping and mapping process. It will make your game far more polished and complete.

Do you want some form of continuity in your level? If so, you’ll want to put some time into the prototyping phase to make sure that you have an understanding of the flow between backdrop segments to make sure that they work toward creating an integrated, thought-out level. A benefit of doing this is that when you create your game art you’ll have an idea of what unique assets need to be created and which can potentially be reused and recycled.

Using the Mario example again, think about the unique elements in the level. There is a lot of repetition, but the level still feels unique within each frame. This is done through a repetition of assets. The developers carefully considered the usage and placement of each object on each screen.

Think about how the mechanics relate to your design, and then include notes about any necessary mechanics in your prototype. For example, if you design a level that consists of several horizontal and vertical backdrop segments, you’ll need to include mechanics for horizontal and vertical scrolling or else the player would never move beyond the initial loading segment.

Activity: Digital or Physical Prototype

The goal for today is to have a finished prototype of your game. This can be a physical prototype such as a paper sketch of your level design with mock-ups of your characters, or you can create a digital version where you can use Inkscape or Google Drive to create a prototype. Either way, you’ll need to include the following:

  • Sketches of your first level
  • Basic narrative elements and mechanics
  • Ideas about the characters (protagonists/antagonists), scoring system, power-ups and items, etc.
  • Basic mapping of the level (tile map or drawing) with some ideas about where sprites will go
  • List of assets and mechanics your game will require

Time permitting, there will be a Show & Tell where everyone can share their ideas. This prototyping process is important to practice and is a key part of the course!