Note:
This tutorial is also available as a youtube video.

2Dgameartguru basics - fun with squares - VIDEO

Having fun with squares

Inkscape Tutorial

The second tutorial is another introduction to basic shapes in Inkscape. This time we are going to have fun with squares. We turn them, scale them, bend them, round them off and rearrange them to create complex shapes.

2Dgameartguru inkscape toolbar
2Dgameartguru fun with squares

Start by creating a simple square.

Take the square, duplicate (CTRL+D) and scale it. By using the bottom modifier we keep the new square aligned.

Add another square to the design and round the edges by altering the Rx and Ry values.

Duplicate more squares to add detail. Convert them to paths ( Shift + CTRL + C ) and alter the nodes to deform them.

2Dgameartguru fun with squares

Add another square without rounded corners and rotate it 45 degrees.

After converting it to a path, use the node tool to elongate the diamond shape.
Duplicate it with varied sizes and rotation.

Add a lighter square at the top to create and deformed copies of the rock to create highlights.

With all the core elements in the design, we can easily create variations to make the platforms look less repetitive.

2Dgameartguru fun with squares

Variations

The biggest advantage of using vectors is the ability to quickly change the design. With all the elements in place, it’s a breeze to rearrange, recolour and design variations. When creating blocks, tiles or props for a game I try to make a few similar elements. It will look more interesting and less repetitive in the game later on.

2Dgameartguru inkscape toolbar
2Dgameartguru fun with squares

A variation of the common tile is the wooden crate. Start with a square again.

After adding two smaller duplicates of the squares, duplicate them again to create boards.

Add some highlights by placing elongated rectangles in a lighter colour.

A little decor added after and we end up with a quick and simple element for a 2D game.

2Dgameartguru fun with squares
2Dgameartguru fun with squares

By combining those basic shapes it’s easy to create a simple platformer game. Add more variations to the tiles (e.g. the corner pieces or some simple plants or diamonds to pick up the game will quickly come to life).

View Modes

The outline version might look somewhat messy. Nevertheless, it shows that the whole scene is made up of nothing but squares and deformed rectangles.

2Dgameartguru inkscape toolbar
2Dgameartguru fun with squares

Let’s have a look at a more complex design using the same principle. This castle scene is based on square shapes rotated, scaled, some with modified nodes or rounded edges.
To illustrate this, let’s strip the colour off from the image and show the shapes as outlines. As you can see even seemingly complex scenes can be reduced to simple geometric shapes.

This concludes the second post. I hope you have fun trying to recreate some of the tutorials yourself or just play around with Inkscape, gimp & co.

…and please let me know what you think about the tutorials, tell me what you would like to see featured or would like me to change.

2Dgameartguru basics - circles
2Dgameartguru basics - squares
2Dgameartguru basics - shading
2Dgameartguru basics - align
2Dgameartguru basics - picking colours