Complete game art project header

Complete Game Project [part5] Background Design

Inkscape Tutorial

In this part of the Complete Game Project we work on elements for the background and design some cogs. There is a lot of space to cover and with the level of detail in the character, platforms and the enemies it will need some detail to match.

Note:
Now that I am done with the step-by-step tutorial and ready to post it here, I realize that I did explain some of this briefly in the tank tutorial a while back. Blame it on my old age or just having written too many of these tutorials to remember properly – but I still hope this is helpful as it’s a bit more detailed.  

2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Getting Started on the Background Design

2Dgameartguru - spacer
2dgameartguru - background creation

After putting the elements created so far into a mockup the lack of detail in the background becomes quite obvious.

Let’s start by creating the cogs that I used as the spark for the design of this game.

The main tool that can help with it is the “Align and Distribute”.

Let’s start with the basic setup and add more detail to variations as we go.
Create 3 circles, align them to be centred and combine them via ‘Path/ Exclusion’.

Create a rectangle. Bring the top nodes of the rectangle inwards, create a duplicate and mirror it.

2dgameartguru - background creation
2dgameartguru - background creation

Place the rectangles on the circles. Align both of them to be centred horizontally to the circle. Group them and align the group vertically to the circles.

Now we have a group centred to the circles, which allows us to rotate them with the pivot point in the centre of the circles.

This makes it a lot easier to create the other teeth.

Duplicate the rectangle group and rotate it while holding down ‘CTRL’ (this will lock the degrees).

Repeat the process two more times to get a simple 8 teeth cog.

2dgameartguru - background creation
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

Designing Bigger Cogs for the Background

2Dgameartguru - spacer
2dgameartguru - background creation

For a larger cog create a two bigger circle and reuse the teeth from the earlier design.

Note:
In the fixed tutorial layout it looks like the teeth have been scaled down. Keep the teeth the same size in order to connect properly.

Duplicate the teeth group 11 times to create a 24 teeth cog.This will work well with the rotation while holding the CTRL-key.

Note:
This is a purely visual approach. It won’t work if you plan on using cogs in a realistic puzzle game. Diameter and teeth would need to be accurate.

2dgameartguru - background creation
2dgameartguru - background creation

Duplicate the ring shape and scale it down [holding CTRL & SHIFT to keep the centre and proportion].

Add a rectangle that fits into the frame, duplicate it twice and using the ‘Align and Distribute’ ‘make the horizontal gaps of the object equal’.

Add another rectangle to fill the inner ring, duplicate and rotate 90˚.

A few more circle finish of the elements for this larger cog.

Use the ‘Path/ Union’ (all shapes but the small circles and inner circle] and ‘Path/ Exclusion’ [for those circles] to combine the elements.

2dgameartguru - background creation
2Dgameartguru - spacer
2Dgameartguru inkscape toolbar

One more Background Element

2Dgameartguru - spacer
2dgameartguru - background creation

For different sizes the snapped angle rotation might not work that well either leaving too big or small gaps between the teeth.

In order to get the right spacing open the Transform panel (CTRL+SHIFT+M).

Open the ‘Rotation’ tab and enter the degree (e.g. 20˚).

Fill the 360˚ by alternating between duplicating and pressing ‘Apply’.

2dgameartguru - background creation
2dgameartguru - background creation

There is no limit to variations – and if you need inspiration there is always a search on google images on e.g. ‘clockwork’ or ‘gear’.

Note:
When exporting the cogs make sure you either create an invisible square bounding box or resize the canvas in your bitmap program to make sure the pivot point is in the centre of the wheel.

It’s even more obvious in uneven numbers of teeth.

2dgameartguru - background creation
2Dgameartguru - spacer

Next up will be a part on creating pipes, connections and some nice silhouettes for the background.

More posts in this series:

2dgameartguru - complete game art project
2dgameartguru - complete game art project
2dgameartguru - complete game art project
2dgameartguru - complete game art project
2dgameartguru - complete game art project