Comment by mmanfrin | Hacker News Reader

Comment by mmanfrin | Hacker News Reader

Oooh, nice.

I have worked with hexes in little side project games, it was a difficult process and I went through a phase of trying to home-roll canvas drawing of hexes (and making some interesting looking bugs). I ended up using a js library (Konva / https://konvajs.org/) which was pretty easy to implement.

One completed (albeit ugly) project was an implementation of a minigame I played in Magnum Opus:

https://game.manfrincdn.com/#/

It's been a little project kicking around that I want to make a hex game engine of sorts in Vue. The difficult part I keep running in to is connecting the state of the engine (in vue) with the state of the canvas (outside). I've ended up often hitting lower level APIs to watch/update/rerender parts, but at that point I feel like I end up reimplementing parts of vue within itself, and that nagging 'you are missing an obvious solution' worm starts up.

A pure CSS approach would make this a lot simpler, because there'd be no need to do any manual wiring up of state to canvas state, you'd just let vue handle that cycle because that's its core competency.

Vue is pretty good at generating SVG (I use Vue+SVG on https://www.redblobgames.com/grids/hexagons/) but there's a trick for making it work with Canvas too. https://simblob.blogspot.com/2018/03/using-vue-with-canvas.h... — it will make the canvas drawing function depend on the right data in Vue, so that if any of that data changes, it re-draws the canvas automatically.

Oh excellent, thank you, I didn't know you had written about hexes + vue -- your site has been absolutely invaluable to me and is one of the primest examples of visualization done well.

One problem I remember running in to (drawing hexes) is that the redraw of one hex overwrote what had been drawn in another, causing corners of the bounding box of a hex to clear its neighbors. Did you run in to any issues like that, or was that likely just a quirk of how I coded it (I am amateur with canvas, so it's a likely cause).

There are some gotchas when using sprites/images for hexagons. 1. The bounding boxes overlap, so you'll want to make sure that the sprites have transparent corners so that they don't overwrite what's in the next hexagon. 2. The images won't be exactly regular (equal sided) hexagons because regular hexagons have an irrational side width or height. The image size will be rounded off to the nearest pixel. You'll need to adjust for this in your hexagon calculations, either shrinking or expanding one of the axes a tiny bit so that both axes are integer sized. For example if your hexagon spacing is 173.20508 x 150 then you'll change your spacing to be 173 x 150, or whatever matches your image size.

Sorry for the off-topic comment but I just want to thank you for your site (and in particular that article). I've been using your site for years and it's an invaluable resource to me.

Thank you! Glad to hear it!

Reply on news.ycombinator.com