Tile Maps

Overview

Tile mapping—creating images by arranging small graphic tiles—is a widely used technique with a range of technical and artistic benefits.

Tools

pencil + paper

Tile Sets and Maps

From masonry and tile to fabrics to movable type: artists and designers have been arranging modular motifs on grids for centuries. This approach affords a variety of aesthetic and practical benefits. It leads to designs with natural visual rhythm and concord while allowing for variety and complexity. It combines the benefits of mass production and manual customization. It also allows the creative work to be split up: a single designer creates the system and local craftsmen apply it.

In digital media, tile maps and sets are used frequently and commonly associated with the 8-bit and 16-bit video game era. Hardware limitations imposed strict limits on designers. Designers pushed these limits to creative extreems, creating enduring visual styles. Today’s games do not face the same hardware restrictions, but modular graphic systems are still an important tool for artists. Support for tile maps is built into many contemporary game engines, including Unity and GameMaker Studio.

Bauhaus Lettering Set, 1926-31
Josef Albers
Bauhaus Lettering Set, 1926-31
Josef Albers was a highly influential artist, designer, and educator. First a student and then faculty at the Bauhaus, his color theory work is a primary influence of design pedagogy.
Design for Wall Hanging, 1927
Anni Albers
Design for Wall Hanging, 1927
Anni Albers was a prominent and influential textile artist and educator. These rectilinear abstract designs based on color relationships reflect the principles of Albers’s studies at the Bauhaus.
Kolam, 2019
Aarati Akkapeddi
Kolam, 2019
Aarati Akkapeddi combines South Indian "Dot" Kolam patterns with facial recognition data.
Shrine of Shah Nematollah Vali, 1436
Mahan, Iran
Shrine of Shah Nematollah Vali, 1436
Islamic design builds on a rich variety of grid systems and tessellation patterns.

Photo by anaareh saaveh (mahan11) CC BY 2.0, via Wikimedia Commons
Batman (NES), 1989
Sunsoft
Batman (NES), 1989
Batman exhibits some of the best visuals found on the NES. Every tile is limited to just 4 colors, and only 4 of these palettes can be used together.
Advanced Wars, 2001
Nintendo
Advanced Wars, 2001
This GBA and DS series features tactical battle on an overtly grid-based map. More than an aesthetic choice, the grid is key to the rules of the game.
Shovel Knight, 2014
Yacht Club Games
Shovel Knight, 2014
Shovel Knight is an excellent retro platformer with an art style that embraces the 8-bit era.

Designing Tile Sets

The most basic tile set is a single image. Repeating this image, side by side by side, creates a pattern. With a little care, the image can be designed to match up edge-to-edge so the seams are hidden.

You can build on this simple premise in many ways: alternate tiles, rotatable tiles, complex collections of tiles that work together. You can work with different grids as well: squares are commonly used, but many other shapes can tessellate.

Repeating Tiles

The basic repeating tile: top matches bottom, left matches right. Below, simple repeating tiles are used to create striped, houndstooth, and herringbone patterns.

patterns

Repeating Tiles with Alternates

Top matches bottom, left matches right. Alternate tiles used to break up the repetion and add visual interest.

patterns

Rotatable Tiles

Top matches bottom, left, and right. Rotated tiles still match up nicely. These are sometimes called Truchet tiles.

truchet

Edge-matched Tile Sets

A set of tiles where the sides of each tile match up to the opposing side of another tile in the set. Edge-matched tiles are great for forming lines.

set

One way to create a tile set is to consider each edge to be one of two states: occupied or empty. Since there are 4 sides, and each has two states, there will be 4^2, or 16, tiles in the set.

edge_full_shadow

Depending on the design, some of these tiles may be rotations of other tiles.

edge_full

In those cases a smaller set can be used.

edge_5

The tiles can be arranged to create patterns and form.

edge_form

Using different tile sets with the same tile map can create a variety of looks.

multi_comp_form

The examples above were generated with this tile mapping tool from cr31.

Corner-matched Tile Sets

You can also create a set by considering the corners to be empty or occupied. Corner-matched tiles are great for forming shapes.

corner_16

corner_form

Tile Set Discussion

Discuss the aesthetic and practical features of tile sets and maps.

Tile Set Workshop

Create an edge-matched tile kit with markers on paper squares.

First, design a tile set. Create a design that allows rotation—this is faster than creating a full set. The image below shows which tiles you need to make. edge_counts

Once you have designed your kit start copying. You can create additional copies by hand or mechanically.

Once you have made your kit, use it to create a variety of forms. Try building out each letter in the alphabet. After playing with your set, start experimenting however you wish.

Procedural Tile Mapping

Early computer games were often severely constrained by available storage, memory, and processing power. Super Mario Bros for the NES had only 40 kilobytes of storage for everything: the game code, character and world art, and music.

This single screenshot of Mario dying in world 1_1 is 8 kilobytes alone. Super Mario Bros 1-1

This is possible because SMB builds the world from a small set of reusable tiles that can be re-colored and re-used in multiple ways. For example, the bush and the cloud in the screenshot above use the same tiles with different palettes. Below is a dump of the tiles and palettes used in SMB.

SMB Tiles

1-bit per Tile

Maps for edge-matched tile sets can be represented very efficiently using a single bit for each tile. Comparing the state of adjacent tiles determines which tile should be drawn in each grid position.

Bit Map1-Bit Map

Road Derived Roadway Drawing

The roadway image above was produced by following these rules:

  1. If the tile is unset, draw nothing.
  2. If the tile is set, check the surrounding tiles:
    • If the tile above is also set, add 1 point.
    • If the tile to the right is also set, add 2 points.
    • If the tile below is also set, add 4 points.
    • If the tile to the left is also set, add 8 points.
  3. Draw the tile that matches the accumulated points.

tile_bitmask

This point scheme generates a unique value for every combination of neighboring tile states.

Roadway

This example demonstrates the above approach. You can click grid squares to toggle them on and off.

Keep Sketching!

Experiment with creating images using tile mapping. Explore each of the tactics discussed above.

Sketch

Daily exercise:

  1. Create a new tile set.
  2. Use the tile set to create a design.

Explore a different idea everyday. If you need some ideas, consider using one of the following prompts.

paper pixels vectors typography self-portrait 3d hexagons triangles photocopier big huge edge corner pattern trade teamwork stamps scissors make-things-that-make-things

Challenge: Alphabet

Design a full alphabet using a single tile set. Create a compostion that shows your alphabet in use.

Pair Challenge: Tile Swap

Partner with another person. Create a tile set and trade it with your partner. Use the tileset you receive to create a composition.

Explore