Inkscape Tilesets Part 2 : Make a not too repetitive TileSet

In the first part, I just present you the common shape I use to make my tilesets and why.
Now, I will use it to make a real tileset example.
Note : I’ve made this only for the tutorial purpose, so I’ve not pay attention to details (cactus …)

A – Setup your productivity Shape

image002 This is the end of the part 1: The “productivity Shape”.  Let’s start from it to make our TileSet for a western platformer sample…
image004

In our game target, we need 90° angles for walls so, let’s modify the BLV and the BRV.

We need “sand” represent to the player where he can walk so color it yellow

Our blocks will “fly in the air” so imagine a bottom platform darker to see it clearly

image006

Right and left wall will have the same color that the bottom to see platform endings.

Our main texture (“T” here) will be a little lighter to make a relief effect.

Tip : Be sure that your 12 T zone are clones of a main outside block. I will make it sense after!

If the clone concept is unknown, refer to InkScape manual.

Just by playing with color, here is the result of our western platforms:

image007

Already cool uh a fashion flat western TileSet! 🙂

But this is not our target! So let’s go!

B – A Theory moment – understand the junctions

Junctions are the big deal of a good TileSet: The player should NOT see junctions between the tiles. In order to make this possible, you’ll need to make blocks with exactly the same pixels on edge than its possible junctions.

To try making it clear, I’ve made some red rectangle to view the left junctions and some blue ones to see right junctions in our shape. You notice that no rectangle is truncated. You always have full rectangles.

image010image012

And here all the needed junction of our shape:

image014

For our main tile (T):

  • Every right edge must fit with left edge
  • Every bottom edge must fit with top edge

Every other block must also fit with the common possible edge

Example : Bottom edge of TOP block must fit with top edge of T.

I don’t if it’s obvious and clear, but if not, you’ll probably understand the principle after. And theory is boring. So go ! 🙂

3 – Make the global Tile look

image016

I’ve just kept the green lines of the chapter B to make it obvious.

Remember that I’ve cloned all my main tiles from a unique one outside of the real TileSet.

image018

Hard part: Be sure to have redundant edge.

To make it simple:

  • Clone an element from your final TileSet to put on each tile corner
  • Clone top edge to bottom edge
  • Clone Left edge to right edge

You’ll see green tick to help understand the junctions.

image020 Here you have the result for the top-bottom cloned edge of the main tile.
image022

Fill completely your main tile.

Actually, you can let some empty zone for the last aspect of this tutorial.

 

The result :

image023

Better! The main tile and the border edges fit perfectly.
A player will “see” the tiles only because of the repetitive aspect of them (look at the lighter stone).
Our work now is to break that regularity.

4 – Break the lines!

image026

In the main tile I increased and break the regularity of borders.

Notice that I’ve put a 50% opacity to stones to make it clearer.

image028

The same thing will be done in all the “walls”.

But pay attention to keep every junctions! : To keep perfect junctions, create a point at each tile connection and never move it!

image030 image032 Same for concave corners
image034 Same for the sand except that I polish the corners
image036 For the sand in concave corners
image038

Our actual TileSet!

You see the advantage of this productivity shape: the TileSet itself show a complete block possible on your final map: if something is ugly on the TileSet you can correct it without go in the final result.

 

The result of this TileSet:

image039

Less “solid” aspect for walls, but according to me, the stone’s colors are too bright. A little rework is needed:

image041

Better! Now just the fun remains!

5 – Add stuff and make your world

image044 image046

Add some relief effect.

Or everything you want …

But pay attention here: Never ever cross tile edges to preserve the good repetitive aspect we have.

image048 … You can add shadowed stone on left and right wall…
image050

… And lot of different stuff on your tiles.

As you have in this shape 12 main tile, you can make 12 tiles that differ just a little bit to have a less “block aspect”

 

 

Conclusion

Only 1 hour work to have a pretty good TileSet for our western platformer:

image051