TileMap PutTile causing FPS issues

[imsupergreg]

Hey everyone!

 

First post here, so bare with me a bit.  I have started my first Phaser game and I've got the core of the game put together now.  However, I have a problem where I'm experiencing some pretty serious FPS problems.  In my game, a character moves around the map and the tiles they walk onto change colours.  Each time a new colour is drawn the game lags.

 

I use a basic TileMap with only 1 layer that is in JSON format.  I use the TileMap.PutTile() function to change the colour of each tile.  The image used for this tile is a very simple <1KB png image which is basically just a single colour.  I wouldn't expect that drawing a single tile would cause such lag.  I'm certain that the "putTile" line is the problem as if I remove it then there isn't a stitch of lag.

 

 

// Pre-loading the tilemap and the tile

game.load.tilemap('map', 'assets/maps/TileMap5.json', null, Phaser.Tilemap.TILED_JSON);

game.load.image('tile-danger-zone', 'assets/images/tiles/tile-danger-zone.png', true);

 

// Create map layer

map = game.add.tilemap('map');

mapLayer = map.createLayer('Tile Layer 1');

 

// Fill the tile -- once per player movement

map.putTile(DANGER_ZONE_ID, x, y, mapLayer);           <-- this lags a fair bit (ie. 60fps -> 20fps)

 

 

Am I doing something wrong in my practice here?  Is there a more lightweight of doing this that wouldn't cause this lag?  

 

http://phaser.io/examples/v2/tilemaps/blank-tilemap

^ Given this example, the putTile method shouldn't be a problem at all.  Weird!?!

 

The game can be found here if you want to see the problem:

http://www.supergaming.comxa.com/

 

Thanks for any help!  Let me know if you need any further information.