Skip to content

Tileset creation guide

kyleconroy edited this page Jul 21, 2012 · 14 revisions

Tilesets are images used to create backgrounds for levels in 2D video games. We use tilesets to design all the levels in Journey to the Center of Hawkthorne.

Anatomy of Tileset

Individual tiles are 24 x 24 pixels. They can overlap each other; however, they can't be offset. Tiles must be placed at intervals of 24 pixels. Tiles can be rotated by 90 degrees as well as flipped over both the X and Y axis. Take a look at the Town level to get an idea of how this plays out:

Town Level

The above image is not a tileset. A tileset consists of the unique tiles required to make a level. The Town tileset looks like this:

Town Tileset

Note how few tiles actually are used. By rotating and flipping tiles, we can create a large number of different looking levels from a small set of tiles.

Tools of the Trade

Please use one of the following tools. I've seen many people create tilesets only to find out later their tiles don't line up exactly on a 24 x 24 grid.

I use Tiled to lay out all of the levels (as well as create the levels themselves). Tiled requires an external editor such as Photoshop or MSPaint.

You may also find Pyxeledit useful, as it combines Tiled and Photoshop into one application.

Examples

Here are all the tilesets currents used in the game

Town Tileset Forest Tileset Tavern Tilset Blacksmith Tileset Blacksmith Tileset Blacksmith Tileset