Finding adjacent cells in an hex map

April 23, 2008 • Actionscript 2, Flash, Game design, Users contributions by Emanuele Feronato • 19 Comments

This tutorial continues Hex maps creation and rollover.

Now I will show you how find adjacent cells. Again, at the moment it’s only code, and it only works for horizontal hex maps

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90

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);
	_root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(1);
	_root["hhexagon_"+(hexagon_hover-13)].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);
		if (hexagon_hover%grid_x_size != grid_x_size-1) {
			_root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
		}
		if (hexagon_hover%grid_x_size != 0) {
			_root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
		}
		if (Math.floor(hexagon_hover/grid_x_size)%2 == 0) {
			if (hexagon_hover%grid_x_size != 0) {
				_root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(3);
				_root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(3);
			}
			_root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
			_root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
		} else {
			if (hexagon_hover%grid_x_size != grid_x_size-1) {
				_root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(3);
				_root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(3);
			}
			_root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
			_root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
		}
	}
};

and this is the result:

While I am optimizing the code and writing the routines for the vertical hex maps, James Prankard sent me the AS3 version of the code published in the Hex maps creation and rollover tutorial

Here it is:

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
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82

// Container so you can easily getChildAt
var hexagon_container:MovieClip = new MovieClip();
addChild(hexagon_container);
// Declare variables
var hexagon_width:int = 38;
var hexagon_height:int = 44;
var hexagon_number = 0;
var grid_x_size:int = 12;
var grid_y_size:int = 10;
var sector_width:Number = hexagon_width;
var sector_height:Number = hexagon_height/4*3;
var gradient:Number = (hexagon_height/4)/(hexagon_width/2)
var hexagon_hover:Number = 0;
// Changed the y and x for loop to add the hexagons in the correct way for getChildAt
for (var y_pos:int =0; y_pos<grid_y_size; y_pos++) {
	for (var x_pos:int =0; x_pos<grid_x_size; x_pos++) {
		var hexagon_x_position:Number = hexagon_width*x_pos+(y_pos%2)*hexagon_width/2;
		var hexagon_y_position:Number = hexagon_height*y_pos/4*3;
		hexagon_number = x_pos+y_pos*grid_x_size;
		var hexagon:hhexagon = new hhexagon();
		hexagon_container.addChild(hexagon);
		hexagon.x = hexagon_x_position;
		hexagon.y = hexagon_y_position;
		hexagon.txt.text = hexagon_number;
		hexagon.gotoAndStop(1);
	}
}
 
addEventListener("enterFrame", enterFramer)
 
function enterFramer(event:Event):void {
	// Get replaces the lastFrame's tile with a blank one
	MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(1);
	// Declare vars (enterFrame)
	var sector_x:Number = Math.floor(mouseX/sector_width);
	var sector_y:Number = Math.floor(mouseY/sector_height);
	var delta_sector_x:Number = mouseX%sector_width;
	var delta_sector_y:Number = mouseY%sector_height;
	var real_x:Number;
	var real_y:Number;
	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)&&(real_x<grid_x_size)&&(real_y>=0)&&(real_y<grid_y_size)){
		hexagon_hover = real_x+real_y*grid_x_size;
		// Re-adds new hovering tile with red
		MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(2);
	}
};

Download the source codes and experiment

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (7 votes, average: 4.14 out of 5)
Loading ... Loading ...
Flash Templates provided by Template Monster are pre-made web design products developed using Flash technology.
They can be easily customized to meet the unique requirements of your project.
Be my fan on Facebook and follow me on Twitter! Exclusive content for my Facebook fans and Twitter followers

