Wraparound hexagon tile maps on a sphere

 from Red Blob Games
06 Oct 2016

Some games have tile maps that wrap around. Civilization for example lets you go off the left side of the map and you warp to the right side. You can’t go off the top or bottom of the map. In 3D space, this would be a cylinder. Some games also let you go off the top side and warp to the bottom, and vice versa. In 3D space, this would be a torus.

Most wraparound tile map games don’t use a sphere like an actual planet. What are its properties?

  1. You can walk west/east and wrap around the map. This is like the cylinder or torus.
  2. You can walk north/south but you do not wrap around to the other side. This is like cylinder but unlike torus.
  3. You can walk past the north/south poles and stay at that pole but are facing the south/north instead of north/south. This is unlike cylinder or torus.
  4. Walking west/east to wrap around the map takes less time (shorter distance) near the poles than near the equator. This is unlike cylinder or torus.

Wouldn’t that be cool? Why don’t tile map games use this?


Image from Wikipedia[1]

So it looks like it may not be practical to flatten a sphere onto a flat grid, but I wanted to explore it anyway. (Note: the /x/ in the url is where I put my quick, unpolished projects like this one.)

The first problem is: what coordinate system should I use to represent the player’s position and direction, in a way that makes walking around the pole shorter than walking around the equator? A common way of tesselating a sphere is to subdivide an icosahedron. (Note: if you want to use square tiles instead of hexagon tiles, unwrap a cube.) That icosahedron, when unfolded, can look like this:

The second problem is: what should I do with those leftover pentagons? They won’t work with a flat tile map. I’m going to try hiding the pentagons by just not letting you walk near them. This would only work in games where you’re walking/driving and not games where you can zoom out or freely control the camera.

The third problem is: what should happen when you pass a pole? I’m going to rotate the camera and make it only let you see the local area.

Idea 1: two-level coordinate system

Treat each region separately. Keep track of which region you are in, and then keep a local x,y coordinate inside of that triangle. When crossing a boundary into another region, calculate the new x,y.

Distances and vectors that cross a region boundary becomes hard. There are no distance or angle distortions for local calculations. Since region crossing is complicated, it’d be best to avoid combat or even land masses crossing regions.

Idea 2: convex coordinate limit

Use a single x,y coordinate for the entire world, but limit it to this shape. If you try to exceed the y bound, you stop at the edge. If you try to exceed the x bound, you wrap around. The triangles are distorted though, especially near the poles.

While global calculations may be a little better, distances and angles are distorted locally. I don’t think this will work well.

Idea 3: teleport regions

Use a single x,y coordinate for the entire world, but limit it to the blue area shape. If you try to exceed the y bound, you stop at the edge. If x goes off the left/right side of a triangle region into a red area, you are teleported into a nearby valid green area region. This doesn’t work near the triple points (where the pentagons are) but if you can’t get close to the pentagons anyway it shouldn’t be a problem. We need to translate both positions and directions to the new triangle.

Mouse over the red teleport areas

This is sort of a hybrid of idea 1 (separate regions, two-level coordinate) and 2 (all one region, single coordinate). In the ten tropic regions, it’s all connected; region crossing is easy and acts like a torus. In the ten temperate/polar regions, they’re separate; region crossing requires changing coordinates and directions. Like idea 1, there are no distance or angle distortions for local calculations. The advantage over idea 1 is that you can have larger continents that cross any boundary that includes one tropic region. The advantage over idea 2 is that there are no local distortions.

Flat rendering#

This is what I’ve been working towards: you can drive around (WASD or arrows) and you see a hexagonal grid everywhere, but the underlying behavior is approximately a sphere. You need to stay away from the pentagons; the danger zones are dark gray hexagons. This works on Chrome but not on all browsers. Sorry.

The idea is to adjust triangular regions near the poles to be adjacent to the ones the player is in. Then when the player moves away we’ll adjust them back, out of sight. The area near the player always looks flat as long as you don’t get near the pentagons.

I made the tiles fairly large for this demo but in a real game you could have a much larger map with millions of small hexes, and you’d never get too close to the pentagons. You can’t allow the player to zoom out to keep this working, unless you’re willing to switch to a 3D sphere view when zooming out.

Implementation: determine the region the player is in, then draw that region plus the three adjacent regions. For this demo however I implemented a slightly easier approach: determine the four-region “column” the player is in, and render those four plus the six neighboring regions. I haven’t yet worked out mathematically how far from the pentagons we need to stay but for the demo I just tweaked it until it’s good enough.

There are some bugs in my quick & dirty demo, and some features I wanted to add:

However I’m not actively pursuing this idea, so I’m not going to spend a lot more time on it right now.

Other projections#

Subdivided icosahedra are the usual shape because they are the most sphere-like, but we can use any of the Platonic solids, or truncated solids, to build a sphere-ish map[3]:

SolidNumber of sidesShape of sidesTiling
Icosahedron20trianglestriangle, hexagon
Dodecahedron12pentagons??
Octahedron8trianglestriangle, hexagon
Cube6squaressquare
Tetrahedron4trianglestriangle, square

The unfolded cube in particular would be the first thing I look at if I wanted square tiles:

The unfolded tetrahedron (1[4], 2[5]) is quite distorted relative to a sphere but in a game that may be ok. The main advantage is that we can use a rectangular coordinate system, if we glue the right half of triangle 3 onto the left half of triangle 0:

  1. Left/right wraparound is simple: set x = x % 2.
  2. Top/bottom wraparound is relatively simple too: set x = 2-x and leave y alone, and flip the player’s camera to point south instead of north or vice versa. Moving up from triangle 1 leads to triangle 3 and vice versa; moving down from triangle 0 leads to triangle 2 and vice versa.

[2021-Apr] I made an an animated rendering of the tetrahedron approach.

Like the tetrahedron approach, the Peirce quincuncial projection[6] and Guyou hemisphere-in-a-square projection[7] and Adams hemisphere-in-a-square projection[8] also have simple wraparound coordinate systems. See this visualization of Peirce[9] from @mbostock. Both are conformal[10] projections, which preserve angles and local scale.

Octahedra also look promising. See the diagram here[11]. I have not explored this.

If you’re looking for a way to wrap your head around these polyhedra, this page[12] links to some PDFs for tetrahedron, cube, octahedron, icosahedron, dodecahedron, and other maps.

References#

Working on this miniproject, I decided working with spheres was more effort than I wanted to put into a game, unless the sphere was an essential part of the game. What other ways are there to tile a sphere, and also make it easy to work with?

Followup: I experimented with square tiles on a sphere.

Email me , or tweet @redblobgames, or comment: