• Announcements

    • khawk

      Download the Game Design and Indie Game Marketing Freebook   07/19/17

      GameDev.net and CRC Press have teamed up to bring a free ebook of content curated from top titles published by CRC Press. The freebook, Practices of Game Design & Indie Game Marketing, includes chapters from The Art of Game Design: A Book of Lenses, A Practical Guide to Indie Game Marketing, and An Architectural Approach to Level Design. The GameDev.net FreeBook is relevant to game designers, developers, and those interested in learning more about the challenges in game development. We know game development can be a tough discipline and business, so we picked several chapters from CRC Press titles that we thought would be of interest to you, the GameDev.net audience, in your journey to design, develop, and market your next game. The free ebook is available through CRC Press by clicking here. The Curated Books The Art of Game Design: A Book of Lenses, Second Edition, by Jesse Schell Presents 100+ sets of questions, or different lenses, for viewing a game’s design, encompassing diverse fields such as psychology, architecture, music, film, software engineering, theme park design, mathematics, anthropology, and more. Written by one of the world's top game designers, this book describes the deepest and most fundamental principles of game design, demonstrating how tactics used in board, card, and athletic games also work in video games. It provides practical instruction on creating world-class games that will be played again and again. View it here. A Practical Guide to Indie Game Marketing, by Joel Dreskin Marketing is an essential but too frequently overlooked or minimized component of the release plan for indie games. A Practical Guide to Indie Game Marketing provides you with the tools needed to build visibility and sell your indie games. With special focus on those developers with small budgets and limited staff and resources, this book is packed with tangible recommendations and techniques that you can put to use immediately. As a seasoned professional of the indie game arena, author Joel Dreskin gives you insight into practical, real-world experiences of marketing numerous successful games and also provides stories of the failures. View it here. An Architectural Approach to Level Design This is one of the first books to integrate architectural and spatial design theory with the field of level design. The book presents architectural techniques and theories for level designers to use in their own work. It connects architecture and level design in different ways that address the practical elements of how designers construct space and the experiential elements of how and why humans interact with this space. Throughout the text, readers learn skills for spatial layout, evoking emotion through gamespaces, and creating better levels through architectural theory. View it here. Learn more and download the ebook by clicking here. Did you know? GameDev.net and CRC Press also recently teamed up to bring GDNet+ Members up to a 20% discount on all CRC Press books. Learn more about this and other benefits here.
Sign in to follow this  
Followers 0
AesteroidBlues

Isometric Hex Picking

8 posts in this topic

Hey everyone,

I was wondering if anyone had any suggestions or words of wisdom on how to perform picking on a grid of isometric hexagonal tiles. Something like this:

[img]http://fc01.deviantart.net/fs70/f/2010/131/a/3/Greyhawk_Isometric_Hex_map_by_Hologramzx.png[/img]

I've read Paul Firth's excellent article on [url="http://www.wildbunny.co.uk/blog/2011/03/27/isometric-coordinate-systems-the-modern-way/"]isometric picking[/url] on a square-tile map and I was wondering if there was a similar method for hexagons. We're using Javascript on an HTML5 canvas and I'm not sure a system that compares pixel color data (as described on [url="http://www.xnaresources.com/default.asp?page=Tutorial:TileEngineSeries:7"]XNA Resources[/url]) would be ideal for performance reasons. Thanks for any advice you can give me!
0

Share this post


Link to post
Share on other sites
Thanks for link to Paul Firth's article :) It sparked new ideas for me.
I never done isometric let alone hexagonal so please forgive me in advance for guessing.

Looking at the image of the hexagonal tiles in OP, I tilt my head slightly to the left and see that this is still a 2d grid (x,y).
Starting on the far left tile is (0,0) and the far right is (5,3)
Every hex tile has a center. The center point will become the exact tile location.

Based on the 'Coordinate Systems' section of the article: (0,0) will become the origin for the up 'U' and right 'V' vectors.
The two vectors will pass through all the center points of each hex tile along the edge of the map.
Get the screen coordinate 'P'
Do the math to get tU and tV

