A study on tilemapping
Updated a year ago
Creating robust and flexible tilesets
By tilesets we'll understand a texture regularly subdivided into tiles, which can be combined to form a larger shape, called a tilemap. While you can put separate sprites inside a tileset (with transparent edges), this is trivial and will not be discussed here. We'll work towards terrain and buildings, with connections between tiles.
We'll talk about tile "colors", which is understood as a tile type. Think of it as a tile that's filled with a single color. In practice, your tiles will have designs in them, but this terminology stems from previous work.
There are many ways to design tilemaps, which are good for different type of scenarios. We're intereseted on tilesets with the following properties:
  • Square, power of two size (in pixels AND tiles): Allows you to use mipmaps and has better performance.
  • Seamless edges: Allows you to use bilinear/trilinear filtering with smooth tile transitions, gets rids of seams at tile edges which show up even with point sampling. The resulting map should look solid.
  • Completeness: Allows to put any tile color in the set next to any other tile color and the transition should still work.
  • Directional: Allows for drawing consistent shadows and vertical objects, while being able to connect them to other tiles. This means tiles cannot be rotated.
We're interested in the following types of connectivity:
  • Square: Each tile has 4 neighbors: up, right, down and left
  • Isometric: Each tile has 4 neighbors: up-right, down-right, down-left, up-left
  • Hexagonal: (2 color layout) Each tile has 6 neighbors: up-right, right, down-right, down-left, left, up-left (in vertical alignment, rotation of the tileset achieves horizontal alignment)
We want to be able to add elevated tiles, which we can go behind. This conflicts with some of the points above, so expect some trickery on this regard.
I'll update this page linking to new articles as research is completed.
Jorge Fuente-Alba