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.
The Basics
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.
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.
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.
Cartoonified and opened
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.
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.
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
Hi Chris,
Thanks man, these series are really helpful! I was wondering how you did the envelope effect. No matter how I tried in Inkscape, I don't seem to be able to do this.
I covered the envelope in an earlier post. The key is to have paths only (no objects) (I might have forgotten to mention as I usually convert my objects right away to be able to modify them). You can also take a whole group and convert it to paths and then apply the envelope effect.
Hi Chris, great tutorial as usual. I'm currently stuck on creating a variety of rocks and boulders, they look more like clouds than something you could stand on, any advice would be gratefully received.
Thanks Chris. It worked! After ungrouping all, then converting them to path – and then group them back together again – before using the envelope tool I was able to get the right effect.
Hi Pete, the tutorial about my approach to rocks and boulders is up now. I hope it's helpful. :)
Thanks man. Its awesome! Can I use it in the game I am making now?
sure… that's what it's for… :)
This comment has been removed by the author.
Ur my fav man I love you man ily bae
mfw u r gey
mfw u r cuul
I used this asset in my android game Doodle Wizards, very useful.
https://play.google.com/store/apps/details?id=com.touchhutllc.doodlewizards
what's name this prigram?
I use Inkscape for these tutorials.
https://inkscape.org/en/