Content Generation for Programmers Pt2

Posted in Games, Tutorials on June 27th, 2009 by admin

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:

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:


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:


And a few more details:


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


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.


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:


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


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:


And the corresponding lighting layer:


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.


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:

Content Generation for Programmers Pt1

Posted in Tutorials on September 7th, 2008 by admin

One of the key challenges facing budding new game programmers is getting artwork. You may have the greatest game concept ever conceived but without an ability to demonstrate it visually that is all it shall remain. The options available to one man band outfits (such as myself) are:

  1. Find an artist to do it for you.
  2. Find a source of free artwork.
  3. Hope blue rectangles and red circles will hold up.
  4. Steal artwork from an existing game.
  5. Learn how to do it yourself.

This article will focus on option 5, which is not quite as difficult as you might imagine. It is actually reasonably easy to produce quality artwork in a short period of time if you limit yourself to producing the type of artwork that can be done quickly and easily. The main limitation you will face is animation. Animation is hard. Animation is really hard. You can’t fake animation, you can’t have rough animations that look pretty good. Animation is something that unless done really well, looks really bad. So basically, don’t do animation. This does cut down your options in the genre of game you can produce quite considerably, but hey creativity thrives when constrained. So basically go for something with blocks, balls, cars, planes, boats etc.

Ok, so on to how to do it. In part one of this article I will go over a quick way to produce nice looking artwork without going near a paint program. In part two I will go over how to make a nice looking vehicle graphics with minimal artistic talent.

Procedural content generation has many advantages especially for programmers. It doesn’t involve paint programs. It considerably reduces the size of the game. If done right it can look very professional. So without further ado, here is how the planets in StrafeFighter were done.

Step 1, Make some noise.

At it’s heart Procedural content generation is random. So first things first we need a source of randomness. This is actually much harder than you might imagine. Lets start with Math.random() that is pretty random, random looks like this:


