CS 4154: Analytics-driven Game Design

Assignment 2b
Asset Creation (designers only)

Due: Wednesday, December 31st at 7:00 pm

In this assignment, you will work on the basic Photoshop and Flash skills that you will need to produce assets for your game. As the visual designer, this is one of your many responsibilities on your team. The assignment is broken up into two components. First, you will create a character for your game. Second, you will animate it.

Important: This assignment will make heavy use of Adobe Photoshop and Adobe Flash. We have the Adobe CS software available in Phillips 318 (the lab intended for use outside of class). There is no requirement to buy software in this course. With that said, the campus store offers the software at a discount should you want it.


Create a Character

                                         

In this part of the assignment, you should create a game character. If your group is still working on ideas, that is okay; just come up with whatever type of character appeals to you. Your character does not need to be human(oid); we only require that it has enough features to distinguish a personality.


Write a Personality and History

Before you get started, you need to understand your subject. Create a text document named description.txt; and write a character biography that answer some of these questions:

  • What is your character's name?
  • How old/mature is your character?
  • What kind of world does your character inhabit?
  • Does your character have special abilities or adaptations to the environment (underwater breathing, flying, etc.)?
  • Is there anything interesting about your character's past?
  • What are your character's goals in life (avenge parent's death, become rich, find a spouse)?
  • Describe a typical day in the life of your character.

Be specific. The better you know your characters, the easier it will be for you to visualize them. Be sure to include how you have considered the background/personality of the character in coming up with your design. For example, if the character comes from a cold climate, is he/she wearing something to keep warm.


Draw Your Character

When drawing your character, we want a "posed shot" that conveys the personality of your character. If you do not know what we mean by this, take a look at some of the work by Hoon from Mess Studios. Make sure that it is an interesting pose and make it look natural. In that regard, you should take a look at what the old Disney masters had to say about "wooden" vs. natural poses:


From The Illusion of Life (Thomas and Johnston)

You do not need to draw your character in a setting, but you are certainly welcome to. We only care about the character. Plus, keeping the character by itself will make the alpha channel easier.

Photoshop files end with .psd suffix. If the scanner can produce a .psd file, that is ideal. However, Photoshop can open any major graphics file. We recommend .png over .jpg, since PNG files do not use lossy compression that can cause graphics artifacts.


Set Your Drawing as the Outline

Before you can color the image, you need to create some layers. Open your pose file. Ensure that it is saved as pose.psd. Double-click the Background layer in your Layers palette. This changes it to Layer 0. Click the tab reading Normal, and scroll down to Multiply. Now the white values of your image are transparent, and you can do an under-painting on a new layer beneath your dark lines.

Create a new layer by clicking the New Layer button at the bottom of the palette. Drag Layer 1 under Layer 0 and, using the paintbrush tool, color where needed. If your color is not beneath the dark lines, make sure you have Layer 1 selected, and that it is underneath Layer 0. You may want to name the layers by clicking on the actual text Layer X. Feel free to add more layers to isolate different parts (you could color the head on one layer, and the body on another for example).


Color and Shade Your Image

Choose a color scheme that reflects your character and start coloring. Pay attention to light and shadow. Play around with the different blending modes (assuming that you have already changed your line drawing's layer from Normal blending mode to Multiply).

Here are some blending methods you might want to try:

  • Create a shadow layer set to multiply and a separate highlight layer set to screen
  • Use the Burn and Dodge tool (located slightly above the middle on the toolbar)
  • If you are a traditional artist, you may want to blend with the smudge tool (hotkey "r") in normal mode

If these tools are too harsh, you can decrease the exposure on the top options bar right under the main menu. Many artists find it helpful to place each color on its own separate layer so colors do not mix near borders when smudging. To add a new layer, hover over the buttons in the lower right corner of the Layers window in Photoshop and click the one that says New Layer. This should look like a square with a darkened corner.

While working, you may wish to play around with your brush properties. Adjust the hardness of the brush to suit your style. Those of you who want a smoothly blended look will want to turn on the airbrush tool and change the hardness to 0%. Blending works best with a tablet.

If you get stuck on a color scheme for your character, take a moment to browse some photographs on the web. If you find a photo with a color scheme that suits your character, use the eyedropper tool (hotkey "I") to capture that scheme as a starting point for your character.

While we are not requiring extreme details, adding details can significantly improve the overall quality of your artwork. Rim highlights, folds in clothing, textures, etc. can dramatically improve the look and feel of your work.


Create an Alpha Channel

When you use an image in a game, you want the background to be transparent. Otherwise, the game is going to draw everything that you create as a opaque rectangle. This is where "alpha" comes into play. In a typical RGB image, each pixel stores a value from 0 to 255 (8 bits) for red, green, and blue, or 24 bits for each pixel. An RGBA image stores a value for red, green, blue, and alpha (opacity) using 32 bits for each pixel.


Image on Grey Background With and Without Alpha Channel

On the Layers window on the right of your screen, click the Channels tab. Here you will see four channels (RGB, Red, Blue, and Green). If instead of RGB, you see CMYK, Cyan, Magenta, Yellow, and Black (or even something else!) that means you are not working with RGB colors. Fix this by going to Image->Mode->RGB Color. CMYK has its advantages (for print media), but for this project stick to RGB. At the bottom of the Layers window, click the Create New Layer button. You now have an Alpha Channel.

Click on the RGB channel to select it. You should see your drawing again. From the tools palette, click the magic wand selection tool (stick with sparkled end). Ensure that Use All Layers is checked (on the top under the main menu). Now click on the space surrounding your drawing to select the blank space. If the selection is too great or too little, adjust the Tolerance percentage at the top of your screen and reselect the blank space. Once you have selected all of your background, go to the Select drop menu and click Inverse. Now your drawing should be selected, instead of the background. Click once more to the Channels tab of your Layers window. Select the Alpha Channel, and hit your delete key. Now the silhouette of your image should be seen. If nothing happens, make sure that your background color is white at the bottom of the tools palette and try deleting again. Ultimately in your Alpha Channel layer, a white silhouette of your image should rest against a black background.

Take a look at the channels tab. Make sure that all channels are visible (they have the little eye to the left of them) and that the alpha channel is selected. Zoom in around the area where your character touches the background. You should see the background in a shade of pink and the character in its regular color. Using the pencil or paintbrush tool with a small size, touch-up the alpha channel. The magic wand tool most likely did not do a perfect job selecting the background, so you have to draw black onto areas where the background is no pink and draw white on the areas where the character is pink. Once you are satisfied with your alpha channel, you hide it by clicking the little black eye next to it. Do not worry, even if the alpha channel is hidden, saving a file with alpha information will use the alpha channel to determine opacity.


Save Your Results

First, save your file as a PSD. Make sure that parts of your character that you want to animate (for example, a leg) are held in a single layer. Second, save your file as a TIFF and make sure that Layers is NOT checked and Alpha Channels IS checked.


Animation

Open Adobe Flash Professional. Create a new ActionScript 3.0 object. Go to File->Import->Import to Stage. Open the PSD file from the previous section. Select which layers you want to import. Now you can add keyframes to create a simple animation.

The timeline is at the bottom. Right now there is only one frame. Using your mouse, highlight the portions of the timeline you want to extend into (moving the mouse from right to left works best). With these frames highlighed, press F5 to extend the timeline.

Now, select a layer that you want to animate by clicking on its name in the timeline. First, go to Modify->Convert to Symbol. Symbols are objects that you can animate. Then, select the frames on the timeline for that symbol during which you want the animation to occur. Go to Insert->Motion Tween. Then, using the red timeline slider, go to a different frame. Using the mouse or the arrow keys keyboard, move the symbol (the layer) to where you want it to be in this frame. Flash should automatically create a keyframe for this new position. If you reset the timeline position to the beginning of the movie clip, and go to Control->Play you should see the symbol/layer move from where it started to its new position. You can add more keyframes in the same way to make more complicated motions.

Using these techniques, make a simple animation for your character.

When you are done, first make sure you have saved your file as a FLA file by going to File->Save or File->Save As. Once you have done this, go to File->Publish which should save your animation as a SWF file in the same location as your FLA file.


Turning it In

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

description.txt
This is the text file with the description of your character.
pose.tif
This is your character pose with coloring and alpha channel.
anim.swf
This is the animated version of your character.

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