Finding adjacent cells in an hex map

April 23, 2008 by Emanuele Feronato
Filed Under Flash, Game design, Users contributions • 9 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

PLAIN TEXT
ACTIONSCRIPT:
  1. hexagon_width = 38;
  2. hexagon_height = 44;
  3. grid_x_size = 12;
  4. grid_y_size = 10;
  5. sector_width = hexagon_width;
  6. sector_height = hexagon_height/4*3;
  7. gradient = (hexagon_height/4)/(hexagon_width/2);
  8. for (x=0; x<grid_x_size; x++) {
  9.     for (y=0; y<grid_y_size; y++) {
  10.         hexagon_x_position = hexagon_width*x+(y%2)*hexagon_width/2;
  11.         hexagon_y_position = hexagon_height*y/4*3;
  12.         hexagon_number = x+y*grid_x_size;
  13.         hexagon_movieclip = attachMovie("hhexagon", "hhexagon_"+hexagon_number, hexagon_number, {_x:hexagon_x_position, _y:hexagon_y_position});
  14.         hexagon_movieclip.gotoAndStop(1);
  15.         hexagon_movieclip.txt.text = hexagon_number;
  16.     }
  17. }
  18. onEnterFrame = function () {
  19.     _root["hhexagon_"+hexagon_hover].gotoAndStop(1);
  20.     _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(1);
  21.     _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(1);
  22.     _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(1);
  23.     _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(1);
  24.     _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(1);
  25.     _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(1);
  26.     _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(1);
  27.     _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(1);
  28.     sector_x = Math.floor(_xmouse/sector_width);
  29.     sector_y = Math.floor(_ymouse/sector_height);
  30.     delta_sector_x = _xmouse%sector_width;
  31.     delta_sector_y = _ymouse%sector_height;
  32.     switch (sector_y%2) {
  33.     case 1 :
  34.         if (delta_sector_x>=hexagon_width/2) {
  35.             if (delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)) {
  36.                 real_x = sector_x;
  37.                 real_y = sector_y-1;
  38.             } else {
  39.                 real_x = sector_x;
  40.                 real_y = sector_y;
  41.             }
  42.         } else {
  43.             if (delta_sector_y<delta_sector_x*gradient) {
  44.                 real_x = sector_x;
  45.                 real_y = sector_y-1;
  46.             } else {
  47.                 real_x = sector_x-1;
  48.                 real_y = sector_y;
  49.             }
  50.         }
  51.         break;
  52.     case 0 :
  53.         real_x = sector_x;
  54.         real_y = sector_y;
  55.         if (delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)) {
  56.             real_x = sector_x-1;
  57.             real_y = sector_y-1;
  58.         }
  59.         if (delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)) {
  60.             real_x = sector_x;
  61.             real_y = sector_y-1;
  62.         }
  63.         break;
  64.     }
  65.     if ((real_x>=0) and (real_x<grid_x_size) and (real_y>=0) and (real_y<grid_y_size)) {
  66.         hexagon_hover = real_x+real_y*grid_x_size;
  67.         _root["hhexagon_"+hexagon_hover].gotoAndStop(2);
  68.         if (hexagon_hover%grid_x_size != grid_x_size-1) {
  69.             _root["hhexagon_"+(hexagon_hover+1)].gotoAndStop(3);
  70.         }
  71.         if (hexagon_hover%grid_x_size != 0) {
  72.             _root["hhexagon_"+(hexagon_hover-1)].gotoAndStop(3);
  73.         }
  74.         if (Math.floor(hexagon_hover/grid_x_size)%2 == 0) {
  75.             if (hexagon_hover%grid_x_size != 0) {
  76.                 _root["hhexagon_"+(hexagon_hover+11)].gotoAndStop(3);
  77.                 _root["hhexagon_"+(hexagon_hover-13)].gotoAndStop(3);
  78.             }
  79.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  80.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
  81.         } else {
  82.             if (hexagon_hover%grid_x_size != grid_x_size-1) {
  83.                 _root["hhexagon_"+(hexagon_hover+13)].gotoAndStop(3);
  84.                 _root["hhexagon_"+(hexagon_hover-11)].gotoAndStop(3);
  85.             }
  86.             _root["hhexagon_"+(hexagon_hover+12)].gotoAndStop(3);
  87.             _root["hhexagon_"+(hexagon_hover-12)].gotoAndStop(3);
  88.         }
  89.     }
  90. };

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:

