Unity: How to create 3D hexagon game board
Hexagon game boards have gained remarkable popularity in modern game development, capturing the imagination of both players and creators alike. Whether you’re aiming to design a strategy game, a captivating puzzle, or a visually striking board-based adventure, hexagon boards offer a dynamic and visually engaging canvas. Their intricate patterns and interconnected edges add a new layer of complexity and strategy to game-play. Moreover, their popularity isn’t confined to video games alone; hexagonal game boards have been a staple of traditional board games for decades, captivating players with their unique geometry and offering an engaging twist on conventional square or rectangular game boards.
This tutorial will provide you with all the needed information to craft your very own 3D hexagon board that seamlessly blends the elegance of classic board games with the innovation of modern game design.
Prerequisites
This tutorial was created in Unity 2022.3.6f1. All the assets are taken from Kenney.
As always, the source code is available at GitHub, please, find the link at the end of this tutorial.
I would like to mention this brilliant article from Red Blob Games that covers the mathematics behind hexagon boards. You don’t need to understand it all now, but I’m sure it will come in handy during the development times.
There are 3 parts in this tutorial: Understanding the problem, Scene setup and Coding.
Part 1. Understanding the problem
Hexagon game boards, despite their seemingly straightforward appearance, possess an underlying complexity that sets them apart from traditional square boards commonly found in classic board games. In the realm of hexagons, everything shifts — the orientation, arrangement, and even the ways of constructing the game board itself. In this section, we’ll delve into the intricacies of hexagon game boards, exploring the different layouts and orientations that give them their distinct character.
Unlike the conventional chess-like square boards, hexagon boards offer four distinct layout options:
1. “Odd-Row” horizontal layout
2. “Even-Row” horizontal layout
3. “Odd-Column” vertical layout
4. “Even-Column” vertical layout
Each layout brings its own unique arrangement and rotation of hexagons. In the horizontal layout, hexagons assume a pointy top orientation, while in the vertical layout, they exhibit a side top orientation. Depending on the nature of your game, your choice of layout becomes a critical decision that influences the visual aesthetics and gameplay dynamics. In this tutorial I’ll show you how to set all of them up.
An essential consideration when dealing with hexagon boards is establishing a coherent coordinate system to be able to craft the game level. This allows you to precisely determine the position of each hexagon. To simplify this process, see provided images below that illustrate a comprehensive coordinate system for both horizontal and vertical layouts.
Having a well-defined coordinate system is a key asset that will prove invaluable in the subsequent coding phases of this tutorial. The beauty of this coordinate system is that it works well in both 2D and 3D games.
With a solid grasp of hexagon board basics, let’s swiftly move forward and set up a scene in Unity, allowing us to visually explore the magic of hexagons in action.
Part 2. Scene setup
The scene setup is quite straight-forward. First of all, you should import a hexagon model you want to use for the board. In this tutorial I’ll be using one from Kenney’s hexagon kit. Next, create a new empty object, call it Board, then create a new C# script BoardCreator and attach it to the Board object.
Then add a hexagon model on the Board and create a prefab out of it. Lastly, adjust the Main Camera so that the board is visible in the game mode — most likely you will want to have a top-down view. You can delete Hex from the Board once the camera setup is complete.
Your scene should now look like this:
Before wrapping up this section let’s add the Hex prefab to the BoardCreator script as a GameObject public field:
With the scene ready we can now go ahead and start coding.
Part 3. Coding
Let’s open the BoardCreator script. For simplicity reasons I’ll use a hard-coded number of rows and columns, but you will most likely want to describe the level data in a separate file. We will start with a horizontal layout first.
If you run this code it will produce the 5x5 board of “Odd-Row” horizontal layout and changing Offset from -0.5f to 0.5f will result in a board of “Even-Row” horizontal layout.
Now let’s add a separate method for the vertical layout creation. The code will be very similar — but we will flip columns and rows as well as x and z.
With Offset value of -0.5f we will end up with “Even-Column” vertical layout while the value of 0.5f will result in “Odd-Column” vertical layout. It is important to note here that in order to achieve side top orientation of the Hex prefab its Y rotation must be changed to 30°.
You might have noticed that there is currently an unused hexes Dictionary. In your project you would be using the values of this Dictionary to access the hexes with the previously provided coordinate system. To illustrate how this can be achieved let’s make Main Camera look at the hex located at the position 5,5.
If you run this code now Main Camera should be looking at the top-right hex like this:
Afterwards
Hexagonal grids, once staples of classic board games, are making a triumphant return in modern game development. Embracing their resurgence, we’ve explored four distinct layouts — each with its own character. Your choice of layout will depend on your game’s unique vision, offering an exciting range of possibilities.
Beyond this tutorial’s confines, our hexagonal grid stands as a beacon of versatility. It serves as an adaptable canvas upon which to paint a myriad of game worlds. Strategy games, exploratory adventures, puzzles, simulations, and educational applications — this grid embraces them all.
In conclusion, remember that every creative odyssey begins with a single step. The code you’ve mastered today is more than mere syntax — it’s a blueprint for boundless creativity. With each hexagon you place, you breathe life into your game’s world. The possibilities are as infinite as the hexagons that grace your board.
The project source files can be found at this GitHub repository.
Support
If you like the content you read and want to support the author — thank you very much!
Here is my Ethereum wallet for tips:
0xB34C2BcE674104a7ca1ECEbF76d21fE1099132F0
