Tile mapping—creating images by arranging small graphic tiles—is a widely used technique with a range of technical and artistic benefits.
p5.js + p5.dom
Tile Maps + Sets
Artists and designers have worked with modular motifs arranged on grids throughout history. This approach affords a variety of aesthetic and practical benefits. Repetition on a grid leads to patterns with natural visual rhythm and concord while allowing for variety and complexity. Practically, this method allows templates and molds to facilitate mass production of the individual units, which can be arranged contextually on-site. This approach also allows the creative work to be split up: a single designer creates the system, and local craftsmen apply it.
You will find examples of this approach in media including masonry and tile, textiles, fonts. In digital media, tile maps and sets are commonly associated with the 8-bit and 16-bit video game era. Hardware limitation imposed strict limits on designers who took advantage of hardware tile support to push the media forward. 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.
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 creating a pattern where 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.
The basic repeating tile: top matches bottom, left matches right. Below, simple repeating tiles are used to create striped, houndstooth, and herringbone patterns.
Repeating Tiles with Alternates
Top matches bottom, left matches right. Alternate tiles used to break up pattern.
Top matches bottom, left, and right. Rotated tiles still match up nicely. These are sometimes called Truchet tiles.
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.
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 = 16 tiles in the set.
Depending on the design, some of these tiles may be rotations of other tiles.
In those cases, a smaller set will still work.
With a set of tiles, you can start creating forms.
A wide variety of looks can be created.
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.
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, create a tile set. Create a design that allows rotation—this is faster to draw out than a full set. The image below shows which tiles you need to make, and how many to make of each.
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.
Before the end of the class take a picture of your work and post it the class sketch blog.
At the end of class, trade your tiles with another student in the class. This week use your partner’s tiles to create a sketch, and post it to the sketch blog.
- In-class: Sketch Blog post using your own tile set.
- Homework: Sketch Blog post using your partner’s tile set.
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
We can pack a map for edge-matched tile sets very efficiently using a single bit for each tile. By comparing the state of adjacent tiles, we can determine which tile should be drawn in each grid position.
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.
This point scheme generates a unique value for every combination of neighboring tile states.
The following example uses this approach to draw a road using a edge-mapped tile set with a 1-bit map. You can click grid squares to toggle them on and off.
This is the first assignment and the beginning of your daily posts.
- Create a new tile set.
- Use the tile set to create a design.
- Screengrab or photograph your work and post to the class sketch blog.
Explore a different idea every day. If you need some ideas, consider using one of the following prompts. If you use one of these prompts, include it in your blog post.
Design a full alphabet using a single tile set. Post an image that shows your alphabet in use.
- cr31: Wang Tile Maze Design
- An absolutely excellent resource with lots of information on tile sets, tile maps, and wang titles.
- Jamis BuckMaze Generation
- Many—many—maze generator algorithms complete with step-by-step visualizations from the author of Mazes for Programmers.
- Redblob Games: Tile Map Links
- Amit Patel at Red Blob writes great essays on game-programming concepts. Here are his links to tile-map related articles.
- Breaking the NES for Shovel Knight
- Shovel Knight is an amazing retro platformer from Yacht Club Games. Developer David D’Angelo discusses how the Nintendo’s specific technical limitations and abilities influenced Shovel Knight’s design.
- The 8-bit Guy: How “oldschool” graphics worked
- Overview of the hardware limitations and creative solutions in early pixel graphics.