int size = 256;
BufferedImage img = new BufferedImage(size,size, BufferedImage.TYPE_INT_ARGB);
for(int x = 0; x < size; x++){
for(int y = 0; y < size; y++){
float val = (float)Math.random();
int rgb = Color.HSBtoRGB(0.0f,0.0f,val);
img.setRGB(x, y, rgb);

Which is not particularly exciting. What we want is something that is not quite so random. Getting something not quite random and fast is actually pretty tricky. Luckily a guy by the name of Ken Perlin has already solved this problem for you and has come up with pretty much the ultimate noise function, Perlin noise. And if that wasn’t enough he went ahead and came up with an even better one than that, Simplex noise. Simplex noise looks pretty similar to Perlin and has less complicated code (although it is conceptually harder to understand) and is significantly faster for higher dimensions. I recommend this article: It has a pretty good explanation and Java source code. Here is what basic Simplex noise looks like:

Simplex Noise

int size = 256;
int radius = size/2;
BufferedImage img = new BufferedImage(size,size, BufferedImage.TYPE_INT_ARGB)
for(int x = 0; x < img.getWidth(); x++){
for(int y = 0; y < img.getHeight(); y++){
float dx = (x - radius)/(float)radius;  // normalized coordinates -1 -> 1 from left to right
float dy = (y - radius)/(float)radius;  // normalized coordinates -1 -> 1 from top to bottom
// Set every pixel in the image to random value.
float val = function.eval(dx,dy);
int rgb = Color.HSBtoRGB(0.0f,0.0f,val);
img.setRGB(x, y, rgb);

This is starting to look interesting. Now you may be wondering looking at the above code what the function object is. At this point is worth introducing a very powerful interface for generating procedural content.

public interface Function2D {
float eval(float x, float y);

The function object is an instance of a class which implements this interface using a Simplex noise generator. We will see later on how defining this very simple interface allows a great deal of flexibility.

You will notice that the texture is looking a little bit smooth and lacks any detail. The easiest way to get some nice details is to add in some higher frequency noise to it. You do this by simply adding a smaller and smaller amounts of at noise generated with increasingly extreme coordinates. Luckily it is really easy do do using the Function2D interface:

public class Fractal implements Function2D {

private Function2D source;
private int octaves;
private float fade;

public Fractal(Function2D source, int octaves, float fade) {
this.source = source;
this.octaves = octaves;
this.fade = fade;

public float eval(float x, float y) {
float sum = 0;
float curWeight = 1.0f;
for(int i = 0; i < octaves;i++){
// The bit shifts are just a way to quickly get the i'th power of 2.
sum += curWeight*source.eval(x*(1<<i),y*(1<<i));
curWeight *= fade;
return sum;

I have called it Fractal because it shares many properties with them and is actually an implementation of something called Fractional Brownian Motion. Octaves basically says how many times we run the source function and fade describes how much of the result we add at each iteration. Now if we construct a Fractal passing it a Simplex noise source the result looks like this:

Simplex Noise
Now were talking. But it’s all gray, we need some colour. Now at the moment we are generating a noise value for each pixel and setting the brightness of that pixel to that value. One way of generating nice colourful images is to use the random value as an index into a colour table rather than for the brightness of the pixel. A nice way of generating a colour table is just to fire up a paint program (I know I said no paint programs but this is an exception) and go nuts with the gradient tool. Gimp is my preferred program (it’s free) and has some really nice preset gradients. For an earth-like planet I went with this one.

Simplex Noise

Which results in:

Square Earth

Ok so this is looking pretty nice, but it is square, we need round planets. Well this is pretty easy, let’s just set the pixels outside of a circle to be transparent (when dx*dx + dy*dy > 1). and hey presto:

Round Earth

Hmm… this is looking circular but planets are spherical. Well after playing around with a few ways of distorting the texture to make it look spherical I found the best way was using an elliptic lens. This ends up look like the following:

Sphere Earth

To do this, take the normalized coordinates you would have used to evaluate the fractal function and run them through this first:

void distort(float x, float y, Vector2D dest) {
float z;
float tmp, rx, ry;
float ri = 0.5f; // refraction index

z = (float)Math.sqrt(1 - x * x  - y * y);

rx = ri * x;
tmp = (float)Math.sqrt(1 - rx * rx - y * y);
dest.x = rx * (1 - y * y) / (z * tmp + rx * x);

ry = ri * y;
tmp = (float)Math.sqrt(1 - x * x - ry * ry);
dest.y = ry * (1 - x * x) / (z * tmp + ry * y);

And thats pretty much it. We can add a nice atmosphere simply by adding a blue colour and fading the alpha value to zero as we go out. Diffusely lighting a sphere is also pretty easy we just multiply each pixels brightness by a light value calculated with:

light = (lightPos.x*dx + lightPos.y*dy)*DIFFUSE_LIGHT + AMBIENT_LIGHT;

lightPos is a vector that is the direction of the light relative to the planet. AMBIENT_LIGHT and DIFFUSE light can be used to control the relative lighting across the planet between the dark/light side. The end result looks like this:

Final Earth

The great thing about the Function2D interface is it is really easy to cascade function blocks to get just about any planet you can imagine. The following Gas Giant was generated using

Function jupiter = new Adder(new Scaler(0.05f, 1.0f,
new Fractal(new Simplex(0),6, 0.5f)), 0.9f,
new Scaler(2.0f, 2.0f, new Fractal(new Simplex(0),8, 0.7f)), 0.1f);

The Adder and Scalar classes are implementations of Function2D that add or scale other functions. The two parameters for scalar are the x scale and y scale.  The adder parameters are the weights of the first and section functions.


Procedural content generation is a powerful technique particularly useful for the artistically inept. Although it is great for backgrounds and textured simple shapes it is really pretty difficult to procedurally generate a car. So for part 2 (coming soon) I will go over some techniques for drawing (gasp) mechanical things like ships and vehicles.