Inkscape Tilesets Part 1 : The Productivity Shape for Tilesets

Hi guys,

I will  speak about the way I make my Tilesets in two chapter :

Part 1/2 : The productivity Shape for tilesets !
A simple common shape for Tileset blocks : not the best for performances, but the best for your indie productivity !

Part 2/2 : A repetitive not so repetitive tileset
How to use the InkScape power to make beautiful tilesets not so repetitive.

To make this tutorials, I will make a 2D plateformer tileset of a crystal world

Part 1 – The Productivity Shape for Tilesets

First, setup your environment. This can work for every graphics editor, but I encourage you to use (or learn) InkScape.

Document size : 300 * 300 (for 50*50 tiles)
First Grid (blue) : 50*50
Second grid (Red) : 25*25 for top view, 10 * 10 for plateformer

You should have something like that :

ScreenShot085

This setup will make your work easier.
Grids are important guides as a good tileset make connection between tiles invisible.

This introduction is just a little tip to make the shape easier to make and to understand.

The principle

Ok, let’s explain it.

As a prerequisite, please be sure to know how TileSets works.
So you need at list one of each of this different tiles :

  • full tile – F
  • Top – T
  • Bottom – B
  • Left – L
  • Right – R
  • Top left convex – TLX
  • Top right convex – TRX
  • Bottom left convex – BLX
  • Bottom right convex – BRX
  • Top left concave – TLV
  • Top right concave – TRV
  • Bottom left concave – BLV
  • Bottom right concave – BRV

So the idea of this productivity shape is this :

TLX T T T T TRX
L F F F F R
L F TLV TRV F R
L F BLV BRV F R
L F F F F R
BLX B B B B BRX

And as you see, with this shape you have :

  • 12 full tile
  • 4 Top
  • 4 Bottom
  • 4 Left
  • 4 Right
  • 1 Top left convex
  • 1 Top right convex
  • 1 Bottom left convex
  • 1 Bottom right convex
  • 1 Top left concave
  • 1 Top right concave
  • 1 Bottom left concave
  • 1 Bottom right concave

So It’s ok to make your terrain Tileset, let’s do a first sample tileset using this idea…

The “Productivity shape”  for a top down game :

ScreenShot086


The better things of this shape :
You have a real terrain aspect to work on with every tiles type and with real connection to another tiles.That’s why you will make it faster.

The bad points of this shape can be :

  1. The number of same tiles type (12 full tile, 4 top …) : making a bigger resource file than one of each
    But this is a real opportunity for you to make different tiles to break the repetitive aspect of tilesets
  2. You don’t have on this shape direct connections between some tiles example : Top and Bottom.
    But in other tilesets shapes you’ll have less connections.

 

The result of a tiled map (top down view) with this shape :

ScreenShot087

Ok it’s a really flat design but the job is done !

Please note that I’ve made a 3d effect to make the understanding easier, and a little relief can be good even in a 2D game 🙂

For a plate-former, the shape needs to be less symmetric to make a ground aspect.

 

The “Productivity shape”  for a plateformer (toudoudoum bis!) :

ScreenShot090

Not a major difference, the top zone is reduced to 10 px, the bottom zone increase to 40 px. This will give a “tunnel” aspect perfect for plateformes

 

And the result :

ScreenShot091

A good plateforme base in a few minutes !

I Will start from this point for the second part : Stay tuned !…