How to sync tilemap animations on an FlxTilemapExt? [Solved]



  • I have been using the TiledMap editor addon to load .tmx data from Tiled Editor, including tilemap layers with animated tiles.

    I've found loading the animated tiles doesn't guaruntee that they are in sync. Even when they are animations on the same layer.

    In other words, I have a set of Animated Tiles A, B, C. Each tile has the same animation. After I have loaded that TiledLayer as an FlxTileMapExt and added it to my FlxState --- I see the animations are out of sync, on the same layer!

    I haven't the foggiest idea of how to prevent it. For the most part its not getting in the way of the aesthetics of the game, but it's something I'd really prefer to have control over.

    Edit: Woops! I found the solution. It was really simple. I've been using pieces of the code from the TiledLevel.hx demo. The function 'getAnimatedTile' created this problem:

    private function getAnimatedTile(_pr:TiledTilePropertySet, _ts:TiledTileSet):FlxTileSpecial
    {
    	var special = new FlxTileSpecial(1, false, false, 0);
    	var n:Int = _pr.animationFrames.length;
    	var offset:Int = Std.random(n); // this line put the animations out of sync
    	special.addAnimation(
    		[for (i in 0...n) _pr.animationFrames[(i + offset) % n].tileID + _ts.firstGID],
    		(1000 / _pr.animationFrames[0].duration)
    	);
    	return special;
    }
    

    I've commented the relevant line. The source was using Std.random to intentionally load each animation starting at a random frame. If you are using this source code too, and want to sync specific animations, add a custom property to the animated tile in Tiled. Then check for that property in the code, and use it as a flag to create FlxSpecialTiles whose animations always begin on the same index/frame.


Log in to reply
 

Looks like your connection to HaxeFlixel was lost, please wait while we try to reconnect.