Content Generation for Programmers Pt2

In this part I will go over how to use paint and vector drawing programs to generate art assets with minimal talent. So first up you will need some drawing programs, one vector based and one pixel based. As this is targeted at hobbyist game developers I will only be using free software.

First up is Inkscape. This is a great vector drawing program and probably one of the most well designed free/open source pieces of software I have ever used. The ui is simple consistant and intuative. I won’t go into any depth on how to use the program as there are a plethora of good tutorials available.
Second up is GIMP a raster drawing tool. GIMP is less well designed but not too bad once you get used to it.

My general workflow for doing art assets is to do a rough sketch in Inkscape and then take it into GIMP to polish it off. Or if you are looking for a vector style or are afraid of GIMP (I wouldn’t blame you) then you can just export straight to a png for your game.

So first up fire up a copy of Inkscape. Set up your page to be how big you want your final sprite to be, for the Rally Car it is going to be 64×64. I like working with power of two sizes as it is easy to divide things into haves/quarters. I tend to like working with nodes always snapping to a fine grid in this case a 1×1 but you can change this around as needed. I like having major gridline every 4 minor grids. First I do a rough outline like so:
Step_1

To do this I use the Bezier/Line tool. This is the tool I use almost exclusively, and coupled with the edit paths tool all you really need. These tools are used for creating new paths(shapes) and editing existing paths. You need to become very familiar with these two tools so read up and practice lots. Make sure you know what all the buttons in the tool-bar that comes up when you hit edit paths do. Paths consist of nodes connected by lines and can be open (a portion of the shape not having an outline) or closed (continuous outline). Lines can be either straight or curved, nodes can be corners or smooth. Here is a view of the nodes of the outline:

Step_1a

You can add a node to a path by just double clicking on an existing line when in the edit path tool is selected. You can curve a node by clicking anywhere on the segment and dragging it round, this will create a couple of handles that you can use for my precise control. To go back to a strait line just click once on the line to select the start and end nodes and hit the make straight button.

So lets keep going adding shapes until we have something that resembles a car:

Step_2

And a few more details:

Step_3

And were pretty much done, we could use this as it is in a game and it would look fine:

Step_4

But it will like a lot better with just a few highlights. To do this we will move to GIMP for finer control. So here is the exported png file in gimp.

Step_5

It is pretty blurry looking up close, and you wouldn’t know how to set individual pixels to achieve the look zoomed out. The anti-aliasing in Inkscape has actually done a lot of work for us and the down-sampling you get as a result can look quite good but is a little bit random. If you want an old-school sprite look you will have to read up on pixel art tutorials, but be warned you have to have a natural talent to get something that looks good.

First thing is to add a new layer so open up the layers dialog (Ctr+L) and hit the new button. Layers help by separating out different steps in the process and allow us to turn on/off a step and see the result at any time. The car actually looks ok as it is but it is remarkably easy to add a few touches that can really make it look a lot better. We are going to be lighting the sprite so lets switch the newly created layer to “soft light” mode. This changes the way the two layers are added together so that bright colours will brighten the layer underneath and dark colours will darken it (perfect for shading). Depending on the look you are going for choose a pencil tool (for cell shaded hard lighting edges) or a brush tool (softer more realistic looking shading). First we will do highlights so choose switch to white and select an appropriate sized brush and start drawing. It will take a little bit to get the hang of it but it is really easy to undo and by playing with the layer visibility you turn on and off shading to see the results with ease.

Here is what mine looked like after a few rough strokes:

Step_6

It looks pretty good but if you take a look at the highlight layer you can see just how rough it looks:

Step_7

Now lets add some shadows, it is already pretty dark so i’ll pick a shade of gray rather than black to do my shadows. Here is what it looks like after a few shadows:

Step_9

And the corresponding lighting layer:

Step_8

It takes a little bit of trial and error to get the hang of it you’ll be churning out sprites in no time.

A word on lighting. Lighting is a pretty complicated subject but understanding the basics can help a lot. There are two basic kinds of ways light interact with surfaces, specular and diffuse. If you look at the image below you can see both effects at work.

Lighting

Diffusely lit surfaces are brighter when they are facing in the direction of the light. Specular lighting is bright when the surface is mirroring the light to your eye and so dependent on your point of view. It is responsible for the shinny bright highlights and is more prevalent on reflective surfaces.

The one problem with the Rally car is the lighting is only strictly valid for it’s current orientation. Because the light source doesn’t rotate with the car unless it is facing up the lighting is wrong. We have a fair tolerance for things like incorrect lighting and perspective so you can get away with it particularly if you are going for a heavily styled rather than realistic look.

Here are some examples of the ships in StrafeFighter, as you can see I often also mess with the colours in GIMP to get the look I am after:





3 Responses to “Content Generation for Programmers Pt2”

  1. swisscheese Says:

    Awesome tutorial – pretty much the best thing i’ve seen on “Assets for the Aesthetically Challenged” like myself :-)

  2. the people Says:

    Who are you? I ain’t a bot. interesting site for an nzder….

  3. admin Says:

    Why interesting for a Kiwi? I’m a software engineer, went to Canterbury Uni.

Leave a Reply