Phaser multiple tilemaps + moving them around

[oxysoft]

I am making an "infinite runner" type of game where the map is seemingly infinite. The maps will not be procedurally generated but an arrengement of segments instead. I have devised a SegmentManager type of structure in my code which would push new segments to the end as the player's actor reach the end of the buffered segments.

 

It seeks the segments in batches of 5 since most segments are around 10 tiles worth of 16 pixels in width each. It would be enough to cover up a nice distance until more segments have to be buffered. Segments that are already passed and are no longer needed are discarded and possibly reused for later buffering.

 

Each segments of course consist of tiled maps that can all be put together back to back and will look good at all time.

 

This implementation has worked fine in my previous codebase which was put together using LibGDX and Java. I have ported the code to es6 because I want to learn more about Phaser since it seems like a very nice framework to hack up games really quickly, but I seem to have hit a wall.

 

So far, it seems nearly impossible to have multiple tilemaps and move them around the scene.

 

So is there a correct way to do this? It seems like a bad design to me and I should be able to have multiple maps that can be moved about, and that are all independant of each other.

 

I have read that certain workarounds will break collisions as well, which is undesirable since I will at some point want collisions to happen on certain layers of these segments

[kieve]

Hey,

 

I actually ran into a similar problem not long ago, see my post http://www.html5gamedevs.com/topic/13117-how-to-position-multiple-tilemaps/

 

I've managed to create multiple tile maps and moved them around. I haven't tried to use the collision layers, because my collision "elements" were smaller than a single tile. Instead, I make use of an object layer that represents all the locations where walls will be, with custom width and height properties.

 

It can be done.

[oxysoft]

Hey,

 

I actually ran into a similar problem not long ago, see my post http://www.html5gamedevs.com/topic/13117-how-to-position-multiple-tilemaps/

 

I've managed to create multiple tile maps and moved them around. I haven't tried to use the collision layers, because my collision "elements" were smaller than a single tile. Instead, I make use of an object layer that represents all the locations where walls will be, with custom width and height properties.

 

It can be done.

 

Hey thanks, it seems to work! I wrote these two functions to make it easier to create the layers and objects in the proper rendering order. It could be useful to someone!

createLayer(name) {		if (this.map.getLayer(name) === null)			return;		let layer = this.map.createLayer(name);		this.layers.push(layer);	}	createObjects(name, gid, key, index = -1, group = this.game.world) {		if (this.map.objects[name] == undefined)			return;		let sprite;		for (let i = 0, len = this.map.objects[name].length; i < len; i++) {			if (this.map.objects[name][i].gid == gid || gid == -1) {				sprite = new Phaser.Sprite(this.game, this.map.objects[name][i].x + this._x, this.map.objects[name][i].y, key, index == -1 ? this.map.objects[name][i].gid - 1 : index);				sprite.name = this.map.objects[name][i].name;				sprite.visible = true; // this.map.objects[name][i].visible				sprite.autoCull = false;				sprite.exists = true;				sprite.y -= sprite.height;				group.add(sprite);				for (let prop in this.map.objects[name][i].properties) {					group.set(sprite, property, this.map.objects[name][i].properties[prop], false, false, 0, true);				}			}		}	}

Usage

// waterthis.createLayer('water');// terrain 1this.createLayer('terrain');// objects 1this.createObjects('objects', -1, 'tileset');// terrain 2this.createLayer('terrain2');// objects 2this.createObjects('objects2', -1, 'tileset');

And here is the result!

 

https://gfycat.com/AmusingAgreeableGrub