PLAIN TEXT
ACTIONSCRIPT:
  1. // Container so you can easily getChildAt
  2. var hexagon_container:MovieClip = new MovieClip();
  3. addChild(hexagon_container);
  4. // Declare variables
  5. var hexagon_width:int = 38;
  6. var hexagon_height:int = 44;
  7. var hexagon_number = 0;
  8. var grid_x_size:int = 12;
  9. var grid_y_size:int = 10;
  10. var sector_width:Number = hexagon_width;
  11. var sector_height:Number = hexagon_height/4*3;
  12. var gradient:Number = (hexagon_height/4)/(hexagon_width/2)
  13. var hexagon_hover:Number = 0;
  14. // Changed the y and x for loop to add the hexagons in the correct way for getChildAt
  15. for (var y_pos:int =0; y_pos<grid_y_size; y_pos++) {
  16.     for (var x_pos:int =0; x_pos<grid_x_size; x_pos++) {
  17.         var hexagon_x_position:Number = hexagon_width*x_pos+(y_pos%2)*hexagon_width/2;
  18.         var hexagon_y_position:Number = hexagon_height*y_pos/4*3;
  19.         hexagon_number = x_pos+y_pos*grid_x_size;
  20.         var hexagon:hhexagon = new hhexagon();
  21.         hexagon_container.addChild(hexagon);
  22.         hexagon.x = hexagon_x_position;
  23.         hexagon.y = hexagon_y_position;
  24.         hexagon.txt.text = hexagon_number;
  25.         hexagon.gotoAndStop(1);
  26.     }
  27. }
  28.  
  29. addEventListener("enterFrame", enterFramer)
  30.  
  31. function enterFramer(event:Event):void {
  32.     // Get replaces the lastFrame's tile with a blank one
  33.     MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(1);
  34.     // Declare vars (enterFrame)
  35.     var sector_x:Number = Math.floor(mouseX/sector_width);
  36.     var sector_y:Number = Math.floor(mouseY/sector_height);
  37.     var delta_sector_x:Number = mouseX%sector_width;
  38.     var delta_sector_y:Number = mouseY%sector_height;
  39.     var real_x:Number;
  40.     var real_y:Number;
  41.     switch(sector_y%2){
  42.         case 1:
  43.             if(delta_sector_x>=hexagon_width/2){
  44.                 if(delta_sector_y<(hexagon_height/2-delta_sector_x*gradient)){
  45.                     real_x = sector_x;
  46.                     real_y = sector_y-1;
  47.                 }
  48.                 else{
  49.                     real_x = sector_x;
  50.                     real_y = sector_y;
  51.                 }
  52.             }
  53.             else{
  54.                 if(delta_sector_y<delta_sector_x*gradient){
  55.                     real_x = sector_x;
  56.                     real_y = sector_y-1;
  57.                 }
  58.                 else{
  59.                     real_x = sector_x-1;
  60.                     real_y = sector_y;
  61.                 }
  62.             }
  63.             break;
  64.         case 0:
  65.             real_x = sector_x;
  66.             real_y = sector_y;
  67.             if(delta_sector_y<((hexagon_height/4)-delta_sector_x*gradient)){
  68.                 real_x = sector_x-1;
  69.                 real_y = sector_y-1;
  70.             }
  71.             if(delta_sector_y<((-hexagon_height/4)+delta_sector_x*gradient)){
  72.                 real_x = sector_x;
  73.                 real_y = sector_y-1;
  74.             }
  75.             break;
  76.     }
  77.     if((real_x>=0)&&(real_x<grid_x_size)&&(real_y>=0)&&(real_y<grid_y_size)){
  78.         hexagon_hover = real_x+real_y*grid_x_size;
  79.         // Re-adds new hovering tile with red
  80.         MovieClip(hexagon_container.getChildAt(hexagon_hover)).gotoAndStop(2);
  81.     }
  82. };

Download the source codes and experiment

Rate this post: 1 Star2 Stars3 Stars4 Stars5 Stars (No Ratings Yet)
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.

9 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…

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 [...]

Posts