Objects and Layered rendering

Map Objects

Now we've begun making our map engine more robust, we'll look at adding fixed-position objects to the game map, and using multi-level drawing to draw objects on different layers.

Firstly, we'll be using a slightly updated tileset image to provide these new object graphics.

Tileset
Map objects and layers example

Object types

In the globals area at the top of our code, we'll add some code to handle the way in which objects can handle collision; at the moment we'll just have two object collision types, solid, which cannot be passed through, and none, which will not block characters movement.

var objectCollision = {
	none		: 0,
	solid		: 1
};

We'll now create our list of object types, objectTypes. Each entry will associate a numeric ID with a map of key/value pairs describing the object. The properties required for each object will be name, which is just a string naming the object type (we aren't making use of this yet, but it may come in handy later, and really helps identifying the object in the list); sprite, which as with previous sprites is an array of frame objects that specify the x, y position of the frame on the tileset, and w, h that specify the frame dimensions.

Objects also an offset property, which is the offset in pixels the sprite will be drawn at relative to the top-left of the tile on which the object is placed, a collision property specifying the objectCollision property of the object type, and zIndex - the layer on which the object will be drawn.

var objectTypes = {
	1 : {
		name : "Box",
		sprite : [{x:40,y:160,w:40,h:40}],
		offset : [0,0],
		collision : objectCollision.solid,
		zIndex : 1
	},
	2 : {
		name : "Broken Box",
		sprite : [{x:40,y:200,w:40,h:40}],
		offset : [0,0],
		collision : objectCollision.none,
		zIndex : 1
	},
	3 : {
		name : "Tree top",
		sprite : [{x:80,y:160,w:80,h:80}],
		offset : [-20,-20],
		collision : objectCollision.solid,
		zIndex : 3
	}
};

MapObject class

Objects on our map will be tracked by MapObject class instances. The class instances are created with one argument, the id of the object type in the objectTypes array, and also have x, y properties that will be set later.

function MapObject(nt)
{
	this.x		= 0;
	this.y		= 0;
	this.type	= nt;
}

The MapObject class has a placeAt method, which takes 2 arguments; the x, y (nx, ny) position at which the object should be placed on the map. Firstly, this method checks if the object is already placed on a map tiles. If so, it begins by removing that association:

MapObject.prototype.placeAt = function(nx, ny)
{
	if(mapTileData.map[toIndex(this.x, this.y)].object==this)
	{
		mapTileData.map[toIndex(this.x, this.y)].object = null;
	}

We can then set the x, y position of this object, and set the Tile.object property of the corresponding tile in the mapTileData global to reference this object.

	this.x = nx;
	this.y = ny;
	
	mapTileData.map[toIndex(nx, ny)].object = this;
};
Page loaded in 0.014 second(s).