How to create a Pixel Art Tileset - Complete Guide

Creating a tileset is easier than you think. With just a few rules and strategies you can design and build your tileset in no time, guaranteed.

Learning how to create a tileset is a very important skill. Nearly all platformers and top-down 2D games are built using a tileset.

One of the most common styles of tileset is pixel art.

A pixel art tileset is usually made of 8x8 or 16x16 tiles that are mixed and matched together to build multiple levels and environments.

In this post, you are going to learn all the rules, limitations, patterns, and strategies to design and create your tileset.

We are going to explore all the different variations of tiles, why and when they are needed, and what are the rules that define a beautiful tileset 👇

What a tileset is and how it works

A tileset is a collection of shapes, all of the same size, which are composed to construct a bigger pattern.

A tile can have different shapes, the most common are squares, rectangles, triangles, and hexagons.

In this post we are going to focus on square tiles.

In its most simple form, a tileset can be made of a single mono-colored tile. This tile can then be composed with itself to form a bigger shape:

Tileset with only 1 red tile. This single tile can be composed with itself to form bigger shapes. In this example, we placed 3 tiles one after the other to form a rectangle

A tileset for a videogame is more complex than that of course. For example, we can add a border to the tile to make it more interesting:

The same red tile as before with a blue border

Even a simple border makes composing tiles more complex: a single tile is not enough anymore to build a cohesive pattern.

You can notice how the middle tile in the rectangle has a double border on its left and right sides. What we want instead is to give the rectangle a single 1-pixel border. We need to introduce 3 more tiles for that:

Add 3 new tiles and compose them to form a rectangle with a 1-pixel border

From this simple example we can understand the first rule when creating a tileset:

Building a tileset requires fitting each tile with each other to form a cohesive pattern.

It is not possible to design a tile in isolation since each tile design must blend with all adjacent tiles.

This is also the reason why even a basic tileset requires way more than 4 tiles.

In fact, with only our 4 tiles we are limited to building only horizontal 1-tile rectangles. We need some new tiles for vertical rectangles:

Adding 3 more tiles to form also vertical shapes

We are now going to explore how many tiles are necessary to build a complete tileset, and which new combination each new tile unlocks 👇

Building a tileset

We are going to build a tileset step-by-step. You can see the final tileset below:

Complete pixel art tileset containing 48 tiles, used to compose all kinds of shapes for any pixel art game

The starting point for a tileset is usually the "center tile":

Center tile in the tileset

This tile forms the base on which all other tiles will be built. Designing this tile is not as simple as it looks. We need to make sure that the tile fits with itself in all 8 directions:

The center tile must form a cohesive pattern when composed in all 8 directions

Notice how the bottom pixels connect with the top, and the same for the left and right, forming a bigger pattern when multiple tiles are composed together.

The goal is to break away from the grid, giving the impression that we are looking at a cohesive pattern, without noticing each tile

Adding borders to tiles

The tileset becomes more complex when we introduce border decorations.

In our tileset example, we want to give the impression of snow around the border of each tile.

The next tile we design shows the snow on top of the tile:

Second tile in the tileset, with the top border made of snow

This tile is designed starting from the center tile and adding the snow on top of it. Also in this case we need to make sure that the tile fits itself horizontally:

The top border of the tile must fit when placing multiple tiles in a sequence

The same process must be done for each side:

The initial basic tiles all have one border that needs to fit in a sequence

Our set is now composed of 5 tiles:

Initial basic tileset made of the center tile and all 1-sided borders

Adding corner tiles

This 5-tile tileset allows to built only horizontal and vertical platforms without edges:

With 5 tiles we can build only horizontal and vertical walls

We introduce 4 new tiles to add corners to the tileset:

4 new tiles to add corners to the tileset

For every new tile that you design you must make sure that it fits with all other tiles. This is a general rule valid for every tile we are going to add, remember this ☝️

These new tiles unlock building complete platforms:

Build complete platforms using 1-bordered tiles and corner tiles

We now have 9 tiles available:

The new tileset is composed of 9 tiles, with borders and corners

Single-tile horizontal and vertical platforms

With 9 tiles we can only build 2 tiles wide platforms.

For 1-tile platforms, we need a tile with edges on both sides, as well as a corner tile with 3 borders.

Let's add them to the tileset, one for each direction:

We need 6 new tiles: 3 for horizontal platforms and another 3 for vertical platforms

