next »

[GAZ082]

Hi guys. I'm trying to dig into canvas and HTML5 making a simple board game. I'm trying to get an algorithm that allows me to convert mouse position on screen to hex grid values.

I've read several tutorials, Amit's one among them, but those are like 10 years old. I'm wondering if you guys know an elegant system to make it work, if something new has came up in all these years.

Thanks!

[JMickle]

i believe Battle for Wesnoth rotated it 90 degrees in translation. ie:

Code:

1236
2349
3496

would translate to

Code:

 3 2 1
4 3 2
 9 4 3
6 9 6[code]on a hexagonal map.

Dunno if this helps or not but it might be something to work by.

[/code]

[kiwi]

You could try this
1) See if distance from mouse to center of the hexagon is greater than half the size of the hexagon's diagonal (basically a bounding circle)
2) If no do the same for the rest of the hexagons, if yes then do a convex wrap - for each of the hexagon's points compute the angle made with the mouse cursor and then add them together. If that sum is 2*PI then the mouse is inside the hexagon

[raigan]

There's a really great overview of this problem in Game Programming Gems #7, Article 1.5, "For Bees and Gamers: How to Handle Hexagonal Tiles". I had read all the online resources about dealing with hex grids and nothing clicked until I read the GPG article.

[GAZ082]

There's a really great overview of this problem in Game Programming Gems #7, Article 1.5, "For Bees and Gamers: How to Handle Hexagonal Tiles". I had read all the online resources about dealing with hex grids and nothing clicked until I read the GPG article.

Yeah but, humm, for 60 bucks i'd rather buy a good programming book I'll try to stick to free and freely available solutions! Thanks tho.

[GAZ082]

i believe Battle for Wesnoth rotated it 90 degrees in translation. ie:

Code:

1236
2349
3496

would translate to

Code:

 3 2 1
4 3 2
 9 4 3
6 9 6[code]on a hexagonal map.

Dunno if this helps or not but it might be something to work by.

[/code]

I believe your solution is kinda this: http://playtechs.blogspot.com/2007/04/hex-grids.html

Which i dont get 

[kiwi]

No feedback on my reply ?

[LemonScented]

No feedback on my reply ?

I'll give you feedback. You're entirely correct 

[GAZ082]

You could try this
1) See if distance from mouse to center of the hexagon is greater than half the size of the hexagon's diagonal (basically a bounding circle)
2) If no do the same for the rest of the hexagons, if yes then do a convex wrap - for each of the hexagon's points compute the angle made with the mouse cursor and then add them together. If that sum is 2*PI then the mouse is inside the hexagon

hah, sorry for not replying. Well, i though that, to calculate the distance from the screen point to the hex. I read in gamedev that's inefficient, but i'll give it a try (i'm coding it right now).

[Zhal]

http://www.tonypa.pri.ee/tbw/tut25.html

There's one, though I have yet to try it, which I should do like... soon-ish.

[GAZ082]

http://www.tonypa.pri.ee/tbw/tut25.html

There's one, though I have yet to try it, which I should do like... soon-ish.

Looks cool. Could you write the .fla code in a post? Don't have flash to open it.

Thanks!

[droqen]

I read in gamedev that's inefficient, but i'll give it a try (i'm coding it right now).

Should it matter that much? You're making a simple board game, which one would presume is turn-based and not really all that system-intensive in the first place. I am probably a horrible person for suggesting that you ignore inefficiency, but it's a single call you're making -- you don't even have to do it multiple times per frame, and there's very little else you're going to be handling.

[Christian Knudsen]

Maybe use a mouse map like suggested at the end of this article?:

http://www.gamedev.net/reference/articles/article747.asp

[raigan]

Yeah but, humm, for 60 bucks i'd rather buy a good programming book I'll try to stick to free and freely available solutions! Thanks tho.

Leaving aside the issue of whether or not the GPG books are "good programming books", you could just go to the bookstore and read that one chapter.

Alternately you could just use a square grid.. it's good enough for Chess and Advance Wars

[GAZ082]

Thanks guys, i'll try Zhal's link. Already contacted the author and he sent me the flash code in a text file. Looks like simple to do.

I'll post my results!