When generating procedural maps, we often start with a simple grid of values: 0 for water and 1 for land. But drawing these as blocks looks like an old Atari game. To make them look modern, we need autotiling—a technique to automatically select the right "edge" or "corner" sprite based on its neighbors.
The most common way to handle autotiling is bitmasking. For every cell in your grid, we look at its neighbors and calculate a unique number (a bitmask).
For a 4-neighbor system (North, East, South, West), we assign each direction a power of 2:
If a neighbor is "Land", we add its value. A cell surrounded by land on all sides gets 1 + 2 + 4 + 8 = 15. A cell with land only to its North and East gets 1 + 2 = 3.
Click cells to toggle between water and land. The numbers show the calculated 4-neighbor bitmask (0-15).
This simple 4-neighbor check gives us 16 combinations. If we include diagonals, we get 256 combinations (8-neighbor), which allows for much smoother transitions and inner/outer corners.
function getBitmask(x, y) {
let mask = 0;
if (isLand(x, y-1)) mask |= 1; // North
if (isLand(x+1, y)) mask |= 2; // East
if (isLand(x, y+1)) mask |= 4; // South
if (isLand(x-1, y)) mask |= 8; // West
return mask;
}While bitmasking focuses on the center of a tile, Wang Tiles focus on the edges. Each edge of a tile is assigned a "color" or ID. Two tiles can only be placed adjacent if their shared edges have the same color.
This technique is incredibly powerful for non-repeating textures. Instead of a single "grass" tile, you can have 10 different grass tiles that all share the same edge colors. The computer can then pick one randomly, creating a natural-looking surface without obvious repetition.
Each tile has 4 colored edges. Click a tile to cycle through the 16 possible combinations. The grid highlights mismatched edges in red.
A more elegant "Red Blob" style solution is the Dual Grid. Instead of placing tiles in the cells, we place them on the corners where four cells meet.
This is effectively the 2D version of Marching Squares. It simplifies the artist's job significantly: they only ever need to draw 16 tiles to handle all possible transitions between two terrain types.
The black dots are your data grid. The colored squares are the tiles. Notice how each tile's appearance depends only on the 4 dots at its corners.
| Feature | Bitmask (Blob) | Dual Grid (Corner) |
|---|---|---|
| Tiles Needed | 47 (for 8-neighbor) | 16 |
| Complexity | Moderate (neighbor logic) | Low (4 corners) |
| Visual Quality | High (handles diagonals) | Good (clean transitions) |