Pretty pictures

There are all kinds of ways that you could go about creating the graphical elements that will make up your game, and your decision will depend on the kind of graphical style you want to produce. For Leila, I knew that I wanted a handmade look to it. Here's the process that I ended up using.

Draw things with pencil and paper

It's worth keeping a rough scale guide to hand to ensure that your drawings are all approximately to the same scale. I only really learned this later in the process, so you can see that some of the images in Leila have been drawn at different scales and have different line widths.

Trace them with pen

Once I'm happy with the images, I trace them onto a clean sheet of paper using a black pen. For this process, investing in an LED light-box turned out to be £40 very well spent.

Although the backgrounds in Leila stay still, all the characters have what is known as a 'boil' animation that they cycle through, making them look a little jittery. In order to support this, I would trace the same image 3 or 4 times so that they were almost but not quite the same, and turn that into an animation.

Scan the images

I just have a basic flatbed scanner (part of an all-in-one printer) and that was good enough for my purposes.

Colour the images

It took a bit of trial and error to get this part right. What I needed to do was to find all the areas which where white or partially white in the scanned images, and change them to be transparent or partially transparent instead. (Here, GIMP's 'Colour to Alpha' feature is your friend). I then put the colouring onto a layer behind the outlines, which leads to a much cleaner end result than trying to actually fill in between the lines.

Making a world

Having drawn, scanned in and coloured the images for a room and the objects within it, I then had to turn those images into the resources I would need within the game. This is where having a dedicated game creation package, with its ability to drag and drop your objects using a graphical interface, would have been very handy. However, it turns out that you can get most of the way there using GIMP's built in support for Layers within images, along with a bit of scripting.

A single GIMP image file for a room could contain all of the following layers:

• The basic background. The main image to form the background for the room, as scanned and coloured above.
• A shadow layer. Some rooms in the game can appear at night time as well as in the day. The shadow layer will get overlaid by the game engine.
• A control layer. To let the player's character move around a scene in a sensible way, you need a means of describing which parts of the room are floor that can be walked on, which parts are impassable, and various other things. The method I decided to use was to have a 'control image' for each scene, which described these things in graphical terms, using specific colours for specific behaviours. For example, the blue in this example indicates the area on which the player can walk.
• Objects. Although the images for specific objects within the room would be held in their own files, working out where to place them within the scene was made a lot easier by copying them into the overall scene's GIMP image so that I could place them interactively and then work out what their coordinates should be when building the scene.

By adopting a simple naming convention for these various types of layer, I was able to put together a relatively simple GIMP script which took the single image file for the scene, ignored any 'object' layers, and exported the background, shadow and control images for that scene into the appropriate directory within my Android project.