How to Design a Platformer Tileset
I made this quick example to show you how my tilesets are set out:
You could also add another row or so of additional tiles used to give variation or imperfection to the world. For example, you could have variations of tile 7 that are sometimes used instead of tile 7 (I just used tile 7 as an example because it’s usually the most commonly used, but you can have variations of any tile, obviously), or tiles of external things like branches or cobwebs.
Let’s run through what each tile is for:
(id - name / surrounding blocks)
0 - top left / Air up, left. Solid center.
1 - top middle / Air up. Solid center.
2 - top right / Air up, right. Solid center.
6 - middle left / Air left. Solid center.
7 - middle middle / Solid all around. Solid center.
8 - middle right / Air right. Solid center.
12 - bottom left / Air down, left. Solid center.
13 - bottom middle / Air down. Solid center.
14 - bottom right / Air down, right. Solid center.
3 - top / Air up, left, right. Solid center.
9 - middle / Air left, right. Solid center.
15 - bottom / Air down, left, right. Solid center.
18 - left / Air up, down, left. Solid center.
19 - middle / Air up, down. Solid center.
20 - right / Air up, down, right. Solid center.
21 - single / Air up, down, left, right. Solid center.
Corners and Edges:
4 - top left corner / Air bottom-right. Solid center.
5 - top right corner / Air bottom-left. Solid center.
10 - bottom left corner / Air top-right. Solid center.
11 - bottom right corner / Air top-left. Solid center.
16 - top edge / Solid bottom. Air center.
17 - right edge / Solid left. Air center.
22 - left edge / Solid right. Air center.
23 - bottom edge / Solid top. Air center.
Note: Corners and edges have a transparent background so that they can be used on the same grid reference as may be required by other corners or edges.
A - 3 edges must be used on this grid reference, so as you can see they are layered and have transparent backgrounds like corners.
B - The base tile here is a middle left square tile, and layered on top of it is a top left corner tile because because there is an air block to the bottom-right of this grid reference. The corner tile is transparent everywhere except the corner itself, so that tiles beneath it can be seen, such as other corner tiles potentially.
C - Similar to B.
D - Similar to B.
E - Similar to B.
F - Similar to A.
G - Similar to A.
Remembering that edge tiles are placed on an air block, objects in-game will not collide with these tiles, but will collide with the actual solid block that the edge tile is next to.
Corner and edge tiles are transparent and layered over other tiles so that you don’t have to create single tiles for every single tile possibility. For example A, B, C, D, E, F and G would all be their own tile otherwise.
Also, if you’re still not understanding corners:
Now this is the quickest and easiest and way I can think of to make a tileset from beginning to end following the tileset structure above:
1. Sprite tile 7, the center block, and make sure that it loops nicely by placing a few of those tiles in a larger square.
2. Copy tile 7 onto 0, 1, 2, 6, 8, 12, 13, 14.
3. Sprite an edge over tile 1, then over 6 and 8, and finally 13. If your tileset supports it, you could even just copy and flip or rotate the edge only of one of these tiles over the other 3. (You wouldn’t copy and flip or rotate the whole tile unless tile 7 loops nicely when mixed with flipped and or rotated versions of it).
4. For tile 0, you can copy the right side of 1, and the bottom side of 6 and paste over eachother and then sprite in the missing corner. You can do the same for tiles 2, 12 and 14, copying the opposite sides of the 2 tiles next to it like with 0 (1 and 6).
5. The square is now completely done.
6. For the column (3, 9, 15), copy the left side of 0, 6 and 12, and paste it over the left side of 3, 9 and 15, then copy the right side of 2, 8 and 14, and paste it over the right side of 3, 9 and 15. Done.
7. For the row (18, 19, 20), copy the top side of 0, 1 and 2, and paste it over the top side of 18, 19 and 20, then copy the bottom side of 12, 13 and 14 and paste it over the bottom side of 18, 19 and 20. Done.
8. For tile 21, the single block, copy the top-left corner of 0 and paste it over the top-left corner of 21, then copy the top-right corner of 2 and paste it over the top-right corner of 21, then copy the bottom-left corner of 12 and paste it over the bottom-left corner of 21, then copy the bottom-right corner of 14 and paste it over the bottom-right corner of 21. Done.
9. For the corner tiles (4, 5, 10, 11), you want them to match up to the edges of tiles 1, 6, 8 and 13, so somewhere off the tileset, make a 3x3 grid and then copy tile 13 to the top middle of the 9 squares, then tile 8 to the left, tile 6 to the right and tile 1 to the bottom. Now the 4 corners of this 9-square grid will be your 4 corner tiles. Copy tile 7 onto these corners, then sprite these corners so they match up to the 2 edges they will be touching. Then cut away the 3/4 of the tiles you didn’t sprite over. Try to keep the corners equal or less than 1/4 of a tile size, because remember, these corners will need to be able to be placed onto the same grid reference if needs be, so you don’t want some of the under-layer corners to be noticeably overlapped. Now copy these corners back into tiles 4, 5, 10 and 11, like the tileset image above. Corners done.
10. Edges, if you want any. (Particularly useful for long grass, etc). Tiles 16, 17, 22 and 23 are the edges. Now what you want to do is copy the square (tiles 0, 1, 2, 6, 7, 8, 12, 13 and 14) onto a space off the tileset, and now sprite the edges onto the outside of the 4 square side tiles (1, 6, 8, 13). Then see that these loop nicely horizontally and vertically respectively. Then copy and paste the edges into their respective tileset places. Done. (Of course, perhaps you only want to have a top edge, and no bottom or side edges, etc., or no edges at all. Keep this in mind.)
Now here is the order in which to draw the tiles correctly in the game world:
1. Everything except corners and edges. It doesn’t matter which order within this list because these tiles won’t overlap.
2. Corners. Again, it doesn’t matter which corners are drawn first, because they shouldn’t be overlapping eachother.
2.5. Please note that the character, and most objects and NPCs / enemies are usually drawn here.
-3a. Left and right edges.
-3b. Bottom edge.
-3c. Top edge.
It’s hard to say when additional tiles (if any) are to be drawn because it depends what it is. For example you may want cobwebs to be drawn after 2. but before 3., so that it can be used on a solid block (the front of a wall), but also be behind any edges if it was on an air block next to a solid block (i.e. the corner of a room, the side of a wall, etc.). If it was something like a pole, you may want it to be drawn before 1. so that it is behind solid blocks, or even drawn after 3. if it’s meant to connect to the front of a wall. As you can see, you’ll have to use your own common sense and judgement to know when to draw additional tiles to the game world!
Remember, from first drawn to last drawn is the bottom / furthest layer (from the camera) to the top / closest layer (to the camera).
Note that the tileset used as an example at the head of this tutorial can be used commercially without credit given.