Forums » Help » Background Tile Animation

Hi, I have been trying to animate the background but I dont seem to be able to get the animated tiles to display . I have looked at the example Docs (so i load the backgroundAnims before the load level).

Does anyone have a working example / source i can look at to see what i am doing wrong.

Thanks Stuart

I use this extensively in my game. I'll post something later when i have time. For example, my water tiles have wavy motion. For now, this is what I have in main.js to make it work -- before loading the level

// animate water on background map
			var water = new ig.AnimationSheet( 'media/oceanSeqeunce256_64.png', 64, 64 );
			var lava = new ig.AnimationSheet( 'media/lavaSeqeunce256_64.png', 64, 64 );
			var fire = new ig.AnimationSheet( 'media/fire.png', 256, 64 );
			this.backgroundAnims['media/oceanSeqeunce256_64.png'] = {
				0: new ig.Animation( water, 0.2, [0,1,2,3] ),
				1: new ig.Animation( water, 0.3, [0,1,2,3] ),
				2: new ig.Animation( water, 0.2, [0,1,2,3] ),
				3: new ig.Animation( water, 0.3, [0,1,2,3] ),
				4: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				5: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				6: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				7: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				8: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				9: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				10: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				11: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				12: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				13: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				14: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				15: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				16: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				17: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				18: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() ),
				19: new ig.Animation( water, this.getRnd(), this.getRndWaterTileSeqence() )
			},
			this.backgroundAnims['media/lavaSeqeunce256_64.png'] = {
			
				0: new ig.Animation( lava, 0.2, [0,1,2,3] ),
				1: new ig.Animation( lava, 0.3, [0,1,2,3] ),
				2: new ig.Animation( lava, 0.2, [0,1,2,3] ),
				3: new ig.Animation( lava, 0.3, [0,1,2,3] ),
				4: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				5: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				6: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				7: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				8: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				9: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				10: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				11: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				12: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				13: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				14: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				15: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				16: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				17: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				18: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() ),
				19: new ig.Animation( lava, this.getRnd(), this.getRndWaterTileSeqence() )
			},
			this.backgroundAnims['media/fire.png'] = {
			
				0: new ig.Animation( fire, 0.15, [0,1,2,3,4] )
				
			};
			
			// Load the LevelWorldmap as required above ('game.level.worldmap')
			this.loadLevel(LevelWorldmap);

Thanks for the reply, I have pretty much the same code (for waves too). What i was missing was loading the tileset for the waves on a new layer in wm.

working now :) thanks for the example code just made it a lot quicker to work out what i was missing.

Stuart

Here's how I do it

Animation demo


source files

media files

Hi, Just wanted to say thanks for taking the time to post the example screen shot , source and media.

all working now :)

Thanks stuart