InsOp

animated tilemap

Recommended Posts

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

Share this post


Link to post
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

Share this post


Link to post
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

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Loading...

  • Recently Browsing   0 members

    No registered users viewing this page.