Struggling to setup a hex-shaped grid

[kirkbushell]

Have been reading the docs past few nights and I'm at a bit of a loss (just not smart enough I guess). In the docs at redblobgames: https://www.redblobgames.com/grids/hexagons/#coordinates

Under axial coordinates (which seems superior from a space storage perspective), he goes into details and uses a hexmap where 0,0 is the center and goes out from there.

I'm trying to achieve a similar sort of thing using honeycomb (great package name, btw!) to construct a grid of that nature. I followed the docs, and closest I could get was using a rectangle grid with a spiral traversal, but this just doesn't seem right.

I'm positive I need to create a grid specifically, and not really need traversal (if I understand it correctly), and pass that grid to my renderer, but I'm a bit lost as to how exactly that can function.

Help?!

[kirkbushell]

lol I think I've just figured it out. Basically because I'm generating the hexes as part of a separate system, I can literally pass these hexes as an array to the grid, and it'll render it exactly as I'd expect.

Ie. I just did this:

const grid = new Grid(Hex, [
  {q: 0, r: 0},
  {q: 0, r: -1},
  {q: 1, r: -1},
  {q: 1, r: 0},
  {q: 0, r: 1},
  {q: -1, r: 1},
  {q: -1, r: 0},
])

And it created a hexagon with 7 hexes. Now I'm just trying to figure out why it's so far off the canvas....

[flauwekeul]

I'm glad you figured it out (at least partially). Let me know if I can help in any way.

How can I improve the documentation (not redblobgames; I don't own that) so that you (or other devs) can find what you're looking for better?

[kirkbushell]

@flauwekeul thanks for asking. I think for me was the confusion of the name "Traverser". It makes sense if you're looking to select a portion of a grid you've already setup, but for me I literally just had to provide it the exact hexes and coordinates I wanted, which wasn't clear.

Once I figured that out, I could then write the algorithm to generate the maps, which you can see what I'm doing, here:

honecomb worked exactly as I expected, once I figured it out.

I think it would be good to provide generators that make it a little easier. It seems v3 already had a hexagon grid available, but this was removed?

[kirkbushell]

Also I still don't quite understand the origin point. I figured it out eventually, but how it's described documented is not really in alignment with what it actually does. Ie. I set my origin point (starting at the center) to be half the canvas width and height, and that works, but it's not clear from the docs that's what it's for. The docs read as though it's the origin point for each hex :)

[flauwekeul]

I think for me was the confusion of the name "Traverser". It makes sense if you're looking to select a portion of a grid you've already setup

I understand this. It's not very intuitive to create a grid using something called a traverser, which implies it traverses over an existing grid. Did you see this page in the documentation: https://abbekeultjes.nl/honeycomb/guide/creating-grids.html? Because it says you can create a grid with a traverser. Still, I can imagine this doesn't click and the page should be improved. Because I invented the library (and obviously know it very well), it can be hard to write docs for people who don't know the library at all.

Once I figured that out, I could then write the algorithm to generate the maps, which you can see what I'm doing, here:

You haven't shared a screenshot or code there.

I think it would be good to provide generators that make it a little easier.

Assuming you mean literal JS generators, Honeycomb already supports that 😃 But I see I haven't included an example in the docs 😒

It seems v3 already had a hexagon grid available, but this was removed?

It wasn't quite removed, it now works differently. You can create/traverse a hexagon-shaped grid using the spiral() traverser.

Also I still don't quite understand the origin point. I figured it out eventually, but how it's described documented is not really in alignment with what it actually does. Ie. I set my origin point (starting at the center) to be half the canvas width and height, and that works, but it's not clear from the docs that's what it's for. The docs read as though it's the origin point for each hex :)

The origin hex setting is the origin of each hex (the docs are right 😉). It's relative to a hex's center and by default it's 0, 0, which you can interpret as deviating 0 in both the x and y direction from the center. It seems you were looking for the origin of a whole grid, so basically where the "origin hex" (the hex with axial coordinates 0, 0) is placed on screen. Because rendering is outside of Honeycomb's scope, it's entirely up to you how you render a grid. That's why Honeycomb has no concept of a grid origin.

I've started working on the next major release and one of the things I want to improve is the documentation. I've created a playground (it's not online yet) where you can play around with the library in the browser and you see a rendered grid. Hopefully, this makes it easier to understand the library.