Forums » Help » Multiple background animations

Hi!

I am trying to animate to elements on the background. I followed the method described in the docs placing the following code in the main.js:

var vent = new ig.AnimationSheet( 'media/FanSheet-wCover.png', 80, 80 );
	this.backgroundAnims = {
	'media/FanSheet-wCover.png': {
        0: new ig.Animation( vent, 0.1, [0,1,2] )
        
    }
};
		
	
var light = new ig.AnimationSheet( 'media/GlowWarnLights_Sheet_v2.png', 240, 240 );
	this.backgroundAnims = {
	'media/GlowWarnLights_Sheet_v2.png': {
        0: new ig.Animation( light, 0.1, [0,1,2,3,4,5] )
       
    }
};

What happens then is that only one of those two gets animated (the second one). And this is logical. But how to get animated both?

Thank you!

When you set the this.backgroundAnims = {...} you are essentially overwriting the complete backgroundAnims object with a new one, instead of extending it.

So either set the animations for each tileset in the backgroundAnims object separately, like this:

var vent = new ig.AnimationSheet( 'media/FanSheet-wCover.png', 80, 80 );
this.backgroundAnims['media/FanSheet-wCover.png'] = {
	0: new ig.Animation( vent, 0.1, [0,1,2] )
};

var light = new ig.AnimationSheet( 'media/GlowWarnLights_Sheet_v2.png', 240, 240 );
this.backgroundAnims['media/GlowWarnLights_Sheet_v2.png'] = {
	0: new ig.Animation( light, 0.1, [0,1,2,3,4,5] )
};

Or do it all at once, like this:

// load all animation sheets
var vent = new ig.AnimationSheet( 'media/FanSheet-wCover.png', 80, 80 );
var light = new ig.AnimationSheet( 'media/GlowWarnLights_Sheet_v2.png', 240, 240 );

// define all background anims
this.backgroundAnims = {
	'media/FanSheet-wCover.png': {
		0: new ig.Animation( vent, 0.1, [0,1,2] )
	},
	'media/GlowWarnLights_Sheet_v2.png': {
		0: new ig.Animation( light, 0.1, [0,1,2,3,4,5] )
	}
};

Thank you Dominic, this has done the trick!