The Tileset Template Index
An indexed overview of Tilesets that explains what they are, how they're made, and the techniques to recreate them.
Related Links
General Concepts
What is a Tileset?
A reusable set of images arranged in rectangular grids, often used to create backgrounds, decorations, and level layouts.
Using tilesets saves a lot of time, but there’s one problem…Every individual tile must be placed manually.
The solution? The Auto-Tiler!
What is an Auto-Tiler?
"AutoTilesets" or "AutoTiles" is a technique that allows the game engine to automatically determine which tile is used based on the surrounding tiles.
This saves developers an enormous amount of time by reducing the amount of redundant work.
There are 2 popular methods for creating an Autotiler: the 16- and 47-block methods.
The 47 and 16 block Auto-tiler method
16 Block
>Requires the least amount of drawing.
>Tileable ONLY using a 3x3 block, and not individual 1x1 tiles.
47 Block
>Requires the most amount of drawing with a lot of redundancy.
>Best used for ground textures in top-down games
Blocks and squares are great and all... but we are missing a type of tile that exists in almost every game, slopes!
Tileable Slopes
Here’s how Slopes look from different perspectives.
Platformers vs Top-Down
Slopes aren’t auto tilable in most game engines.
Ensure they are compatible with the existing tileset.
Tilesets are accompanied by backgrounds to help immerse your players into your world.
Background and Foreground
Backgrounds exist to enhance the visual depth of a scene.
Here are a few basic rules to follow:
An object becomes dimmer, greyer, and blurrier the farther away it is
Backgrounds should be dimmer than core gameplay elements
Match the theme of the Tileset
Do backgrounds stay static when the center of focus, or the camera, moves? Nope! That’s where Parallaxing comes in.
Parallax Movement
Parallaxing is a technique used to create the illusion of depth by shifting two or more objects at different speeds relative to the viewer’s perspective.
The farther away an object is the slower it moves relative to the viewer’s speed
The closer an object is to the viewer’s perspective, the closer it is to the viewer’s
References
Theme
Vanilla, Hack N Slash, RPG Magic, BulletHell
Textures
Vanilla, Grassy Dirt, Stone, Metallic
Autotiler
16 & 47 Block
Perspectives
Isometric Top-Down, Platformer, 2.5D
Backgrounds
Landscapes, Mountains, Clouds, Sky
Methods
Create your own tileset in a few simple steps.
How to read an auto-tiler with absolute ease.
How to code your own auto-tiler
How to create an auto-tiler in a procedurally generated world
Play
Parkour
HackNSlash
Bullet Hell
RPG Magic