Cartoon Sprites
How to draw cutesy, sickly sprites
There are many options available to you in giving your game a bit of graphical style. From 3d rendered sprites to cartoon sprites the style is up to you. There may be some restraints depending on the type of game you are planning to create - a cartoony look my be fine for puzzle games but might look a bit out of place in a futuristic shooter such as asteroids. That's not to say it can't be done, but the style would have to be consistent and the graphics pretty good.
In this article we will be looking at creating cartoon-style graphics to create a boss for the puzzle game Qix.
This version of Qix is going to rely heavily on cartoon graphics rather then the line graphics of the original. Since the boss of each level is the most important graphic we need to give it the most attention and make it impressive. It is afterall the sprite that will be concentrated on the most by the player as it's the biggest thing on screen and it's chasing the player!
The Tools
I always find that the easiest way of drawing a large cartoon sprite (it'll be over 128x128) is by dropping the computer in favour of good old pen and ink. The size of the sprite rules out the pixel by pixel approach and it is harder to draw freehand using a graphics tablet and virtually impossible using a mouse! You could however always try using a vector graphics program such as Illustrator if you wish and know your way around it. Alas, for the purposes of this tutorial we'll be getting the paper out.
Use Primitives
The easiest way of starting off a character is by starting with a few basic shapes to give a basic idea of the size, shape and posture of the sprite. Our basic queen bee consists of a few ovals and a square for where the crown will eventually be. Each of the main body parts are there and we can see that it is hovering in an attack posture. This is your chance to correct the layout now before we start filling in any detail so make sure you are happy with it before continuing!
Adding Detail
Now we have the main shapes we can start on the detail. First I will start with the face as it tends to be the most expressive and detailed part of the sprite. In the rough sketch we have the starting point for the cheeks and eyes. I have followed the guides for the cheeks closely only adding an extra bump at the bottom for it's chin. The eyes have been drawn using the construction lines as a guide and cutting part of the ovals out so that the eyebrows are slanted and more evil looking. The eyes are the most expressive part of the sprite and how they are drawn will show the player the feelings of the character. You'll see in the final version sprites for shocked and scared variations for death and evasive modes.
Expressions
Experiment with different types of eyes. As well as varying the shape of the eyes vary the size of the pupil. Large pupils can indicate awe, love or a young age. Tiny pupils indicate shock. Adding catchlights gives the effect of shininess.
We complete the head by adding the angry mouth, crown and antennae. The actual body doesnt require much work. The wings are just the ovals used orginally but we only go over the lines that are required and not the ones that are overlapped by the front wing or body.
We will want to animate the 'arms' of the bee so it will be easier to draw them seperately to the body and paste them over the coloured body at a later date. The upper body is completed using curved lines for stripes to give the impression of a rounded body. The lower body is outlined with a spiky line to give the impression of a fluffy abdomen.
Pen & Ink
Once the detail is complete and you are happy with your character it's time to go over your pencil lines with ink. I would recommend a 0.1 technical drawing pen. With this character I am going to make the outside edges thicker. this gives the character more emphasis and makes them stand out from the background. To do this all i do is go around the image using a thicker pen, a 0.5mm pen in this case, to give a nice thick outline. Erase the pencil lines and we're ready to move over to the computer.
Going Digital
Scan the greyscale image at a resolution you are happy with, 300 dpi usually gives an image large enough to work on without being unweildy. We wil be working on a large version to colour and detail it, shrinking it to the required size at the last moment.
Open the image in photoshop and convert the file to RGB format (option). Then alter the contrast or levels to eliminate any greyness in the background and make the lines a uniform black. The image is probably a background layer so copy the image to another layer so we can manipulate it. Call this new layer 'outline' and delete the background layer.
Add a new layer filled with white behind the outline layer. Call it something imaginative like 'white'. Set the blend mode of the 'outline' layer to multiply. Using this mode the black lines will be visible but will let colours through from lower layers.