Slow tilemap :c

[YTPo0OP]

 

Hi everyone !

I'm trying to display a part of a huge tilemap, so I think I have to add sprites in the render part like this :

	function preload() {		game.load.image('tile', 'graphics/tile1.png');	}	var map_x = 100;	var map_y = 100;	var map = new Array(map_y);	for (var i = 0; i < map_y; i++) {		map[i] = new Array(map_x);	}	var tiles = map;	var speed = 4;	var draw = true;	function create() {		game.world.setBounds(0, 0, 32 * map_x, 32 * map_y);		cursors = game.input.keyboard.createCursorKeys();		mapen.generate(map, level, map_x, map_y); // Generate a map in map.js		game.camera.setPosition(map_x * 16 - 600, map_y * 16 - 335);	}// Update function with movements	function render() {		//TODO: render map		var poscx = Math.floor(game.camera.x / 32);		if (poscx < 0)			poscx = 0;		var poscy = Math.floor(game.camera.y / 32) - 1;		if (poscy < 0)			poscy = 0;		for (var y = poscy; y < poscy + 23; y++) {			for (var x = poscx; x < poscx + 39; x++) {				switch (map[y][x]) {					case 0:						break;					case 1:						tiles[y][x] = game.add.sprite(32 * x, 32 * y, 'tile');						break;				}			}		}	}}; 

When I move the tilemap, the game become slower and slower...

I tried to display all the tiles at once in the create() part but it's slow too :c

I think I need to create in memory each tile and then display the one I need or delete the useless tiles, but I don't really see how I could do that !

 

Thanks for your help !

[rich]

If I understand your code - You're using 1 sprite per Tile in the tilemap? And creating them in the render loop?

 

Yikes, no wonder it's slowing down. Do they need to be Sprites? Really?

[YTPo0OP]

Can I change my array into a phaser tilemap ? It would be easier to render   

[ctmartinez1992]

i think that the question is: why are you creating the sprite in the render method?

[YTPo0OP]

i think that the question is: why are you creating the sprite in the render method?

I need to display a 39*23 portion of the tilemap around the player. I tried displaying all the tilemap at once but it is laggy :/

Could you give me some ideas ? Thanks 

[YTPo0OP]

Okay I managed to get it working

I change my Array into a JSON with this function :

Map.prototype.createJSON = function(map) {	var jsontext = "{ \"height\":200, \"layers\":[{\"data\":[" + map.join(",") + "],\"height\":200,\"name\":\"Calque de Tile 1\",\"opacity\":1,\"type\":\"tilelayer\",\"visible\":true,\"width\":200,\"x\":0,\"y\":0}],\"orientation\":\"orthogonal\",\"properties\":{},\"tileheight\":16, \"tilesets\":[{\"firstgid\":1,\"image\":\"graphics\/sprites_bank.png\",\"imageheight\":192,\"imagewidth\":176,\"margin\":0,\"name\":\"sprites_bank\",\"properties\":{},\"spacing\":0,\"tileheight\":16,\"tilewidth\":16}], \"tilewidth\":16, \"version\":1, \"width\":200}";	return jsontext;};