Tutorial Downloads

File Size
IsoMetricCapExample.capx223KB

Translations

Know another language? Translate this tutorial!

Stats

1,237 visitors
1,633 page views

Setting up an Isometric Game Using Inkscape

Favourite 13 favourites
Tutorial written by seothenOriginally published on 31st, January 2014

Inkscape has a fantastically simple way of creating Isometric graphic environments; some of my all-time favourite games have been Fallout 1 and 2, Jagged Alliance 2, and various games that sorta qualify as Isometric (Baldur's Gate, though some people take issue with this).

The purpose of this tutorial isn't to teach you how to use Inkscape - so you will need to know ahead of time how to:

Create a shape in Inkscape
Remove Strokes and Add Fills
Manipulate Gradients
Export Inkscape Objects as .pngs

If you're literate in other art software however you shouldn't find the learning curve too steep.

Start in Inkscape by turning on your document properties (CTRL+SHFT+D), then selecting the Grids tab, and choosing an Axonometric grid with the setting shown in the pic below:
Create a rectangle (don't be tempted to skip straight to isometric drawing, though technically you can by following the grid lines; the reason is that it will be easier to create a seamless tile if we start with a rectangle, then skew accordingly).

Duplicate (CTRL+D), darken the fill of the duplicate, then change it to a gradient to simulate how light does not flow uniformly across a wall.
Open full size image
Turn on your Transform controls (CTRL+SHFT+M), choose the Skew tab, and set the Vertical skew to 150 degrees. You'll see this transforms the the rectangle so that it perfectly matches the isometric angles. Export your Wall as a png.
Open full size image

Open up Construct - you can choose to set a tiled background as a floor or not; I chose to use in my example some flooring that tiles well taken from the always-awesome cgtextures.com.

Import your wall as a Sprite and place it in Construct.Copy and paste the wall repeatedly (once you have a few lined up grab them all and copy and paste as a group to save yourself some time.)

Instead of importing a sprite to create walls going the other direction, we're just going to take an existing wall, copy and paste it, then flip it so it's the same length as the original wall.
Now start filling out your map with additional walls.

It's starting to look okay, but not great; the walls seem to just be pasted on the ground without having any effect on it. We'll create some shadows to be added to the environment. Start in Inkscape again, create a gradient with no stroke that fades from Black to opacity (not white - this is important). As well, make sure you start it as a rectangle as shown below, and then Skew it into the proper dimensions (150 degrees vertical by 120 degrees horizontal).
Open full size image
Export the shadow; you may have to experiment a bit with the sizes you export it at, I eventually settled on a Width of 70.

Start copying and pasting the shadow to interact with the walls. You'll have to keep an eye on your Z-Orders for your different objects, but with a bit of experimenting, you'll get the hang of it.


CapX attached.

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

0
dznerpro 2,347 rep

awesome, greate tutorial of design!

Friday, January 31, 2014 at 6:04:15 PM
1
EmpowerMe 6,542 rep

Very nice demonstration on how to use Inkscape for creating environments and incorporating shadow/lighting effects to create depth. I use Inkscape for creating simple graphics like buttons and such, but I do not use it often enough to learn how to push it to its real potential. Your simple tutorial gives me a reason to reach beyond basic graphics to more complex use, yet without having to rack my brain on how to create really cool effects. My learning philosophy is, just in time learning, and not just in case learning. I am a teacher trying to develop good highly interactive online content using C2. Yet, I don't have time go through lots of training just in case some day I may need to know how to do something. Your tutorial is perfectly suited for just in time learning for me. It's simple and immediately useful for my development plans. Thanks for the inspiration and I look forward to implementing this new found knowledge/understanding in my on going project.

Friday, January 31, 2014 at 6:39:24 PM
0
fabiodesouza 1,418 rep

good job, I love Inkscape.

Saturday, February 01, 2014 at 11:12:22 AM
0
Lordshiva1948 10.7k rep

So do I very good tutorials thanks for sharing

Saturday, February 01, 2014 at 12:06:29 PM
0
seothen 1,637 rep

Thanks very much for the support on this from everyone, I'm happy to provide whatever advice or tips that I can.

Saturday, February 01, 2014 at 3:45:09 PM
0
makotto 2,648 rep

Thanks for this tutorial. Very simple, but very effective

Sunday, February 16, 2014 at 11:50:15 PM
0
Colludium 3,883 rep

Nicely done - thank you!

Sunday, March 02, 2014 at 5:29:51 PM
0
SamRock 336 rep

Thanks for the tutorial. When it comes to Construct 2 I wanted to know if it has some built in functionality to handle Isometric game specify features. Like drawing multiple layers (Ground, Wall, Roof etc). Can we create a isometric TileMap? How does the Pathfinding differ when using Isometric tiles? I really hope Construct 2 has these features. I am *this* close to buying the personal edition. Just wanted to confirm these features as I primarily want to create Diablo style game :)

Thanks again for the great Tutorial!

Tuesday, April 08, 2014 at 12:29:35 PM
0
seothen 1,637 rep

@makotto @Colludium Thanks to both of you!

@SamRock I'm currently building an isometric RPG and I think C2 is capable of handling much of what we'd want; with a bit of trickery and planning walls/roofs/etc can all be enabled. Isometric TileMaps? I'm guessing no. Pathfinding differences? I'm not sure yet, but when I implement it in my game I'll have an answer. I think either way Construct 2 is great way to test your graphics and gameplay, whether or not it ends up being used as an engine (I don't know right now if it will be how I publish my game, or if I use it to drum up interest, but either way I'll be buying a full copy.)

Thursday, April 10, 2014 at 3:52:06 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.