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! :)


Parents’ room creation, part 1

You might have already seen some of the game level development process for FingerBoy game when the project just started, but after second-third-tenth iteration it becomes more or less steady, and I decided to go a bit more in-depth. For you and for us as well.

The very first part might seem dull a bit, but it’s the longest and the most important part of level creation – preparing the level logic. There is no point in continuing if this is not done properly.



Here is the final image of the parents’ room level. You can see it in game as well, the demo is on the right of this screen.

Development starts with simple logic description with a minimum amount of taps needed to solve it. Difficulty is increasing, and so does the tap count.

We have an internal document with the list of items that can emit/reflect/direct light. But it would be so boring if switching the light was the only thing you could do in the game, wouldn’t it? And thus we make another list of relevant items and see what we can use without breaking the immersion and feeling of the current room.

Rooms have to differ and have to be recognisable. You will not put a toaster into the bathroom or a chainsaw into the baby’s dorm, right? Since we are making the room for parents, the main items are obvious: double bed, closet, and a mirror. Other things are optional, but still in the list.

Here is one of the first sketches by our game designer, for example.


And then come iterations, iterations and more iterations. TV was in the previous room already; there are too many lamps; the perspective of the closet is wrong and cannot be used, etc. After every little thing is solved and all the confusing points are eliminated on paper, we do a quick prototype. It’s very rough, without animations, only key elements in key positions.

Then comes a quick slicing with a Photoshop Slice tool – it’s extremely useful, and it’s widely used by web developers. Each slice has its own coordinates and size, and with this information programmer can quickly build a level without having to guess the images positions.

05_lvl_parents_prototype_slicesLight blue lines are the Photoshop guides and are showing the limits for the wide screen – there is no point in putting active elements behind those as they will not be shown on a number of devices.

When the level prototype is done, the team has played it and the comments were processed, it’s time for the final part – drawing the level itself.


Next part will be about live materials and tricky iPad use. It will be more interesting, I promise!

Part 2