This post has 19 comments

  1. JDog

    on April 23, 2008 at 11:07 pm

    Great, but what do you plan to do with it onc its done ?

  2. EagleVision

    on April 24, 2008 at 1:14 am

    Yeah…
    It seems…sorta…pointless…

  3. Kesh

    on April 24, 2008 at 8:11 am

    as much as i think eaglevisions comments are pointless, i think he has a point. I dont see where ur going with this. Honeycomb??? was it a request?? but still works fine for whoever would need it. Thanks.

  4. Kesh

    on April 24, 2008 at 8:21 am

    edit: what i did was make those hexagon’s cubes and it look like steps….. it looks sorta cool so try it !!!!!!!

  5. styxtwo

    on April 24, 2008 at 11:29 am

    with this code you can find any tile relative to the one your mouse is on, that could be great for puzzle games!

  6. Emanuele Feronato

    on April 24, 2008 at 12:50 pm

    styxtwo is right…

  7. Finding adjacent cells in an hex map - part 2 : Emanuele Feronato - italian geek and PROgrammer

    on April 27, 2008 at 8:42 pm

    [...] by Emanuele Feronato on 04/27/08 in Flash, Game design In the Finding adjacent cells in an hex map post I showed you how to find adjacent cells in horizontal hex [...]

  8. MiniGladiator » Blog Archive » Javascript Gladiators

    on September 12, 2008 at 7:15 pm

    [...] around while browsing the site.  Just today I found some Actionscript code by Emanuele Feronato (http://www.emanueleferonato.com/2008/04/23/finding-adjacent-cells-in-an-hex-map/) that looks pretty sweet. [...]

  9. Halloween Couples : Emanuele Feronato

    on November 2, 2008 at 10:17 pm

    [...] basics of hexagonal environments are explained in Understanding hexagonal tiles, Finding adjacent cells in an hex map – part 1 and [...]

  10. weaponx

    on July 19, 2009 at 8:52 am

    Great script thx alot for it.

    Is it possible to place in a container of some sort so the hex grid can be centered in a stage?
    I was able to make the grid draw in a different place by adjusting the “var hexagon_x_position:Number” and “var hexagon_y_position:Number” but the mouseover dont follow. Where should I adjust so the mouseover matches the grid?

    In advance thx for your reply to a total newbee to AS3.

  11. weaponx

    on July 19, 2009 at 9:02 am

    I also tried to manipulate the container object:
    var hexagon_container:MovieClip = new MovieClip();
    hexagon_container.x = 116;
    hexagon_container.y = 26;
    addChild(hexagon_container);

    but still the mouseover dont follow correctly

  12. Xerks

    on March 4, 2010 at 1:23 am

    I’ve running this but it wouldn’t compile, something about 1046: Type was not found or was not a compile-time constant: hhexagon and 1180: Call to a possibly undefined method hhexagon. I’ve no idea what that means and any help would be apprieciated. Thanks.

    Great site btw

  13. Xerks

    on March 4, 2010 at 1:41 am

    nevermind I goofed….

  14. Xerks

    on March 6, 2010 at 8:23 pm

    Hi again, I’d like to use to start of your code to set up a matching game instead, how would I change it to instead of a set grid where every row has the same number of hexagons but each row has alternate hexagons. i.e. row 1 has 6 hexagons then row 2 has 5, then back to 6 again and so on.

    I’ve tried to set up an if statement but i can’t seem to get it to work. Thanks in advance for any help you’d give me

  15. Finding adjacent cells in an hex map – AS3 Version : Emanuele Feronato - italian geek and PROgrammer

    on March 26, 2010 at 1:45 pm

    [...] am porting this prototype into [...]

  16. Manoj

    on December 29, 2010 at 11:09 am

    Hmmmm,

    nice !!! i guess you need some more effort, because this editor is only true for 10×12 grid, try to change the grid value, and it sucks !!!

  17. nicothezulu

    on February 3, 2011 at 8:26 pm

    i figured out in 5 mins how to change the grid to get everything working:

    hexagon_width = 38;
    hexagon_height = 44;
    grid_x_size = 18;
    grid_y_size = 18;
    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=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=0) and (real_x=0) and (real_y<grid_y_size)) {
    hexagon_hover = real_x+real_y*grid_x_size;
    _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
    if (hexagon_hover%grid_x_size != grid_x_size-1) {
    _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
    }
    if (hexagon_hover%grid_x_size != 0) {
    _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
    }
    if (Math.floor(hexagon_hover/grid_x_size)%2 == 0) {
    if (hexagon_hover%grid_x_size != 0) {
    _root["hhexagon_"+(hexagon_hover+(grid_x_size-1))].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-(grid_x_size+1))].gotoAndStop(3);
    }
    _root["hhexagon_"+(hexagon_hover+grid_x_size)].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-grid_x_size)].gotoAndStop(3);
    } else {
    if (hexagon_hover%grid_x_size != grid_x_size-1) {
    _root["hhexagon_"+(hexagon_hover+(grid_x_size+1))].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-(grid_x_size-1))].gotoAndStop(3);
    }
    _root["hhexagon_"+(hexagon_hover+grid_x_size)].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-grid_x_size)].gotoAndStop(3);
    }
    }
    };

  18. nicothezulu

    on February 3, 2011 at 8:35 pm

    It would be nice to know, how to change hexagon tile sizes.

  19. nicothezulu

    on February 3, 2011 at 9:35 pm

    Hey, forget my last comment. Here you are my AS2 verison, which controls good the grid size and the hexagon size.

    hexagon_width = 19;
    hexagon_height = 22;
    grid_x_size = 20;
    grid_y_size = 20;
    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=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=0) and (real_x=0) and (real_y<grid_y_size)) {
    hexagon_hover = real_x+real_y*grid_x_size;
    _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
    if (hexagon_hover%grid_x_size != grid_x_size-1) {
    _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
    }
    if (hexagon_hover%grid_x_size != 0) {
    _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
    }
    if (Math.floor(hexagon_hover/grid_x_size)%2 == 0) {
    if (hexagon_hover%grid_x_size != 0) {
    _root["hhexagon_"+(hexagon_hover+(grid_x_size-1))].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-(grid_x_size+1))].gotoAndStop(3);
    }
    _root["hhexagon_"+(hexagon_hover+grid_x_size)].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-grid_x_size)].gotoAndStop(3);
    } else {
    if (hexagon_hover%grid_x_size != grid_x_size-1) {
    _root["hhexagon_"+(hexagon_hover+(grid_x_size+1))].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-(grid_x_size-1))].gotoAndStop(3);
    }
    _root["hhexagon_"+(hexagon_hover+grid_x_size)].gotoAndStop(3);
    _root["hhexagon_"+(hexagon_hover-grid_x_size)].gotoAndStop(3);
    }
    }
    };

< >