First I wanted to create a real tutorial on how to create a tilesest, but I realized that I am most likely doing it wrong :) Therefore this article is not very detailed, it's more a blog entry than a
tutorial. If you want to know how to do this or that in detail, please
comment on the article and I will try to explain more.
I am self taught. I never read any tutorials on creating tilesets. I am pretty sure there's plenty of better ways how to make a tileset for your game. But this is my way and it kind of "works".
Mr. Dandelion is a 2D kind of a platformer, but not really. You don't jump or run. You fly around. Nevertheless I needed a 2D platformer tileset. I decided to create it on my own. I am using TMX map file format to store my tileset, because AndEngine has an extension that can read TMX file format. It's a little bit limited but good enough for my needs. There is also a really good editor that can work with TMX maps called
Tiled.
For Mr. Dandelion, I am creating four seasons - summer, autumn, winter and spring. Summer was my first tileset ever and the result looks like that. But in the game it actually looks better than autumn. That is because I was running out of inspiration for autumn. This tutorial is about creating a tileset for winter season.
How do I get started
I draw a piece of map on paper and divide the areas by squares. I identify patterns in the map that can be assembled from pieces. But the best way would probably be to get an already existing tileset and simply recreate the pieces from the artwork. This is how my early draft looks like:
I do not use pen and paper too much and when I get the idea in my head. I go straight to Photoshop. For my game, I decided to go for HD graphics right away and I am using tiles 128x128px big. It's a bit overkill, but it looks good on tablets.
I start with counting how many tiles I will need and creating an emtpy workspace. I cut the image to 128x128px by using guides. On the right, you can see my swatches palette - these are the only colours I use for the cartoon graphics. The last 7 colours are winter colours - snow, ice and sky.
I am sure that the tileset would be better as square. It would also fit into 1024x1024 texture. But I like to work with this kind of rectangle in the Tiled editor. For winter, I decided to have snow and soil ground. Snow will be dangerous for Mr. Dandelion and soil will be fine to land on. Also I want to have icy water lakes. I need three snow tiles (left cliff, middle and right cliff) and three soil tiles (left transition from snow, right transition from snow and middle - no cliffs; cliffs will always be covered by snow).
Another way would be to create soil patch or snow patch object and place it later as an object over the terrain. Let's see how it will look when I have those 6 pieces of terrain first. For terrain variability, I add one more snow tile, that makes 7 in total. There are 9 columns. You will see later why.
Basic terrain
The tile "surface" is the top border. I start by using the Pen Tool (P) and draw a path that will be the snow. I add one more guide in the first row. This is important, because the snow line must pass from one line to another at the same height. Also the control lines of the spline must be parallel to this guide - this will make the transition from one tile to another look good. I add one more guide to the left and right "cliff tiles". This creates approx. 20 pixels wide columns. Using the Pen Tool, I create two paths, one for the upper, light snow, and one for the lower darker snow. I just make it look like icying on a cake. I stroke the path with darker color and then fill it with lighter color. One path is visible as a thin black line, the other as a marquee.
Similarly I create the rock. Just make a path that creates the "jagged" edge of a rock:
You can see I created the rock border in the 20px wide columns. Also I create the rock dark blue to fit the scene. Now I will just add some features to the rock. Like some different coloured stones - I have a problem with this because I really don't know how it should look like :)
You can see there are a lot of tiles that are not needed - just use the space to create any tiles you want. I have decided to have frozen water tiles and caves in winter season. This is what I added:
Now I just flatten the whole image, cut some pieces and create:
- water edges - simply take a cliff and put ice and water tiles behind it
- cave insides (now I have cave roof) - simply take cliff tile and put cave behind it
- tiles with transition from one height level to another - simply by taking cliff top and putting rock under it
Dealing with mistakes
After this I realized I need more tiles! What a terrible planning:
See, I have 2 free tiles to work with and I need at least 3 more :) I had to extend the canvas and create an extra column. But I actually decided to create a whole extra row for possible future expansion. This allowed me to create an extra three snow flat surface and add an extra melted snow surface - this adds to variety of the game as well. This is the result. Notice the empty tiles. These can be always added later - it's important that their index in the TMX will stay the same.
Conclusion
I had to fix some minor issues, pixel here, pixel there. But this is how the levels will look like when using this tileset in Tiled. Notice that there are some mistakes I still have to correct. Pixel here, pixel there...Also some texture must be added to the rock, because the solid blue looks too plain.
If I ever make a game like this, I am hiring an artist!
or press (P) to activate it. If you don't know, how to use Pen Tool, learn it. It's priceless for cartoon graphics!
