Phaser.WEBGL doesn't move tilemap (CANVAS works,but slow)

[KurtVanHal]

Hi guys,

I'm having some difficulty getting my map working. When using the Phaser.CANVAS everything works, but when scrolling through the map there is a lot of lag. When using the Phaser.WEBGL the map doesnt render when I move my player. Any thoughts...

This is the basic code (very simple). It uses 1 layer (30_25 (32_32 tile))

var game = new Phaser.Game(800, 600, Phaser.WEBGL, 'phaser-example', { preload: preload, create: create, update: update, render: render });

function preload() {

game.load.tilemap('map', 'assets/tile.json', null, Phaser.Tilemap.TILED_JSON);
game.load.image('tiles', 'assets/tiles.png');
game.load.spritesheet('player', 'assets/player.png',60,60,5);

}

var map;
var layer;

var cursors;
var sprite;

function create() {

game.physics.startSystem(Phaser.Physics.ARCADE);
game.stage.backgroundColor = "#000000";
map = game.add.tilemap('map');

map.addTilesetImage('tiles', 'tiles');

layer = map.createLayer('Tilelaag 1');


layer.resizeWorld();

 map.setCollision([48]);

sprite = game.add.sprite(450, 1500, 'player');
sprite.anchor.setTo(0.5, 0.5);
game.physics.enable(sprite);
sprite.body.collideWorldBounds = true;



game.camera.follow(sprite);

cursors = game.input.keyboard.createCursorKeys();

}

function update() {

game.physics.arcade.collide(sprite,layer);

sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;


if (cursors.left.isDown)
{
    sprite.body.velocity.x = -200;
}
else if (cursors.right.isDown)
{
    sprite.body.velocity.x = 200;
}

if (cursors.up.isDown)
{
    sprite.body.velocity.y = -200;
}
else if (cursors.down.isDown)
{
    sprite.body.velocity.y = 200;
}

}

function render() {

}

Thx in advance

[pnstickne]

@KurtVanHal Which Phaser version is being used? And are the same issues present in the "dev" branch?

• WebGL on dev: http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=sci%20fly.js&t=sci%20fly&phaser_version=dev&
• Canvas on dev: http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=csv%20map%20collide.js&t=csv%20map%20collide&phaser_version=dev&

There was a WebGL issue for a spot - I can't remember which version(s) - where the texture were not updated correctly and so the map didn't scroll (affected WebGL only). There has also been recent work done to improve the tilemap scrolling performance, that can be found in "dev" as well.

[KurtVanHal]

Hi pnstickne,

First off, thx for the quick reply. Both examples work great. The version I'm using is Phaser v2.1.3.
Is it possible to download the dev version? Or would you recommend using a different version?

Thx in advance

EDIT
Changing my Phaser version did the trick. However, I was wondering if there were certain limitations as to the tilemap I have to take into consideration in order to avoid lag? max size, max layers...

Thx to all

[pnstickne]

@KurtVanHal I'm glad to hear that the future versions solve the problems! Right now "dev" is scheduled for the 2.2.0 release (it's RC stages!), but I'm not sure exactly when that will be.

Obtaining a build is as simple as grunt build and waiting a few minutes after having clone'd the Phaser repo locally - and I do recommend basing new work off of dev/2.2 - there are a few [new] bugs to work out and few small compatibility changes, but this is the branch I support. I do not know of where to get a "pre-built dev" version.

Right now the limitations with tilemap are .. uhm, "soft". The more on-screen tiles that need to be redrawn the slower it will run when scrolling - the new "dev" rendering greatly reduces the number of tiles that are redrawn, which is what results in the performance increase. Adding more visible tilemaps increases the number of tiles that need to be redrawn, so it's something you'll have to test! However, given a tilemap that is 32x32 when shown, I would expect the "dev" branch to be able to render 16+ tilemap layers when casually scrolled (and not invalidated) with the same performance as with a single layer previously.

There is no optimization specifically for multiple layers, and each layer is rendered separately (this is cool in that layers can be stacked and moved independently, but it doesn't optimize for some common cases) - one drawback is that for 16 visible layers, there are 16 canvases created! Only the number of visible tiles should affect rendering performance, while off-screen tiles will only affect memory usage (but not performance unless available memory becomes a factor).

Also, causing a tilemap to invalidate (ie. using putTile) will force it to be refreshed - don't do this often when the game is running or the rendering performance will revert to pre-"dev" (or worse) levels.

[KurtVanHal]

@pnstickne Thx for the information. Let's get to work then ;)

[tajnymag]

Has anything changed since the last post? I am experiencing the same problem. On computer the scrolling is not smooth but the game is playable. Unfortunately I can't say the same about phone experience. When the camera is not moving I get 60fps but at the moment the camera moves, the framerate drops to 4fps.

[photonstorm]

The Tilemap updates talked about in this thread have been part of Phaser for over a year now, and haven't updated since then.