schneiderbox
Zoé: Seeing the State
January 25, 2023
Work continues on my Hive AI, now christened Zoé. I’ve got the first draft of the data structures used to store the state done. That’s an important first step. The next step is to code the transitions between those states, i.e. the actions that can be taken from a state, i.e. the moves a player can make. Depending on the game, that can be simple or somewhat involved.
Colloquially, all the things needed to encode the game rules–the state and transitions between states–can be called the game core. With simple games, you can sometimes get away with coding the entire core before worrying about how you might display it. Unfortunately, Hive is not a simple game, so I need to create a way to look at the engine’s state and actions.
Typically, my AIs have two ways of displaying state. They can print a basic version to the console, and they can integrate with a full web UI. The console output is useful because it’s a direct view of what the engine is seeing, and it can be accessed without going through the full UI layer (and whatever bugs it might have). The full UI is useful because it supports novel features like interactivity.
For Zoé, I briefly played around with the idea of not implementing console output. It seemed like it might be a pain. What would it even look like? Would it be anything close to readable and useable? But this Stack Overflow answer pointed out that you can draw hexes with slashes and hyphens, and following that I coded up something along those lines:
__ __
__/ Q\__/Bs\__
/ a\__/ S\__/ q\
\__/ \__/ \__/
I don’t think I’d enjoy playing a full game with this view, but it’s enough to see what’s going on. Note the empty space at the top of the board. The code (at present) draws hexes in sets of two: the hex on an even column, and the hex on the odd column to the east (either southeast or northeast, depending on which line of the hex is being printed). Because of that, every hex in an odd column needs to have a hex (in grid terms–it can be empty space) to the northwest of it. So in the above example, there’s a necessary row of empty hexes along the top. It’s a little kludgy, but it functions as needed and there are higher-priority things to work on.
After working on that, I was eager to get started on the full UI. After spending a bit of time considering whether I should try a hex grid in HTML, I decided to use the Canvas API. I have a good amount of experience with it, but I also discovered my last project with it was six (!) years ago. (Why did I stop writing games? Have I become boring?) Using it was like seeing an old friend again.
The image at the top is what I have so far. It’s not interactive yet; it just takes a state string and renders it. The way pieces can stack presents an interesting challenge for a 2D visualization. After some experimentation, I found shrinking and slightly rotating a stacked piece works as a decent solution. We’ll see how it feels to play.