From Sketch to Scene.

I have a sketchbook full of all kinds of sketches from quick doodles to character studies, iPhone interaction diagrams and user interface wireframes. There’s also a lot of messy handwriting, from plot outlines to character descriptions, names and lines of dialog. The sketchbook is where almost every idea for the adventure game first starts to find its form. Scene graphics are no different. In this post, I’m illustrating the development of a scene, especially the visuals, from the first sketch to the almost finalized graphics. In order to spoil as little as possible, I chose a scene already seen in one of the screenshots.

Above is a first sketch, freshly scanned from my sketchbook. Based on the story and functional requirements – what objects and elements need to be present, what user interactions must take place in the area etc. – I first draw a lot of quick, very rough sketches. In this case, things were quite straightforward, and I already had a pretty good idea what I wanted to do, but in many cases this stage involves studying the environment from many different angles, drawing ground plans and layout diagrams and trying out different options.

The camera angle and perspective are important not only from the functional point of view (important areas the player operates in must be well present and so on), but in providing the feel and sense of scale for the surroundings. With 2D sprites, the options are unfortunately limited – the sprites and animations are fixed to the usual side-view to our hero, which makes it impossible to combine the character with any more adventurous camera angles.

However, a static, straight-from-the-side perspective from scene to scene gets super-boring very quickly, so I’m trying to offer as much variation as possible, without making the player character look too out-of-place compared to the background.

In the image above, there are some perspective studies to find the one best-suited for the action and feel of the scene. I wanted this scene to have some sense of height when the player walks along the ledge of the building. In full 3D environment, maybe looking down from above the character, with the ground lingering somewhere far below, would’ve been the most effective option, but in this case, looking at the ledge slightly upwards from below seems to do the trick best – maximizing the vertigo and perspective distortion, while still allowing the player character to fit the scene somewhat naturally.

Above is the final sketch before switching from pen and paper to Wacom and Photoshop (below).

Sometimes I scan or photograph the sketch to Photoshop, but often I just start from scratch. Using the sketches as reference, I lay out some perspective lines and create a new sketch on top of those, as the perspective in the sketches on paper is usually not coherent enough for the player sprite to walk around in.

Sometimes reference photos come in handy, in this case when drawing the fire-escape. I try to use my own photos as much as possible (my iPhone is full of photos of strange details and objects), but in this case these stairways outside the building just don’t exist here in Finland, so I had to do some image-searching online.

Many, many, many hours of work, and a couple of hundred Photoshop layers later, the image is ready to be cropped, adjusted and converted for iPhone use. With this side-project schedule of mine, reaching this state sometimes takes days, sometimes several weeks. Then I create the masks on top of the background graphics, isolate the sprite objects, create graphics for the different states of the objects and assemble everything together in the scene data for testing on the iPhone.

Several iterations and adjustments are usually necessary, either due to things just not working as well as they should, or because of me coming up with new ideas later in the process. But on a basic level, this is about it.