Treasure chests

Inkscape tutorial

Here’s a quick tutorial I found unfinished on my hard drive. Finally, I decided to finish and publish the easy approach to creating a treasure chest.

When creating game art, it’s a task most of us face at some stage. The iconic image for treasures found is a chest filled with gold coins.

2Dgameartguru inkscape toolbar

The Basics

2Dgameartguru treasure chest

Start with a rectangle.

Add three more for the metal framing.

Another square at the base will be altered by removing one node and curving the side.

Mirror the shape and place them at the bottom of the chest.

Two circles on top form additional decoration.

2Dgameartguru treasure chest

Create some additional rectangles for shading.

Another rectangle forms the lock.

A rounded rectangle is combined with it for a more interesting shape.

The keyhole is created with Another rounded rectangle.

Add a few more shapes to add a highlight to the metal parts.

Duplicate the shape of the lock and the horizontal metal rectangle.

Give them a dark brown colour and add transparency. Move them behind the lock as a shadow.

2Dgameartguru treasure chest

Exported to PNG the chest still looks alright in 64×64 pixels or even smaller at 32×32 pixels:

You might want it to look a little less ‘square’ and what good is a treasure chest when we can’t open it.
Let’s tackle those issues now. The first one involves the envelope extension and the opening requires some tweaking of nodes.

2Dgameartguru inkscape toolbar

Cartoonified and opened

2Dgameartguru treasure chest

Create another rectangle and modify the top nodes by moving them out.

With the envelope extension (Extension/ Modify/ Envelope) you can deform the shape into a more cartoony shape. Set the opacity of the envelop shape to 0 to make it invisible.

Inkscape does not allow curved deform through envelopes.

In order to create the curves use the node tool and manually curve the upper part of the chest.

2Dgameartguru treasure chest

Take the top off to open up the chest.

Start by deleting the highlight and shadow elements.

Trim the base shape by moving the nodes of the brown base and the bars on the sides.

Create a rectangle for the lid and a circle for the treasure.

Add a darker inner rectangle to give the lid depth and some smaller copies of the circle for coins.

Give them a dark brown colour and add transparency. Bring them below the lock as shadow.

2Dgameartguru treasure chest

The result looks alright at 64×64 pixels but it starting to be cluttered and losing detail in the smaller 32×32 pixel size. Taking some elements off to make it cleaner should solve that problem easily.

I hope you enjoyed this one as much as I did writing it. Recently, I used a very similar chest design in a puzzle game for a friend.
Keep playing with the concept, create chests with iron frames, spikes, skulls, holding diamonds and rubies or being plain empty or broken. Enjoy!


Here’s the download file:
Inkscape SVG of the Treasure Chests