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
|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…|
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
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:
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.
And here all the needed junction of our shape:
For our main tile (T):
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
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.
Hard part: Be sure to have redundant edge.
To make it simple:
You’ll see green tick to help understand the junctions.
|Here you have the result for the top-bottom cloned edge of the main tile.|
Fill completely your main tile.
Actually, you can let some empty zone for the last aspect of this tutorial.
The result :
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!
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.
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!
|Same for concave corners|
|Same for the sand except that I polish the corners|
|For the sand in concave corners|
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:
Less “solid” aspect for walls, but according to me, the stone’s colors are too bright. A little rework is needed:
Better! Now just the fun remains!
5 – Add stuff and make your world
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.
|… You can add shadowed stone on left and right wall…|
… 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”
Only 1 hour work to have a pretty good TileSet for our western platformer: