Hex maps creation and rollover
This is just a quick, uncommented snippet of code I made starting from Coordinates in Hexagon-Based Tile Maps tutorial I found at GameDev.net.
The article does not cover all hex maps, just horizontal ones. Read Understanding hexagonal tiles to know something more about hex maps.
Also, the pseudo code shown in the article has some errors, but I finally managed to have a working, full math hex maps creation and rollover.
No line comments at the moment as said, because I still have to optimize the code and write the routine to generate vertical hex maps, meanwhile take a look at it:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 | hexagon_width = 38;
hexagon_height = 44;
grid_x_size = 12;
grid_y_size = 10;
sector_width = hexagon_width;
sector_height = hexagon_height/4*3;
gradient = (hexagon_height/4)/(hexagon_width/2)
for (x=0; x<grid_x_size; x++) {
for (y=0; y<grid_y_size; y++) {
hexagon_x_position = hexagon_width*x+(y%2)*hexagon_width/2;
hexagon_y_position = hexagon_height*y/4*3;
hexagon_number = x+y*grid_x_size;
hexagon_movieclip = attachMovie("hhexagon", "hhexagon_"+hexagon_number, hexagon_number, {_x:hexagon_x_position, _y:hexagon_y_position});
hexagon_movieclip.gotoAndStop(1);
hexagon_movieclip.txt.text = hexagon_number;
}
}
onEnterFrame = function() {
_root["hhexagon_"+hexagon_hover].gotoAndStop(1);
sector_x = Math.floor(_xmouse/sector_width);
sector_y = Math.floor(_ymouse/sector_height);
delta_sector_x = _xmouse%sector_width;
delta_sector_y = _ymouse%sector_height;
switch(sector_y%2){
case 1:
if(delta_sector_x>=hexagon_width/2){
if(delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)){
real_x = sector_x;
real_y = sector_y-1;
}
else{
real_x = sector_x;
real_y = sector_y;
}
}
else{
if(delta_sector_y<delta_sector_x*gradient){
real_x = sector_x;
real_y = sector_y-1;
}
else{
real_x = sector_x-1;
real_y = sector_y;
}
}
break;
case 0:
real_x = sector_x;
real_y = sector_y;
if(delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)){
real_x = sector_x-1;
real_y = sector_y-1;
}
if(delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)){
real_x = sector_x;
real_y = sector_y-1;
}
break;
}
if((real_x>=0)and(real_x<grid_x_size)and(real_y>=0)and(real_y<grid_y_size)){
hexagon_hover = real_x+real_y*grid_x_size;
_root["hhexagon_"+hexagon_hover].gotoAndStop(2);
}
}; |
And see how does it work
Download the source code.
They can be easily customized to meet the unique requirements of your project.
8 Responses to “Hex maps creation and rollover”
Leave a Reply
Trackbacks
-
Finding adjacent cells in an hex map : Emanuele Feronato - italian geek and PROgrammer on
April 23rd, 2008 7:23 pm
[...] This tutorial continues Hex maps creation and rollover. [...]
- Citrus Engine released for free for learning
- My epic fail with ClickBank
- Get up to $100,000 for your next Flash game with Mochi GAME Developer Fund
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines – 17 lines version
- Sell sitelocked version of your Flash games and even .fla sources to Free Online Games
- Protect your work from ActionScript code theft with SWF Protector
- Create a dynamic content animated footer ad for your site in just 9 jQuery lines
- Understanding Box2D’s one-way platforms, aka CLOUDS
- Triqui MochiAds Arcade plugin for WordPress upgraded to 1.2
- Box2D Flash game creation tutorial – part 2
- Create a Lightbox effect only with CSS - no javascript needed
- Flash game creation tutorial - part 1
- Create a Flash Racing Game Tutorial
- Flash game creation tutorial - part 2
- Make a Flash game like Flash Element Tower Defense - Part 2
- Flash game creation tutorial - part 3
- Make a Flash game like Flash Element Tower Defense - Part 1
- Create a flash draw game like Line Rider or others - part 1
- Triqui MochiAds Arcade plugin for WordPress official page
- Create a flash artillery game - step 1
- Flash game creation tutorial – part 5.2 (4.88/5)
- Create a flash artillery game – step 1 (4.79/5)
- Create a Flash Racing Game Tutorial (4.76/5)
- Create a survival horror game in Flash tutorial – part 1 (4.74/5)
- Create a flash artillery game – step 2 (4.74/5)
- Creation of a Flash arcade site using WordPress – step 2 (4.73/5)
- Flash game creation tutorial – part 1 (4.71/5)
- Flash game creation tutorial – part 2 (4.71/5)
- Create a flash draw game like Line Rider or others – part 1 (4.69/5)
- Creation of a platform game with Flash – step 2 (4.68/5)

(2 votes, average: 4.50 out of 5)



Wow!
Thanks a lot!
nice! just a step from HOMM fight ;p
very cool, im going to use this for “level selection”
What kind of game are you going to make with this? It’s really cool.
Thats cool, you should do a Hexic clone with this !
Really good, could be used for a few things.
Not sure how on earth to contact you.
I’ve converted this to AS3 code quickly (I like AS3), if you want me to email it to you I’ve left my email here so you can contact.
Some nice code, I’d like to interoperate it into a game in the future for a turn based strategy game.