Finding adjacent cells in an hex map

April 23, 2008 by Emanuele Feronato
Filed Under Flash, Game design, Users contributions • 14 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 (1 votes, average: 4.00 out of 5)
Loading ... Loading ...
If you found this post useful, please consider a small donation.
» 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.

14 Responses to “Finding adjacent cells in an hex map”

  1. JDog on April 23rd, 2008 11:07 pm

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

  2. EagleVision on April 24th, 2008 1:14 am

    Yeah…
    It seems…sorta…pointless…

  3. Kesh on April 24th, 2008 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 24th, 2008 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 24th, 2008 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 24th, 2008 12:50 pm

    styxtwo is right…

  7. weaponx on July 19th, 2009 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.

  8. weaponx on July 19th, 2009 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

  9. Xerks on March 4th, 2010 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

  10. Xerks on March 4th, 2010 1:41 am

    nevermind I goofed….

  11. Xerks on March 6th, 2010 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

Leave a Reply




Trackbacks

  1. Finding adjacent cells in an hex map - part 2 : Emanuele Feronato - italian geek and PROgrammer on April 27th, 2008 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 [...]

  2. MiniGladiator » Blog Archive » Javascript Gladiators on September 12th, 2008 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. [...]

  3. Halloween Couples : Emanuele Feronato on November 2nd, 2008 10:17 pm

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

flash games company