Jump to content

animated tilemap


Recommended Posts

  • 3 weeks later...

is this even possible to achieve? does anyone know?


ive done it now like this:

// in game.create:setInterval(map.animateWater, 100);//in my map object    waterTiles:[26,27,28,29,30,31],    waterTileIndex:0,    animateWater : function(){        var mapTiles = game.layer0.layer.data;        var index;        //screenSpritesCountW: tiles visible in screen (width)        for(var x = 0; x < map.screenSpritesCountW +1; x++){            for (var y = 0; y < map.screenSpritesCountH +1; y++) {                //offsetY: offset from y=0 in tiles                var m = mapTiles[y+map.offsetY][x+map.offsetX];                index = map.waterTiles.indexOf(m.index);                index++;                index %= map.waterTiles.length;                //finally changing the tileface                m.index = map.waterTiles[index];            }        }        //trigger the stagerendering        game.layer0.dirty = true;    },

I dont know whether this is efficient, since all tilemaps get new indices (not only those who are in the camera view)


is there a better way to achieve this?


edit: I was able to reduce the cost a little - i only recalculate those water tiles which are currently visible - still having 10-15 fps less

Link to comment
Share on other sites

* maybe in your create() function, loop through your map and store an array mapWaterTiles[] of *just* the water tiles.. you don't want to have to loop through the whole map on each frame. 


* if you know the x & y position of each tile in your mapWaterTiles[] array you should be able to work out which of those are on screen... only animate those (which I think you started to do)


* length is supposedly a slow function.. keep a variable containing this value, then you don't need to keep doing a lookup. (it's in the last but one point here http://www.html5gamedevs.com/topic/9931-mobile-performance-tips-tricks/) 

however I'm wondering if that 'length' issue was specfically about DOM objects eg http://jonraasch.com/blog/10-javascript-performance-boosting-tips-from-nicholas-zakas .. compared to my example here http://jsfiddle.net/j5csge2z/4/ .. so i'm not actually sure about this.. the best thing to do is run your own Phaser-specific test

Link to comment
Share on other sites

I finally had the chance to test those two proposals.


to jmp909:

I would have to completely restructure my map.json, since its a different type of layer.

Half of my map is water and i feel `createFromObjects` is not supposed to be used in such vast amounts.


to Skeptron:

I think this is what Im needing, unfortunately its not compatible to the current phaser version :(

i have to wait until Chad Engler has time again for this

Link to comment
Share on other sites

  • 1 year later...
  • 1 month later...

Just a shameless plug for my own library, but you might want to try out this: https://www.npmjs.com/package/phaser-tilemap-plus

It plugs into your code without requiring changes to how you load your map, however, you can enable tile animations with a simple call, like so:


The plugin also supports sloped and curved tile collisions and other features are planned.


Link to comment
Share on other sites


  • Recently Browsing   0 members

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