This is part 2 of the blog post series for making your own platformer tile set – if you haven’t already, I would recommend reading Platformer Tile Set – Part 1.
Last time we finished making our basic ground tiles, and ended up with something a little like this:
All our shadowing and highlighting is finished and now we are ready to add the surface that our game character is going to run on! For this example I am going to use grass, because it goes nicely with the soil and stone base. So, let’s get started!
- This time our main tile that we are going to work on is going to be the top middle tile, and the first thing we are going to do is pick a base colour for our grass and draw two straight rows of green pixels right across the top of the square
2. Now, obviously, grass isn’t just a straight, flat object, and as we can only see the side of the block, we want to had some grass hanging down so it doesn’t look so 2D.
3. Grass also doesn’t lay flat against the block, so lets add some shadows under the left edge of the grass to give some differentiation.
If you have any stones which stick out from under the grass, use the grass lowlight colour under the edge of the grass instead of the soil shadow colour.
4. The grass will need some lowlights, so choose a colour which is a darker version of the grass. Remembering that the light source is coming from the top right of your computer screen, as the grass shadow colour on to the lower pixels.
5. The grass will need some highlights too, so let’s add those. You may want to move your lowlight pixels around while you’re doing this so that it looks more balanced.
6. As grass doesn’t have a smooth, flat top in real life, we will add some spikes sticking up to give the top of the grass some texture.
7. Now more shading is needed, so add lowlights and highlights spikes. You can change the highlighting and lowlighting on the grass below as well so that it all fits together nicely.
8. It is copy and paste time! We know that our stones line up perfectly, so now we need to make sure that the grass does too.
As you can see, the grass doesn’t quite join together right in my tiles, so I moved some pixels around, changing shading as well, until I was happy with how the grass looked. Remember to make the changes to the main middle tile and copy and paste it either side so that the tiles always match!
If you wanted, you could go ahead and use the tiles just like this. But I think that straight edges are a little boring, so in the next post I am going to show you how to shape the tiles so that you can create a more personalised look.