Dynamically loading tilemaps.

[What?]

I'm trying to make a metroid-style game, and I want a new tilemap to be loaded whenever the player crosses the screen bounds. What's the best way to do this?

[deletedacc]

I would also like to know how to do this.

[What?]

So far from just researching and trying things out, It doesn't seem possible to display multiple tilemaps at the same time. It still seems like I should be able to destroy the old map and on the next line replace it with a new one, though. It's just that when I use the destroy() method, I get an error that says "this.game is null". I don't really know how to use it properly I guess.

[What?]

Update, I got something working. This script loads tilemap #1, destroys it after a second, loads tilemap #2, and then destroys that.

var run = run || {};run.Game = function(){};run.Game.prototype = {	preload: function()	{		//load the tilemaps		this.load.tilemap('testLevel', 'assets/tile/testmap.json', null, Phaser.Tilemap.TILED_JSON);		this.load.tilemap('testLevel2', 'assets/tile/testmap2.json', null, Phaser.Tilemap.TILED_JSON);	},	create: function()	{		x = 0;		//create the first tilemap		this.new_map('testLevel');	},	update: function()	{		x += 1;		if(x > 60		&& x < 120)		{			//destroy the first tilemap and add a new one			map.destroy();			foreground.destroy();			this.new_map('testLevel2');		}		if(x >= 120)		{			//destroy the second tilemap			map.destroy();			foreground.destroy();		}	},	new_map: function(name)	{		//add the tilemap		map = this.game.add.tilemap(name);				//add tileset image		map.addTilesetImage('grass', 'jungleTiles');		//create layer		foreground = map.createLayer('foreground');	},};

The one thing missing is that the tilemaps still need to be loaded in the preload function, instead of in the "new_map" function like I'd like it to be. I think I need to manually start the loader myself.

[xerver]

Loading and creating tilemaps on the fly is pretty easy with my Tiled plugin:

 

https://github.com/englercj/phaser-tiled

 

A tiledmap is just a scene object like any other, so you can add one whenever you want and position it however you want. You still need to load the data, but you can do that on the fly no problem.

[What?]

Loading and creating tilemaps on the fly is pretty easy with my Tiled plugin:

 

https://github.com/englercj/phaser-tiled

 

A tiledmap is just a scene object like any other, so you can add one whenever you want and position it however you want. You still need to load the data, but you can do that on the fly no problem.

 

I would use that, but you say that the only physics engine it supports right now is P2, and I'm using arcade.

[What?]

I think I finally found the solution. Here's my code:

var run = run || {};run.Game = function(){};run.Game.prototype = {	create: function()	{		newMapName = '';		x = 0;		this.load_map('testmap');	},	update: function()	{		x += 1;		if(x > 60		&& x <= 61)		{			//destroy the first tilemap and add a new one			map.destroy();			foreground.destroy();			this.load_map('testmap2');			console.log(newMapName);		}		if(x > 120		&& x <= 121)		{			//destroy the second tilemap			map.destroy();			foreground.destroy();			this.load_map('testmap');			console.log(newMapName);		}	},	new_map: function(name)	{		//add the tilemap		map = this.game.add.tilemap(name);		//add tileset image		map.addTilesetImage('grass', 'jungleTiles');		//create layer		foreground = map.createLayer('foreground');	},	load_map: function(name)	{		this.load.tilemap(name, 'assets/tile/' + name + '.json', null, Phaser.Tilemap.TILED_JSON);		newMapName = name;		//begin the loading process		this.load.start()		//on complete, call the "load_map_success" function		this.load.onLoadComplete.add(this.load_map_success, this);	},	load_map_success: function()	{		//call the "new_map" function		this.new_map(newMapName);	},};

It all works and I'm happy. Still, somebody warn me if I'm doing something wrong here.

[xerver]

I would use that, but you say that the only physics engine it supports right now is P2, and I'm using arcade.

 

I should probably add support for Arcade, I think a lot of people use it.

 

Added an issue to track it: https://github.com/englercj/phaser-tiled/issues/19