AS3 Array Tile Engine

Question

I've been working on a Tile Map that is working and displays the tiles on screen according to the associated number in the array.

Tile 0 is for Grass, 1 is for water and 2 is for Coins. When the user is clicking the coins tile I need it opens a menu that the user can click a button to 'TAKE COINS' from the tile.

    var myMap: Array = [
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 2, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 2, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 2, 0, 0],
        [0, 0, 0, 0, 0, 0, 0, 0, 0, 0],
        [0, 0, 0, 0, 0, 1, 1, 0, 0, 0]
    ];


    for (var i: int = 0; i < mapHeight; i++) {
        for (var u: int = 0; u < mapWidth; u++) {
            var tile: MovieClip = new Tile();
            tile.gotoAndStop(myMap[i][u] + 1);
            tile.x = tileSize * u
            tile.y = tileSize * i
            tile.theIDi = i;
            tile.theIDu = u;
            tile.buttonMode = true;


            addChildAt(tile, 0);
            tile.addEventListener(MouseEvent.CLICK, clickTile);

        }
    }

    function clickTile(event: MouseEvent) {
         positionX = event.currentTarget.theIDu;
         positionY = event.currentTarget.theIDi;

         if(myMap[positionX][positionY] == 2) {
             openGoldMenu(positionX, positionY);                    
         }
    }

    function openGoldMenu() {
         takeCoinsMenu.x = 100;
         takeCoinsMenu.y = 200;
         buttonTake.addEventListener(MouseEvent.CLICK, takeCoins);
    }

    function takeCoins(event: MouseEvent) {
         myStats[0].gold = myStats[0].gold + 10;

         WHAT TO WRITE HERE? HOW CAN I ACCESS THE CURRENT TILE THAT WAS CLICKED WITH THE GOLD COIN ON? URGH CONFUSED!
     }

BadFeelingAboutThis · Accepted Answer · 2015-05-12 19:18:28Z

1

There is quite a few ways to do this, but likely the easiest is the following:

Create a variable (make sure it's declared outside of any methods, so next to your myMap var would be good) that stores the last tile that was clicked
```
var clickedTile:Tile;
var myMap:Array = [.......
```

In your clickTile function, populate that variable:

function clickTile(event: MouseEvent) {
    clickedTile = event.currentTarget as Tile;

    var positionX:int = clickedTile.theIDu;
    var positionY:int = clickedTile.theIDi;

    if(myMap[positionX][positionY] == 2) {
        openGoldMenu(positionX, positionY);                    
    }
}

Now in your takeCoins method you can reference the tile stored in clickedTile.

answered May 12, 2015 at 19:18

BadFeelingAboutThis

14.4k2 gold badges35 silver badges40 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Naythan Over a year ago

Thanks a bunch, this worked wonders, you're very intelligent!

steven davies · Accepted Answer · 2015-05-12 22:54:51Z

noticed your question has already been answered but I wanted to offer an additional tip I wish I had known long ago.

it looks like all your tiles are the same size, if this is the case then don't add a click event to all the individual tiles, just add one to the tile container, which in this case is the clip using this class and then determine which tile you clicked based on the mouse position like so...

addEventListener(MouseEvent.CLICK, clickEventHandler);

private function clickEventHandler(e:MouseEvent):void
{
var uId:int = Math.floor((mouseX - this.x) / tileSize);
var iId:int = Math.floor((mouseY - this.y) / tileSize);

if(myMap[uId][iId] == 2)
{
openGoldMenu(uId,iId);
}
}

This way you only need to set one event listener and this will be quicker and easier to manager later on when you need to disable it, you can also lose the need to set the theIDi and theIDu variables in the tiles unless you need them later.

Also I would say don't use iId or uId, use xId and yId or xIndex and yIndex, makes more sense when working with a 2d array and is easier to follow later, you can also use something similar as your loop variables just to keep things simple.

for(var yIndex:int = 0; yIndex < map.length ; xIndex++)
for(var xIndex:int = 0; xIndex < map[yIndex].length ; yIndex++)

Would also be a good idea to store the different tiles in their own 2d array rather then create them and just add them to the stage, this will make it easier to remove/update individual tiles when you come to moving your tiles around because you can just remove a single row or column from the stage because you still have the references rather then looping through all the tiles and checking their ids.

var tileArray:Array = new Array();

for(var yIndex:int = 0; yIndex < map.length; yIndex++)
{
if(tileArray[yIndex] == null) tileArray[yIndex] = new Array();
for(var xIndex:int = 0; xIndex < map[yIndex].length; xIndex++)
{
tileArray[yIndex][xIndex] = new Tile();
tileArray[yIndex][xIndex].x = xIndex * tileSize;
tileArray[yIndex][xIndex].y = yIndex * tileSize;
addChild(tileArray[yIndex][xIndex]);
}
}

then when you want to remove a tile simply call.

removeChild(tileArray[yIndex][xIndex]);
tileArray[yIndex][xIndex] = null;

this also remove the need for the uId and iId because there position in that array is there id.

Hope this helps :)

Collectives™ on Stack Overflow

AS3 Array Tile Engine

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related