Temporarily select a tile based on (tU, tV). So if (tU, tV) = (1.3, 2.7) then it will pick tile (1, 3).

Afterwards, do a more comprehensive test.
Using the temporary tile, check the six sides if the (tU, tV) falls within the polygon. All sides are equal distance from the center of the tile.
If any one side fails the check then the adjacent tile is the tile to be selected. Otherwise the current tile is the selected tile.
1

Share this post


Link to post
Share on other sites
Ah! That makes quite a bit of sense, however does the assumption that all sides of the hexagon are equidistant from the centerpoint hold when the isometric perspective is applied? This would be correct for an orthographic top-down map, but just eyeballing it with my mouse pointer over the image in the OP, it appears that the "top" and "bottom" of the hex tile are closer than the sides. I could be mistaken though.
0

Share this post


Link to post
Share on other sites
I don't see how it's all that different from regular isometric:

Hex: (Ignore the "Stop deleting my spaces HTML" dots)
[source lang="plain"]
.__ .. __
/ A\__/ B\
\__/ C\__/
/ D\__/ E\
\__/ F\__/
[/source]
Iso:
[source lang="plain"]
/A\ /B\
\ /C\ /
/D\ /E\
\ /F\ /[/source]

The only difference I see drawing/picking logic wise is the tiles are a little wider and slightly differently shaped.
0

Share this post


Link to post
Share on other sites
"does the assumption that all sides of the hexagon are equidistant from the centerpoint hold when the isometric perspective is applied?"

It should hold true. I though point P is in screen space and it gets translated into point T which is P in grid space. Essentially grid space is like viewing the hexagon tile from perfectly above or basically without perspective.

[img]http://arges-systems.com/images/hex-zoom-d.png[/img]

Picture from this page - [url="http://arges-systems.com/blog/2011/01/10/hex-grid-line-of-sight-revisited/"]http://arges-systems.com/blog/2011/01/10/hex-grid-line-of-sight-revisited/[/url]
0

Share this post


Link to post
Share on other sites
I find a demo like this but AesteroidBlues shows the pic is slant
[img]http://www.thecodeway.com/blog/wp-content/uploads/2011/04/hex_2.gif[/img]
0

Share this post


Link to post
Share on other sites
One of the quickest and easiest ways to do it would be to use a mouse map like in [url="http://www.gamedev.net/page/resources/_/technical/game-programming/isometric-n-hexagonal-maps-part-i-r747"]this article[/url] (check out the very bottom for the mouse map idea). Edited by Saruman
0

Share this post


Link to post
Share on other sites
[quote name='Neometron' timestamp='1344320985' post='4966917']
It should hold true. I though point P is in screen space and it gets translated into point T which is P in grid space. Essentially grid space is like viewing the hexagon tile from perfectly above or basically without perspective.
[/quote]

Oh I see what you're doing, I think I was getting confused by all of the variables [img]http://public.gamedev.net//public/style_emoticons/default/wacko.png[/img]
This method would be great, but I'm afraid I don't know how to transform screen point P into its equivalent point in grid-space. Something tells me it involves matrices [img]http://public.gamedev.net//public/style_emoticons/default/dry.png[/img]

[quote name='Saruman' timestamp='1344393721' post='4967222']
One of the quickest and easiest ways to do it would be to use a mouse map like in [url="http://www.gamedev.net/page/resources/_/technical/game-programming/isometric-n-hexagonal-maps-part-i-r747"]this article[/url] (check out the very bottom for the mouse map idea).
[/quote]

I've read quite a bit about mouse maps, unfortunately I'm wary of their performance cost in my development environment (HTML5 with Canvas and Javascript). I'll certainly be experimenting with this method tomorrow but I've had mixed experiences with Canvas' getPixelData() function.
0

Share this post


Link to post
Share on other sites
[quote name='AesteroidBlues' timestamp='1344482304' post='4967621']
I'll certainly be experimenting with this method tomorrow but I've had mixed experiences with Canvas' getPixelData() function.
[/quote]
If it turns out to be slow you could always use the equivalent technique but as an array (i.e. just assign each color a number and build an array that you embed as an include), that way the only cost is a very quick array index lookup.
1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0