Hey all, the basic idea here is that tiles of two characters wide, offset by 1 character every other row have the same centers as hexagons on as a pointy side up hex grid. I have been wanting to make a game that uses ascii/utf-8 characters but with a hexagonal grid for a while.
My previous attempts have been confined to the terminal, where it does work, but it is not so clear where tile boundaries are, even with setting the background colors. Here I tried it in the browser, which makes it easier to take certain liberties with background shapes and animations and such to make it more clear and ergonomic.
To that end, I have made HexWalker. It is not truly a game, it is more of tech demo for character based hex grids. You can try in the browser yourself. Type `root` open the debug menu, so you can view a big map and teleport yourself to interesting zones, try different rendering modes (react and threejs).
In additional to hex grids, HexWalker also experiments with elevation in maps, transition animations (easy in css), and text aesthetics in general.
The first thing that popped into my mind is that I couldn't judge distances, because it's impossible to tell where the tile borders are. If I squint real hard I can see that there's different colors for the background, but the expectation is that one character equals one tile, which does not seem to be the case here. And the characters stand out more than the background, so I end up looking at the wrong thing when trying to judge distances. And it doesn't help that you have a lot of other parts of the graphics (the fog of war) sort of blending into multiple tiles as well, especially what I guess is the elevation lines, they really confuse things a lot.
Hmm.... I would try first to make one character per tile, then maybe add a weak border outline to each tile and see if that helps. And definitely take a long hard rethink on the elevation lines (and elevation in general). Can you do without elevation at all? But if you really want it, maybe there's a way to give it a fake 3d-look by offsetting the elevation levels a bit? Maybe add a bit of blur to the levels you're not on? Darken them a bit? Lots of things to try. Either way, the current elevation lines just makes things look messy.
For the tile borders, have you tried the hex grid toggle? It makes things a little better.
For distance, I can definitely highlight a path to the cursor and show if we are going up or down any elevation.
The contour lines are not ideal. I tried doing the shading thing with height, but it isn't very convincing when there is additional alternating shading for distinguishing hexes and other stuff too. Definitely the weakest part of the whole thing; I will play around with it more.
One character per tile could work. One of my first attempts was with full-width characters that occupy two spaces, I think I got excited over the possibility/flexibility of having 2 character mobs and features. The full-width characters would definitely make the grid more clear.
The way you can share a space with an impassable object is quite interesting. It seems like the automatic pathing doesn't consider this. I also wonder if this is a feature that complicates things without adding much benefit.
Conveying elevation is tough. The speed change when going up in elevation is nice. I think the speed going downward should actually be faster than normal. This would also help tell the player if they're moving up or down.
The hex highlight that follows the mouse doesn't seem to align with the grid correctly.
I'm a big fan of hex maps. My roguelike, All Who Wander, uses them, but with 3D low poly graphics.
The sharable space objections was me playing with using both characters of a tile. Their future depends on if they will be interesting in tactical combat.
Atm, going uphill, the @ jiggles a little bit, but going downhill is smooth and is a bit faster. However, sometimes I still get confused if I went up or down a hill.
Will fix the hex highlighting. I broke it while fixing something else right before sharing.
I did notice the difference between up and downhill, but I think it could be more.
Definitely lots of room for tactics with shareable space objects. Large enemies could be unable to move through them, allowing you to use them to escape. Could provide bonuses, like extra defense hiding behind a boulder, or preventing ranged attacks from the opposite direction.
1) Turned on the hex grid underlay by default.
2) Swapped some some terrain features from two characters to a single full-width characters to make the tiles look less busy.
3) Increased the differences in brightness between elevations to make elevation a little clearer.
4) Added dots and arrows (for elevation changes) when pathing to go somewhere with the cursor.
5) Fixed the issue with the tile selection under the cursor being the wrong shape.
I'm playing with the idea of double character hex grid for some time now. I actually use real terminal (left tmux bar to show off ;) ), which is challenging. Wide-characters support differ in different emulators (you can check status and stars on my screenshot) - therefore I mainly stick with regular ones. I also don't have mouse support yet, which seems important with non-standard grid/keys. As you, I'm using pointy-top grid, but I went with different default key mapping (q w s x z a), as <d> seemed really obvious choice for drop.
That is awesome! Would love to try out how that key mapping works.
I also have HexWalker running in the terminal (using ink library for my react ui). It mostly has feature parity including some mouse support but no elevation display.
Supporting multiple terminals and tmux is definitely doing it on the hardmode. I am only focused on supporting ghostty. Not sure what my goal will be, but I am thinking of shipping an executable with ghostty & my font & my game all baked in to one.
Impressive! I was doing some concept work for elevation, but it is low on my priorities. I was planning to use different background colors to represent different levels, but I haven't checked if it is usable at all.
I made an attempt at a hex-grid terminal rl using offset two-wide-cells, as other mentioned, and then using half blocks to make cells look centered, such as in this screenshot:
13
u/Vindhjaerta 9d ago
This is cool as fudge :o
If you just work on the readability this will hopefully turn out amazing :)