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.

Rate this post: (3 votes, average: 3.33 out of 5)

 Loading ...

If you found this post useful, please consider a small donation.

11 Responses

1. Jack Hopkisn says:

   April 20, 2008 at 2:36 pm

   Wow!
   Thanks a lot!

   Reply
2. ptz says:

   April 20, 2008 at 3:09 pm

   nice! just a step from HOMM fight ;p

   Reply
3. styxtwo says:

   April 20, 2008 at 3:45 pm

   very cool, im going to use this for “level selection”

   Reply
4. Graham says:

   April 20, 2008 at 4:44 pm

   What kind of game are you going to make with this? It’s really cool.

   Reply
5. JDog says:

   April 20, 2008 at 4:45 pm

   Thats cool, you should do a Hexic clone with this !

   Reply
6. Slasher145 says:

   April 21, 2008 at 12:31 am

   Really good, could be used for a few things.

   Reply
7. Prankard says:

   April 23, 2008 at 3:04 am

   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.

   Reply
8. Finding adjacent cells in an hex map : Emanuele Feronato - italian geek and PROgrammer says:

   April 23, 2008 at 7:23 pm

   [...] This tutorial continues Hex maps creation and rollover. [...]

   Reply
9. theo says:

   April 6, 2010 at 3:16 pm

   Where are the hexagons defined?
   I don’t understand where in the script they are drawn.

   Reply
   • Alx says:

     May 31, 2010 at 11:54 am

     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;
     }
     }
     This cicle do the work. It is creating a virtual tile params, like hexagon X and Y positions, number of tile on the map, and attach movieclip from library with a tile image/animation, assigning to it all virtual params. Only thing i'm couldn't tell surelly is does "hexagon_movieclip" array, object, or just a temporal variable with movieclip pointer. Since it's not appear in further code, i'm suggest it's just temporal.

     Reply
10. Alx says:

    May 31, 2010 at 8:59 am

    >>if(delta_sector_y<(hexagon_height/2-delta_sector_x*gradient))
    Could you, please, tell why we divide hexagon height by two here, don't use it next and divide by 4 at last two conditions? I'm spend a night to understand it, and could not. :(

    Reply