Storyboarding

In this lab you will gain some experience with storyboarding, which will help your group design the concept document and gameplay specification early in the course. You should read the guidelines on storyboarding below. Then you will pick an existing game (any of your choice) and create storyboards for that game.

Table of Contents

• The Art of Storyboarding
• Lab Instructions
• Submission

The Art of Storyboarding

A storyboard is a sequence of panels illustrating action in a time-based medium, such as film or animation. In the case of animation, a storyboard helps the designer visualize the action before having to go through the process of making all the art assets. In this class, storyboards typically correspond to the player mode diagram.

There are a lot of conventions about the proper way to draw a storyboard, though the conventions depend on the medium (e.g. film or interactive media). In this section, we review the most important conventions so that you can work on your own storyboards.

Storyboarding in Film

The practice of storyboarding has its origins in the film industry. It is a relative mature practice, and there are several standard techniques for creating storyboards. While film storyboarding is very different than game storyboarding, the links below are some great tutorials for how to storyboard in film production. You do not need to read them right now, but feel free to check them out in your spare time.

500 Storyboard Tutorials & Resources

This is perhaps the best storyboarding reference online. The tutorials are broken up into several digestible units, and are all well-labeled. Though it is too much to read them all right now, it is instructive to just look at the titles of the individual tutorials.

Drawing and Composition for Visual Storytelling

This tutorial is by Ron Doucet, an accomplished animator. It is also fairly extensive, but it is one massive article and is written in a sort of stream-of-consciousness style. Only look at this when you have quite a bit of time.

Storyboarding in Games

As we mentioned, storyboarding film is very different than storyboarding games or any other interactive media. If you look at the resources above, you will notice the following:

• The focus of each panel is to set the scene, in terms of both content and perspective.
• Individual character action is implied but not overly specified in each scene.
• Individual panels are intended to represent camera motion and cuts.

In other words, the storyboard is intended for the director, not the actors. And the primary thing that the director has control over is the scene and camera control. Actors are supposed to be given some freedom to, well, act. This is less evident in Ron Doucet’s tutorials above, because he focuses on animation, but there is still relatively little character action in his storyboards.

When you storyboard for a game, you want to indicate what the player can do. And the primary thing that the player can do is to control the character (or other game elements). While the player has some control over the camera, this is usually implicit in the control of the character (and not independent of the characters, as in film). Furthermore, the player generally has no control over the scene itself. Therefore the techniques that you use for storyboarding depend on the actions present in your game.

Storyboarding Disembodied Action

As we mentioned in class, not all player activity has to be attached to a character. In real-time-strategy games, the player is spending a lot of time clicking on menus and buttons. Even RPGs, which are very character focused, have player modes (such as the “paper doll mode”) that have a lot of disembodied action.

Disembodied action is displayed using techniques from traditional software storyboarding. These techniques were designed for productivity software (such as word processors or the like) but are relevant to games as well. When storyboarding action in this way, you typically perform the following steps:

Draw the initial scene

The initial scene can be the entirety of the computer screen, but it does not have to be. You can zoom in just the part of the screen that matters. However, your scene should focus on both the relevant UI element (menu, button, switch, etc.) and the part of the scene that may change (e.g. where new game elements might spawn).

Give some indication of action

Because the action is disembodied, it is likely to correspond to a mouse click, though it correspond to a touch or gesture in the case of touch-screen devices. For a mouse click, add a “tool tip” nearby indicating what is happening. For a touch or gesture, clearly outline the gesture on the screen.

Draw the effect of the action

This is generally a second scene, indicated how the game interface has changed once the action was selected. Again, only focus on the relevant elements.

The article Storyboarding in the Software Design Process is good overview of this process. This is a brief article and we recommend that you read it.

As a general rule, this process means that each action is a pair of scenes. For example, below we have two pairs of actions for Pokemon Blue. The picture on the left shows the action and the picture on the right shows the result.

However, it is common for the initial scene to be shared across several actions. In that case it is possible to reuse the initial scene. In this case, the action is drawn as call-out, with the result of that action associated with the call-out. The result is a hub-and-spoke style diagram with an initial scene in the middle and the various outcomes displayed around it. Unfortunately, we do not have any good examples of this style at this time (but feel free to provide us with an example for future semesters).

