CS/INFO 3152: Introduction to Computer Game Development

Design Lab 1: Storyboarding

Due: Wednesday, January 30th at 11:59 pm

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.


Storyboarding in Game Design

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; 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.

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 IBM document Storyboarding in IBM Rational Requirements Composer is an excellent (but extremely technical) overview of this process. We recommend that you just look at the illustrations in this document to get an idea of what is going on.

As a general rule, this process means that each action is a pair of scenes. 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. The first is to use several panels. Break up each panel so that it corresponds to a challenge, and illustrate 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. This is apparent in the following examples from past 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.

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 from the makers of Super Meat Boy is an excellent example of this style. The images of this post appear to be down at this time, but the main one is 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.

Create Your Own Storyboards

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.


Scan it!

If you create your storyboard digitally, this does not apply to you. But we find that most people like to draw their storyboards by hand. If that is the case, you will need to scan your storyboard for submission to CMS.

There is a scanner provided in CL3. You should use Photoshop to scan you images. In the File select Import and chose the name of your scanner. The scanner's TWAIN device will open; click Preview to do an initial scan. A preview image will pop up, from which you select the area you want scanned. Change scanning resolution to 300 dpi and click Scan when you are ready. Your image will be scanned and opened into Photoshop as a Photoshop Document.

You can resize your file by altering its Canvas size or Image size. Using the first just resizes your boundaries, leaving your image intact. The latter resizes your boundaries and stretches or shrinks your image to fit the new dimensions.

You should scan each file separately. Even though you are scanning them into photoshop, we do not want you to submit a .psd file. You should convert each file to PNG format instead.


Turning it In

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.
A descriptive text file
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.

Submit this zip file as "lab1design.zip" to CMS.

Due: Wednesday, January 30th at 11:59 pm