Jump to content

Dynamically loading tilemaps.


What?
 Share

Recommended Posts

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...