search

flauwekeul / honeycomb

Create hex grids easily, in node or the browser.
https://abbekeultjes.nl/honeycomb
MIT License
630 stars 57 forks source link

Isometric drawing #57

Closed diogofacin closed 3 years ago

diogofacin commented 4 years ago

Hi,

I am trying to achieve something like this: https://pixeljoint.com/files/icons/full/hexup1.png from what I checked in the code there is no support for hexagon rotation.

How hard would be to implement an isometric drawing and keep the Grid.pointToHex(x, y) working with precision with a mouse over?

Thanks!

flauwekeul commented 4 years ago

I think it's pretty hard 😅

A lot of functionality depends on hexes being either pointy or flat. If orientation is expressed in radians (or degrees) instead of pointy/flat, a lot of functions would require more math. It wouldn't just be Grid.pointToHex(), but probably also Hex.toPoint() and corners() (because you probably need those to render the hexes). And those methods use other methods (like width() and height()).

I'm working on a rewrite in typescript and a lot of things are going to work differently. I've considered replacing pointy/flat with a value in radians, but since you're the first to request this feature and it's a lot of work to figure out all the maths (I'm not that good in maths tbh), I've decided to keep pointy/flat for now.

You're best bet is to add a rotation translation yourself. The impact on performance might not be that much worse than if Honeycomb would do it 🤔 I've googled a little, but couldn't find an example. It shouldn't be that hard to figure out though...it's something with trigonometry 😆

guillaume-alvarez commented 4 years ago

It seems simpler to use a lib like Phaser or Pixi to display the hexagons on a flat plane (using honeycomb) and rotate the whole plane.

diogofacin commented 4 years ago

@flauwekeul thanks for your reply. I am not good at math too or else I would probably add a "else" condition on your code and figure out. That's fine, @guillaume-alvarez suggestion seems a good one I will give a try with PixiJS, thanks.

Not too concerned with performance, more with the precision that the pointer will highlight the correct Hex on a rotated plane.

diogofacin commented 4 years ago

@guillaume-alvarez, it worked well with PixiJS, first time using it, the code could be improved for sure. https://jsfiddle.net/alucardeck/up0z86kq/

Thanks guys!

flauwekeul commented 4 years ago

Cool. I thought you had to translate stuff yourself, but Pixi can do it for you apparently.