animated tilemap

[InsOp]

hey i made a background just like in that example:

 

http://phaser.io/examples/v2/loader/load-tilemap-json

 

now i have like waterfields and i want them to be animated,

how do i achieve this (with this method)?

[piotr]

Have you already checked this example for tile-based water animation?

http://phaser.io/examples/v2/tile-sprites/tile-sprite-from-animated-sprite

[InsOp]

Sorry I dont see how i can apply your example to my example

[InsOp]

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

[jmp909]

* 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

[jmp909]

actually I think this is what you're looking for (although it looks slightly broken)

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=create+from+objects.js&t=create%20from%20objects

[Skeptron]

Maybe this plugin could be your solution : https://github.com/englercj/phaser-tiled#why-use-this-plugin

 

See original post : http://www.html5gamedevs.com/topic/9573-phaser-tiled-plugin/

[InsOp]

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

[jmp909]

i would check how fast swap/replace tiles works:

http://phaser.io/examples/v2/tilemaps/swap-tiles

http://phaser.io/examples/v2/tilemaps/replace-tiles

 

i know off-screen tiles aren't rendered so those might just have their references updated

http://www.html5gamedevs.com/topic/9356-how-are-huge-tilemaps-being-painted/?p=55409

[InsOp]

thanks I did try that, even with a given smaller area its far too slow - i checked the replace function and what it does is just what im doing manually, but significantly slower..

[juandelossantos]

 

On 8/10/2015 at 11:54 PM, jmp909 said:

actually I think this is what you're looking for (although it looks slightly broken)

http://examples.phaser.io/_site/view_full.html?d=tilemaps&f=create+from+objects.js&t=create%20from%20objects

Thanks, I had the same doubt, with this example, I found the solution! 

[colinvella]

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:

game.tilemap.plus.animation.enable();

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