Tile Maps

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 extremes, 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.

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 on design pedagogy.

Bauhaus Lettering SetMoMA Josef AlbersMoMA

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.

The Josef & Anni Albers FounationArtist Site Anni AlbersMoMA

Aarati Akkapeddi

Kolam, 2019

Aarati Akkapeddi combines South Indian "Dot" Kolam patterns with facial recognition data.

KolamProject Page aarti.meArtist Site

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

Shah Nematollah Vali ShrineWikipedia

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.

Batman Tile MapsArchive Batman Pixel Art DiscussionForum

Nintendo

Advanced Wars, 2001

This GBA and DS series features tactical battles on an overtly grid-based map. More than an aesthetic choice, the grid is key to the rules of the game.

Advance WarsWikipedia

Yacht Club Games

Shovel Knight, 2014

Shovel Knight is an excellent retro platformer with an art style that embraces the 8-bit era.

Shovel KnightGame Page

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 repetition 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.

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.

How does this method impact design rhythm, complexity, concord, similarity, repetition?
How are tile maps different from and similar to patterns?
What kinds of forms does this method lead to naturally? How can these be embraced or avoided?
What are the essential elements of this method?
How does a tile kit like this compare to building kits like Lego blocks?
How does a tile kit compare to a font?
How could these tiles work in 3 dimensions?

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.

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.

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 Map 1-Bit Map

Road Derived Roadway Drawing

The roadway image above was produced by following these rules:

If the tile is unset, draw nothing.
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.
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:

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

Explore a different idea every day. 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 composition 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.