Setting up an Isometric Game Using Inkscape

2

Attached Files

The following files have been attached to this tutorial:

.capx

isometriccapexample.capx

Download now 223.64 KB

Stats

4,951 visits, 11,096 views

Tools

Translations

This tutorial hasn't been translated.

License

This tutorial is licensed under CC BY 4.0. Please refer to the license text if you wish to reuse, share or remix the content contained within this tutorial.

Published on 31 Jan, 2014. Last updated 19 Feb, 2019

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.

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 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).

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.

.CAPX

isometriccapexample.capx

Download now 223.64 KB
  • 0 Comments

Want to leave a comment? Login or Register an account!