Parents’ room creation, part 2

Part 1

I promised you the interesting part, and here you are.

We did some research and chose to work with 1024*768 resolution. If the game is launched on the widescreen, the level will be simply cut from top and bottom. Now I face a question – how to draw a perfect 4:3 image without a ruler (no, I don’t have one)? And here comes an old iPad 2 with the screen size exaclty as needed!

So the image is 1:1 scale.

First, I choose one of the level’s states from prototype, – it doesn’t matter which one, since the level is familiar already, – turn the iPad light to maximum and attach the tracing paper on it with the masking tape. Tracing paper is thin and semi-transparent, and the masking tape is widely used in traditional art – you can detach it easily and it doesn’t ruin the paper underneath. I am using a colorful Japanese washi masking tape like the one here – it’s more fun this way and I am not using it anywhere else anyway.

After that I open the level image on iPad and do the rough pencil sketch over it to refine the shapes. Since the iPad has a touch screen, it’s not very handy to paint over the image projected – I do touch the screen with my hand this way or another, the image moves, hides and does everything else it shouldn’t do. But I need only the main shapes, so I finish this part pretty quickly.

DSC_2868 DSC_2870 DSC_2871

I turn off the screen and check whether I have missed anything. And then I turn back the iPad screen with “flashlight” on.

This one was tricky. To imitate the light table I needed a bright one-colored screen that doesn’t respond to taps – I will be constantly touching the screen and I want to still be sane after I’m finished. Task: to look for an app that shows only white screen, and does nothing else. Not so simple as it sounds, but I did found one – Easy Flashlight. Perrrrfect.

When I know all the items’ positions on the level I create a new layer put a new layer of tracing paper and fill the expected light/shadows with a Copic Markers. With this I check if the logic is still ok.

And then the fun starts.

I take the 0.1 liner (any will do, but I prefer thin and waterproof, in case I start crying from joy), put the tracing paper on the place of each item and start drawing. This process brings the most fun. Less words, more pictures now.

DSC_2875 DSC_2879 DSC_2877 DSC_2885
One of the interesting parts is in-game animations. Basically the process is identical to the one in classic animation. Each frame is drawn on a separate layer, one over another, on the light table. Moreover, each frame is being numbered, so they don’t get messed when scanning.

One could say the animation is done blindly, since you cannot see the final result until later it’s played in Photoshop. Well, it’s true. And when in doubt, I do several versions of one frame to choose the best later.

When every item, every frame is drawn, the further process is clear – to scan (small items are attached to the white sheet of paper so they won’t be blown away), put all items on their places in Photoshop (I did few actions to resize, desaturate and rotate all frames correctly) and add the basic shading (standard brush, standard presets, no magic here).

DSC_2887 DSC_2888 DSC_2889
Cut in slices, give the exported images to programmer, wait, shake, don’t stir. Happy gaming! :)