Storyboarding Embodied Action

The storyboarding techniques for disembodied actions work because these actions are generally discrete. There is an initial scene, followed by a single action, followed by an outcome. Because game characters are spatial, their actions are much more continuous. Hence storyboarding them is closer to (but still not the same as) film storyboarding.

The key thing to storyboarding a character is to illustrate its action as it completes (or attempts) to complete a goal. There are two popular ways to do this.

Multi-Panel Approach

The first way to storyboard embodied action is to use several panels. Break up each panel so that it corresponds to a challenge, and illustrates the player overcoming that challenge. Each panel can be captioned to further describe the action, but much of the “storytelling” should take place in the storyboard.

If you use this approach, it may take several panels to convey the action. For example, the following is a student storyboard for the game Bastion.

This style can involve a lot of drawing, and so is not as popular are the Single Panel approach explained below. However, we still have several examples from previous semesters.

Crisis at Swiss Station: This puzzle platformer from 2011 involved a construction/deconstruction mechanic where the player gathered material to use for bridges, counter-balances, and other activities. The storyboards for this game take the player through three different levels, step-by-step. Note the usage of captions throughout.

Lumen: This was a light-and-shadows game where a little girl had to escape a room while remaining in the light as much as possible. Notice how much information is conveyed in the pictures, and how sparse the text captions are.

Single Panel Approach

The second approach is to show player progress in a single scene using movement lines. This style is much more compact that the multiple scene style used above. The style works well for small, compact challenges. It is also good for illustrating when a player has multiple ways of solving a puzzle. The blog post Extra Credit, and its follow up Why So Hard?, is an excellent example of this style. In these posts, the makers of Super Meat Boy talk about using incentives to control difficulty, as shown below.

Image copyright 2010 Team Meat.

Because of the compactness of this style, it is particularly popular among students in this course. We have several examples of this style from previous semesters.

Blush: The Showcase winner in Spring 2011, this game featured a blob that painted platforms different colors in order to solve various physics puzzles. This storyboard has a lot more text than most; the captions are very detailed. But this allows it to be much more economical with its scenes than Crisis at Swiss Station.

Squidget Snatcher: This game was a combination trajectory-platformer; the player threw squidgets into position and used them to solve platformer challenges. This storyboard is much like the Team Meat example above. It has a single panel that conveys an awful lot of information.

Reflexio: The Showcase winner in Winter 2011, this game featured a reflection mechanic and some rather surreal art. The storyboard is notable for the graphical annotations that are part of the captions, making it rather unique.

Lab Instructions

Now that you have an overview of how storyboarding works in games, it is time to draw your own storyboards. Pick a commercial or indie game that you are familiar with. The game should be 2D or have fixed camera perspective. For this game draw three storyboards.

• Draw a storyboard for an example of non-embodied action in the game.
• Draw a single-paneled storyboard showing embodied action with movement lines.
• Draw a multipanel storyboard showing the player overcome a challenge.

You will be graded on how well each of the storyboards conveys the action that you chose. You will not be graded on drawing ability for this assignment. If you draw stick figures, but do an incredible job of conveying action, then that is good enough. You will describe the content of the storyboards in a separate text file, and we will use that to evaluate your work.

You may use captions within the storyboards, but we want your captions to be terse. Do not use more than a single sentence per panel. You may also use a diagram legend like the Team Meat example above. While the design documents for your own game will be much more wordy, right now we want to see how much action you can convey visually.

Submission

Due: Mon, Feb 15 at 11:59 PM

These tasks should be relatively straightforward. To turn in the lab, create a ZIP file containing the following:

• disembodied.png

  This is your storyboard of a disembodied action (like a menu selection).

• single-panel.png

  This is a storyboard that shows character action in a single panel.

• multipanel.png

  This is a storyboard that shows character action across multiple panels.

• readme.txt

  This file identifies the game you are storyboarding (perhaps with a link to a website?). It also describes the contents on the three storyboards so we know how to evaluate them.

You do not have to create these files digitally. It is okay to draw by hand and scan the results. However, in the interest of keeping the file size small, we ask that you scan at 300 dpi. Lower resolution is hard to read and higher resolution is more than we need.

Submit this zip file as lab1design.zip to CMS