Jump to content

Avoid stacking tilemaps?


Recommended Posts

Hey guys,


i got a litte problem. Im working on a project for my school and now i got the problem that my world is stacking tilemaps, which causes lags after sometime.
I dont know how i can avoid it to stack the tilemaps.....

Here u can test it if u dont understand what i mean: http://aincrad.us/game/ (Go into a house and go back to the world and do this some times and it will be laggy as hell!)

My JS Codes can be fully watched on http://aincrad.us/game/js/

But here is my index.html which handel the "loading" in parts.

<!doctype html>
        <meta charset="UTF-8" />
        <script src="phaser.min.js"></script>
			body { 
				margin: 0 auto;
				margin-top: 50px;
				width: 329px;
				height: 288px;
				background-color: black;
		<script src="js/functions.js"></script>
		<script src="js/variables.js"></script>
		<script src="js/player.js"></script>
		<script src="js/map.js"></script>
    <script type="text/javascript">
    window.onload = function() {
		//Get windosize
		var Width = 0, Height = 0;
		Width = window.innerWidth - 20;
		Height = window.innerHeight - 20;
		//Create GameWindow
		//Pokemon Width = 144, Height = 160
        game = new Phaser.Game(320, 288, Phaser.AUTO, '', { preload: preload, create: create, update: update, render: render });

		//General Game
        function preload () {
			game.load.spritesheet('player', 'resources/sprites/bonus1.png', 26, 36);
			game.load.tilemap('citySylia', 'resources/level/stadt_sylia.json', null, Phaser.Tilemap.TILED_JSON);
			game.load.tilemap('house01', 'resources/level/haus01.json', null, Phaser.Tilemap.TILED_JSON);
			game.load.spritesheet('trainer', 'resources/background/secret.png', 16, 16);
			game.load.tilemap('secretAlabastia', 'resources/level/stadt_alabastia.json', null, Phaser.Tilemap.TILED_JSON);

			game.load.image('tileOutside', 'resources/background/outside.png');
			game.load.image('tileWater', 'resources/background/water.png');
			game.load.image('tileHouse', 'resources/background/house.png');
			game.load.image('tileInside', 'resources/background/inside.png');
			game.load.image('tileSecret', 'resources/background/secret.png');

        function create () {

			cursor = game.input.keyboard.createCursorKeys();
		function update () {
			game.physics.arcade.collide(player, collision);
			if(map.key === 'secretAlabastia' && player.key === 'player') {
			var mapKey = overlapCallback(map.key, player.body);
			if(mapKey != '') {
				if(isHouse(map.key)) {
				} else {

		function render() {
			//game.debug.spriteInfo(player, 32, 32);


The fully plaintext can be used by everyone. ;)

Does anyone know how i can fix my map stacking?

Link to comment
Share on other sites

Problem is, even if you reinitialize your map, the old map is preserved in memory because Phaser keeps references to it, too.  Try adding this to your loadPlace functions:



//recreate map and layers

Here's an example in a Ludum Dare game I made not long ago:

Check out the _createMap function.

Link to comment
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

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