Pixel Art Game Tileset made easier

In the previous article, we learned how to create a complete pixel art tileset, containing 48 tiles for all possible situations.

At the end of the article I highlighted some limitations of our strategy.

Indeed, there is a better and faster way to create a tileset, with the following benefits:

• The full set is made of 13 tiles instead of 48
• Each tile resolution is smaller, making it faster to design and create
• This new strategy has the potential to generate many more combinations of tiles, making each level unique without repetition
• With smaller tiles it is possible to spend more time designing unique variations outside of the basic 13 tiles of the tileset

In this article, we are going to learn how this becomes possible, how it works, and how to design a complete tileset using this new approach.

What is the problem with 48 tiles?

In the previous article, we created step by step a complete 48 tiles tileset:

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

48 tiles are a lot of tiles for a single tileset. Furthermore, there is no variation in each tile. Adding more variations requires creating even more tiles.

Even more tiles are needed if our game features multiple environments: snow, grass, rock, dirt, clouds, bricks.

This amount of work is too much for an indie developer, who is responsible for all aspects of the game.

How to reduce the number of tiles

There is a solution to the problem of too many tiles. If you take a closer look at the tileset, you will notice that many sub-tiles are repeated in multiple tiles:

Notice how these tiles are made from the same sub-tiles. This works the same for all corners and borders: it is therefore 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!

This repetition happens for every corner and border. Some tiles can be entirely created by copying and pasting sub-sections of other tiles (corners and borders).

This intuition is the origin of a new method to design a tileset: create only the necessary sub-tiles and compose bigger tiles from unique building blocks.

This is the core of our new strategy, let's see how this works 👇

Smaller tiles

In the original 48 tiles tileset above each tile is 16x16 pixels.

Each 16x16 tile can be divided into four 8x8 tiles. These 8x8 tiles form the base for our new tileset creation strategy:

The new building block is an 8x8 tile, which will be then composed to create multiple variations of 16x16 tiles for a complete tileset

Note: You are not required to use an 8x8 resolution. Any resolutions works, what matters is the details of each tile, as we are going to learn below 👇

Make each tile unique

The goal of this new design technique is to avoid repeating the same details in multiple tiles. Instead, each tile will be unique.

Let's see an example from the previous tileset:

Split 2 tiles into their unique sub-components and use them to create other similar tiles, all from the same smaller building blocks

When we split the first block ("center block") into 4 sub-tiles we get 4 unique variations of center tiles. The sub-tiles of the second block instead contain all 4 corners.

Using these 8 sub-tiles we can build all blocks with corners (14 tiles):

From 8 smaller building blocks, we can create 14 unique bigger tiles

Important: Make sure that each smaller block can be combined to form a cohesive pattern. This is the most important requirement to use this technique effectively ☝️

How to create a tileset: Example

We are now going to use this new strategy to create a tileset from scratch.

We start directly from a tilemap of 8x8 pixels squares. Each tile must be unique. Therefore, we need to understand which are the basic building blocks for this new tileset system (Spoiler: 13 tiles in total, instead of 48).

Tileset template

Similar to what we did in the previous article, we need to list all the tiles that are necessary to build any platform variation.

The first tile is again the "center tile". Later in this post we are going to design more variations of this tile, but for now, a simple mono-colored tile is enough:

That's right, a simple 8x8 pixels tile with one color is enough as a starting point

The second set of required tiles is the borders. We need 4 new tiles in total for each side:

4 new tiles, one for each border

Important: The only objective of these tiles is to represent 1 border. This is the only detail they should have. This principle is the core of this strategy, and it applies the same for all other tiles ☝️

Next, we need the tiles for the edges. These are 4 new tiles for each edge:

4 new tiles, one for each edge

Finally, the corners, another 4 new tiles for each internal corner:

4 new tiles, one for each internal corner

That's it! As promised, this brings the total number of required tiles to 13:

• 4 tiles for the borders
• 4 tiles for the edges
• 4 tiles for internal corners
• 1 "center tile"

Here below you can see the full tileset:

13 tiles are all we need to build any platform variations, a lot less than the original 48 tiles!

Adding more variations

The main problem with having only 13 tiles is that they all look the same, there is no variation.

If we use only these 13 tiles the levels will start to look boring and repetitive.

Fortunately, creating more variations of the same tile is quick and easy (thanks also to the small 8x8 resolution).

In this example, I added 3 more variations for each border tile and 10 more variations for the center tile:

Add more variations to each tile to make the full design look more interesting and less repetitive

Note: Most of these tiles are simple "blobs" that placed together give the idea of a cohesive platform for a game. 8x8 is such a small resolutions that it is impossible to add any more details.

Creating platforms for a game

This is all we need to design any platform for all the levels in our game.

These 13 tiles are the smallest building blocks. By composing them we can recreate the original 48 tiles set.

Furthermore, since we added more variations to each smaller tile, we can go even beyond the original 48 tiles, since we now have different sub-tiles for border, corner, and center tiles:

Example of a complete level built using the 13 tiles in our new tileset. Notice how we can construct all the original 48 tiles block with even more variability and details

What's next

It is as simple as that! We can now create many tilesets for different levels and environments in our game in a fraction of the original time required for all 48 tiles.

The next step to make your level even more interesting is to add more details: foreground elements, background, parallax effect, particles, animations, and more.

The goal is to break away from the grid, giving the impression that the level is one cohesive composition instead of a series of tiles

An example of a game that used this technique is Celeste:

The tiles in Celeste are all 8x8 pixels. Each tile has different variations and details. After adding foreground, objects, background, and animations the level breaks away from the grid and instead it gives the impression of a cohesive environment that tells a unique story (from aran.ink)

A tileset is the first step when creating the levels for your game. There are still many more details that we are going to explore in future articles.

Meanwhile, you can check out all the other Pixel Art articles. You can also subscribe to the newsletter below for more updates and tips directly in your inbox 👇

Thanks for reading