These 6 new tiles complete the basic tiles for a minimal tileset. We can build a template that contains all the 16 tiles we created so far:

These 16 tiles for a basic tileset capable of building a platformer game

At this step we also added a tile with snow on all 4 borders:

Tile with all 4 borders. This tile stands alone and it can only be used for 1 tile platforms

With these 16 tiles we can build platforms of any thickness:

Create a unique level with any kind of horizontal and vertical platform

Adding internal corners

What we are missing now is a way to mix and match 2-sided tiles with 1-sided tiles. Currently we are restricted to build only rectangular shapes.

More complex shapes require some extra tiles:

Some new tiles are required to fill areas where two borders come in contact

As you can see above, we are missing a proper tile for the internal corner. If we try the center tile we notice how the top-left corner looks wrong because the snow is missing.

4 new tiles are required to solve this problem:

4 new internal corner tiles which are used to fill the intersections between borders

Now we can properly fill the missing gap in the tileset:

Notice how the left platform looks better with the internal corner compared to the right platform with only the center tile

Now that we know about internal corners we can see how even more tiles may be needed. These tiles are all the variations of 2, 3, and 4 internal corner tiles:

In this example a 1-corner tile is not enough, we need internal borders in 2 corners

We therefore add all these variations. In the end, we created 12 new tiles:

All variations of internal corner tiles: four 1-corner tiles, four 2-corner tiles, three 3-corner tiles, and one 4-corner tile

With all these variations of internal corners, we are now able to construct some interesting shapes:

We are no more limited to rectangular shapes, we can now build more complex platforms

Mixing internal corners and borders

We are still limited in some situations:

A 1-pixel wide vertical platform cannot be mixed with a protruding tile, we are missing something

The situation is similar to before: we can only build 2-tile wide platforms before finding a new limitation.

We need some new tiles to handle both corners and borders in the same tile:

All variations of borders + corners tiles

We added 17 new tiles, which are all combinations of internal corners and borders on all sides.

We made another step forward:

We now have a tile to fill the missing space with 2 internal corners and 1 border

Last step: internal corners on opposite sides

The very last tiles that we need are designed to fill a very specific situation:

We need a tile with 2 internal corners on opposite sides

We are missing the last 2 tiles with internal corners:

Two new tiles with internal corners on opposite sides

These 2 new additions solve the last of our problems:

Fill the space with the last 2 tiles with corners on opposite sides

Complete 48 tiles tileset

This is it! We made a complete tileset covering all the possible combinations of corners and borders.

The final tileset counts 47 tiles + 1 empty tile:

Complete pixel art tileset containing 47 tiles, used to compose all kinds of shapes for any pixel art game

A complete game tileset requires to have all these 48 tiles to cover all the possible situations where different tiles mix and intersect with each other.

We can now build all the levels with our game with this set, great!

An example of a complete level for your platformer game which combines all the tiles we designed in our tileset

Limitations and next steps

Our new 48-tile tileset is capable of building levels of any complexity.

Nonetheless, there are still some limitations to this approach:

• 48 tiles are a lot of tiles, especially when our game features multiple environments (snow, grass, rock, dirty, bricks)
• This tileset has only 1 variation for each tile. If for example we place a long line of horizontal tiles they will start to look repetitive. It is often required to design 2 to 5 variations for the most used tiles (adding even more work on top of our initial 48 tiles)

This platform only contains 2 tiles repeated in sequence. This repetition risks becoming boring and noticeable

If we take a closer look at the tileset, we notice how many sub-tiles are repeated in most of the tiles:

Notice how these tiles are made from the same sub-tiles. This works the same for all corners and borders: it is possible to build all 47 tiles in the tileset from a smaller subset of tiles. This strategy can speed up and improve the creation of new tilesets!

There is a concrete strategy to reduce the number of tiles to design (from 48 to only 13!) that will also solve the problem with multiple variations 🎉

We are going to explore this strategy in the next follow-up article: Pixel Art Game Tileset made easier

You can subscribe to the newsletter here below for more updates on game development and pixel art 👇

Resources

• Tileset Roundup
• Celeste Tilesets, Step-by-Step
• Classification of Tilesets
• The Aseprite 1.3 Update is a Literal Game Changer
• My Tileset Workflow (Pixel Art & Gamedev Tutorial)
• Pixel Art Class - Tile Set Art