Tile events and triggered functions

Adding triggers to map tiles

When Characters arrive at certain tiles, you might want certain events to happen. You may wish to have the player win the current level, teleport elsewhere on the map, or have the tile work as a button to modify the map is some way.

View example
tileset

It's very simple to do! In our example, we'll have a few map tiles do some clever things.

We'll begin by modifying our map a bit - this is just to make it clear where things are taking place on the map, and we won't be using any new tile types or making dramatic changes:


var gameMap = [
	0, 0, 0, 0, 4, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0,
	0, 2, 1, 2, 4, 2, 1, 7, 7, 7, 1, 1, 1, 1, 1, 1, 0, 2, 2, 0,
	0, 2, 1, 0, 4, 0, 1, 9, 1, 1, 1, 1, 1, 1, 1, 1, 0, 2, 2, 0,
	0, 2, 1, 1, 4, 1, 1, 9, 2, 2, 2, 2, 1, 1, 2, 2, 2, 2, 2, 0,
	0, 2, 1, 1, 4, 1, 1, 9, 2, 3, 3, 2, 1, 1, 2, 1, 0, 0, 0, 0,
	0, 2, 2, 2, 4, 2, 2, 2, 2, 3, 3, 2, 2, 2, 2, 1, 1, 1, 1, 0,
	0, 2, 1, 1, 4, 2, 4, 1, 1, 1, 1, 6, 6, 6, 2, 1, 1, 1, 1, 0,
	4, 4, 4, 4, 4, 2, 4, 1, 1, 1, 1, 8, 1, 1, 2, 1, 1, 1, 1, 0,
	0, 2, 5, 1, 5, 2, 4, 4, 4, 4, 4, 8, 1, 1, 2, 2, 2, 2, 1, 0,
	0, 1, 5, 5, 5, 2, 3, 2, 1, 1, 4, 8, 1, 1, 1, 3, 3, 2, 1, 0,
	0, 1, 2, 2, 2, 2, 1, 2, 1, 1, 4, 1, 1, 1, 1, 1, 3, 2, 1, 0,
	0, 1, 2, 3, 3, 2, 1, 2, 1, 1, 4, 4, 4, 4, 4, 4, 4, 2, 4, 4,
	0, 1, 2, 3, 3, 2, 1, 2, 1, 1, 1, 1, 1, 1, 1, 1, 1, 2, 1, 0,
	0, 1, 2, 3, 4, 2, 2, 2, 1, 1, 1, 1, 1, 1, 1, 0, 1, 2, 1, 0,
	0, 3, 2, 3, 4, 4, 1, 2, 2, 2, 2, 2, 2, 2, 1, 0, 1, 2, 1, 0,
	0, 3, 2, 3, 4, 4, 3, 2, 1, 1, 1, 1, 1, 2, 1, 1, 1, 2, 3, 0,
	0, 3, 2, 3, 4, 1, 3, 2, 1, 3, 1, 1, 1, 2, 1, 1, 1, 2, 3, 0,
	0, 1, 2, 2, 2, 2, 2, 2, 3, 3, 3, 1, 1, 2, 2, 2, 2, 2, 3, 0,
	0, 1, 1, 1, 1, 1, 1, 3, 3, 3, 3, 3, 1, 1, 1, 1, 1, 1, 4, 0,
	0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0, 0
];

We'll next be creating an object, tileEvents, where we'll associate the tile index we want an event to be triggered from with a function, by name, or an anonymous function. We'll demonstrate both options here:


var tileEvents = {
	23 : drawBridge,
	25 : drawBridge,
	121 : function(c) { c.placeAt(1,8); },
	161 : function(c) { c.placeAt(1,6); }
};

As you can see, if a Character moves to the tile at index 23 or 25, they'll trigger the drawBridge method. If they move to tile index 121 then the Character, which will be passed to the function as argument c will be moved to tile 1,8, and if the move to tile index 161 they will be moved to tile 1,6. The placeAt Character method, used with tileEvents allows us to create "warp tiles", or "teleporters".

Our example drawBridge function looks like this:


function drawBridge()
{
	gameMap[toIndex(4,5)] = (gameMap[toIndex(4,5)]==4 ? 2 : 4);
}

It changes one tile in the gameMap, at position 4,5. After checking its current type, it changes it to either 2 or 4. If you look at the tileTypes array, you'll see these correspond to path and water respectively.

Finally, in the Character processMovement method, we'll add another check once the Character has reached their destination tile. Before checking if the floorType is Ice or Conveyor, we'll check if there's an entry in the tilesEvents object for the Characters current tile:


		if(typeof tileEvents[toIndex(this.tileTo[0], this.tileTo[1])]!='undefined')
		{

If there is, we'll call the corresponding function, passing a reference to the Character (this) as an argument, in case the function wants to do something with the Character directly, and then close this if block:


			tileEvents[toIndex(this.tileTo[0], this.tileTo[1])](this);
		}

Save the HTML document and load it up, or load our online example, and try moving your Character to the bits of path tile directly to the right, or directly down, from the starting position!

Page loaded in 0.01 second(s).