Hexagonoids

Use the arrow keys and space bar to play. WASD controls are also supported.

NOTE: The game does not yet work with mobile controls. If you're on a mobile device you can see the game running but there's currently no way to control the ship.

This is a clone of the classic Asteroids video game, built using Babylon.JS.

The key differece is that Hexagonoids takes place on the surface of a sphere. In the original Asteroids the ship would transport magically from one edge of the screen to the other, creating a wrap-around effect. Generally I tried to stay true to the physics of the original game. However, in Hexagonoids you wrap around a sphere instead. This creates more of an open world feeling, where you can explore and hunt down the rocks at your own pace.

Some other elements are different, namely there are no alien space ships. Also, there is no place to put your quarters. It was designed to closely resemble the original visual specs (see here). This post was a huge help in getting the shape for the rocks to look right.

Why hexagons?

Hexagons are the bestigons.

Also, hexagons can form an efficient tiling system for analyzing geospatial data. Under the hood, Hexagonoids is using the H3 geospatial indexing system. It partitions the world into hexagonal cells, which is useful in data sciene applications. It was invented at Uber to help them optimize their ride sharing newtork.

The hexagons that light up as the ship moves are all resolution 1 cells, drawn using the vertex data provided by the H3 library. The globe surface is a polyhedron created from the centers and vertexes of all of the resolution 0 cells.

How is H3 being used?

Primarily H3 is being used here for fun; because I like hexagons and wanted to practice making visualizations from H3 indexed data sources. For instance, above is an H3 visualization showing the areas of the globe that have recently been visited (by a rock, ship or bullet).

This project is mostly about visualizing the H3 hexagons in a 3D environment. In that vein, the cells are mostly decorative and are not relevant to the gameplay.

Fun fact: The ship is a little smaller than a resolution 2 hexagon, which makes it similar in size to Maine.

What about collisions?

It is possible to use H3 cells to create a collision system (early versions of this game worked this way) but it is generally much slower (100x) compared to standard collision detection methods like sphere intersections.

Hexagonoids uses an overlapping spheres algorithm to determine if two items are possibly touching. If the spheres overlap, we then check if the polygons intersect using the martinez-polygon-clipping library. This detects if the possibly touching polygons (i.e. the ship and the rock) actually intersect. By combining the two methods it is possible to calculate precise collisions, only when necessary.

About the Project

I made this for personal educational purposes. Big thanks to the free version of Chat GPT for helping me tame Bablyon.JS. Also big thanks to GitHub Co-Pilot and, of course, Google Search. It was great to work on a project with such a capable team.

This project is available on GitHub at heygrady/hexagonoids. It is open source and available under the MIT license.

I'm heygrady on GitHub and my website is heygrady.com