Digital Game Jam Day 1 of 2

No prior experience, this Computer Science major decided to attend a game workshop for fun. 9am to 4pm pace.

The goal is to create a game inspired by a scientific concept of your choice (e.g. explosions, chemical reaction, DNA, gravity, etc.).

A mixture of CSU Monterey Bay Game Design Program and Hartnell College professors teach this two-day workshop, and they all have background in some sort of game dev, art, or digital design, or technology.

Step 1: Brainstorm and Sketch Character Designs

Work quickly, don’t think too hard. The character is to be humanoid, and drawn from an angle. Draw four character ideas, and pick your favorite two.

I felt subtle panic from being thrown into the empty paper waters and prompted to sink or swim — how long has it been since I’ve been encouraged utilize my imagination without limits? Really, it takes a child’s brainpower to come up with this kind of gold. How can I? How can I? How —

It’s okay! Go on! I must be friendly towards myself. You can do it!

Sitting on my left, a talented artist and experienced designer is being loudly showered with compliments by multiple teachers, and I find their cooing to be distracting. My eyes shift back and forth between an effortlessly attractive sketch and my own dreadfully blank sheet.

Don’t worry about what you can’t do. Instead, focus on what you can do. I press my lips into a reluctant smile and blur out my peripheral senses, only zoned in towards the immediate goal in front of me. Be embarrassed, and keep going. You are brave, in this way. Keep going.

They told us to name our characters and think of what to call our game already, as this will help develop a personality and purpose for the game.

Here are my two characters.

Her name is Fei. I imagined someone flow-y and free, a child spirit. Scientific concepts: falling, gravity.

Have yet to decide on a name for him. Used pencil first, then defined with black crayon.

At this point, I started growing attached to them. I began to care about my characters more than anyone else’s. It’s an unfamiliar feeling, but because I created them myself, they mattered something different, and I needed to take care of them. Look, I made that. I felt fond and proud of the product of my imagination, no matter how rusty.

Step 2: Color Characters and Make Background on SketchBook

After outlining and coloring.

Take a photo of the sketch from Step 1, upload to SketchBook app on iPad, and commence the colors. Repeat and rinse for each character. Keep in mind Photoshop can adjust or refine things later (e.g. attach a loose limb, change color, erase better, add embellishments, etc.)

1. Set original photo (sketch from Step 1) to a half-transparent opacity. This is PhotoLayer.
2. On top of PhotoLayer, create a new layer to trace black outlines of the original photo. This is OutlinesLayer.
3. Create another layer. This is ColorsLayer. It’s strongly suggested to drag ColorsLayer to be beneath OutlinesLayer. Note: I wanted to color within the lines, but spilling slightly outside the lines can make for a charming style, too.
4. At this point, PhotoLayer can be deleted if you wish.* The last step, ShadingLayer, is optional. Create a new layer on top of ColorsLayer and add shading effects for depth or style. I personally chose not to add any shading to keep my characters cartoonish and flat.

Click the eye icon on the very bottom layer; gray and white checkers = transparent area.

In summary, here are the layers from top to bottom:

> OutlinesLayer

> ShadingLayer (optional)

> ColorsLayer

> PhotoLayer (deleted) *SketchBook only allowed me 3 layers at a time.

Once you’re satisfied, make the background transparent. Save the sketch in two places: to the camera roll, and to the SketchBook gallery itself. This allows you to go back and work on it more if you choose, and you’ll need to email yourself the photos because later you’ll be using Photoshop on desktop.

One more thing: a background! Consider where this game takes place. Subtle colors are preferred; you don’t want the characters to blend in with the background. Since my characters are very bright, I chose a dark contrasting setting to make them easier for the player to see.

Tips on making starry space:

a) The best random generator is to close your eyes and dot like crazy with your stylus.

b) Use the airbrush tool to create star dust of varying shades.

c) Add another layer on top, drawing star dust with semi-opacity. This creates the illusion that some stars are fainter and further than others, behind outer space particles.

Save your background on both the camera roll and the gallery just like you did with the character sketches. Email them to yourself to access via desktop. Now that we’ve two characters and a background, onto Photoshop!

Step 3: Making Walking Frames with Photoshop

Walking cycle; each person is a frame.

1. Open your character.png in Photoshop.
2. Use the Lasso Tool to select a limb.
3. Right click > Layer via Cut
4. Rename new layer. (e.g. right leg, left arm)
5. Click to layer you just made to work with that limb. Command + T on Mac to select the entire limb.
6. Once selected, a box appears around the limb. In the middle of the box is a little point of reference that can be dragged around. Drag that dot to where the joint of the limb would be. This allows you to rotate the entire limb from that rotation point you placed.
7. Create a single frame of the walking cycle with all the arms and legs rotated with steps 2–6. There will likely be gaps to be filled and lines to be erased when rotating limbs. Work to clean up each frame.
8. Save each completed frame as a PNG file “frame1, frame2, frame3” etc.

Uploaded frames.png to http://gifmaker.me/. Downloaded video.mp4 since gif wasn’t working right for me. Converted mp4 to gif via http://ezgif.com/. Gif not required for the workshop; demonstration and gawking purposes.

Voilà! When you put all the frames together, your character is walking. If 1 is resting position and 2 and 3 are swinging positions, the order of the frames would be 1, 2, 1, 3, 1, etc. In other words, a resting position needs to be nested between each swinging motion.

Lovely hair, isn’t it? My next goal is to animate the hair, using the warp tool in Photoshop so that the hair appears to be flowing whenever Fei moves. Each frame would need a different wave.

The rough idea I have for the game thus far is a game of collect and dodge. The boxy creature would be shooting music notes from its hands and Fei would fly to touch the notes and avoid the rests (pause or silence in music). Every time she loses a life, a strand of her hair would turn to a dull color, until game over, Fei falls into a world of silent black and white. Play Again? She’ll re-emerge with a headful of colorful hair and cheerful spirit again.

— Brainstorming Session for Tomorrow—

1. I still have to figure out how she’s going to be “walking” through space and how to incorporate science.
2. Sound doesn’t travel through a vacuum.
3. Speed. Weight. Mass. Gravity.
4. Bounce. Fall. Float.
5. Maybe.. What if I didn’t have the second Box character, and just Fei? She could pick up items that change her mass or somehow control gravity. I want to somehow teach the concept of gravity.
6. Maybe so long as she collects VoidBits, she stays light, but if she touches a MassBit, she falls. The thing she’s walking on must be light..
7. Light things: Feathers, bubbles, clouds, stars, leaves, Maybe multiple layers!
8. Start on leaves, then feathers, then bubbles, then clouds, then stars. Five levels. To advance to the next canopy, you need to keep getting lighter by collecting VoidBits, and avoid MassBits. If you touch Massbits, you fall dramatically through certain amount of distance before regaining your footing and continuing up again. So, similar to Doodle Jump’s orientation of moving upwards, but instead of just falling and game over, fall a bit and continue the game until her hair is drained.

3:23 a.m. That’s all for Day 1. I enjoyed my time. Thank you Digital Game Jam crew for all the free food (sandwiches, chips, water, even pan dulce!) They said tomorrow we’re having burritos for lunch, so I’m looking forward to that.