C# & XNA
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.
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:
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:
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:
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:
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.
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.
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.
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:
Submit this zip file as "lab1design.zip" to CMS.
Due: Wednesday, January 30th at 11:59 pm