Forums » Help » Background animation & random scatter

Hey,

So I'm trying to get a set of stars to be randomly placed on the level and animate. I've tried various ways of getting this to work but I havent been able to get it to work.

This works on getting on getting the stars to appear in a somewhat random placement, but animation doesn't work and when the player moves to the left the stars one repopulate:

init: function() {
			ig.input.bind(ig.KEY.RIGHT_ARROW,'right');
			ig.input.bind(ig.KEY.ENTER, 'ok');
			
			this.map = [
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
			];
			
			for(var x = 0; x < 10; x++){
				this.map[x] = this.getColumn(); 
			}
			
			this.collisionMap = new ig.CollisionMap (7, this.map);
			this.backgroundMaps.push(new ig.BackgroundMap(7, this.map, 'media/stars1.png'));
			//var bg_animation = new ig.AnimationSheet('media/stars1.png',7,7);
			//bg_anim = new ig.Animation(bg_animation, 0.1, [0,1,2,3,4,5]);
			this.player = this.spawnEntity(EntityPlayer, ig.system.width/2-2, 16);
			
			// var star1 = new ig.AnimationSheet('media/stars1.png',7,7);
			// 			var star2 = new ig.AnimationSheet('media/stars2.png',7,7);
			// 			this.backgroundAnims['media/stars1.png'] = {
			// 					0:new ig.Animation(star1, 0.1, [0,1,2,3,4,5])
			// 				},
			// 				'media/stars2.png':{
			// 					0:new ig.Animation(star2, 0.1, [0,1,2,3,4,5])
			// 				}
			// 			}
		},

This was another attempt but with the same results:

init: function() {
			ig.input.bind(ig.KEY.RIGHT_ARROW,'right');
			ig.input.bind(ig.KEY.ENTER, 'ok');
			
			this.map = [
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
			];
			
			for(var x = 0; x < 10; x++){
				this.map[x] = this.getColumn(); 
			}
			
			this.collisionMap = new ig.CollisionMap (7, this.map);
			this.backgroundMaps.push(new ig.BackgroundMap(7, this.map, 'media/stars1.png'));
			var bg_animation = new ig.AnimationSheet('media/stars1.png',7,7);
			bg_anim = new ig.Animation(bg_animation, 0.1, [0,1,2,3,4,5]);
			this.player = this.spawnEntity(EntityPlayer, ig.system.width/2-2, 16);
			
			// var star1 = new ig.AnimationSheet('media/stars1.png',7,7);
			// 		var star2 = new ig.AnimationSheet('media/stars2.png',7,7);
			// 		this.backgroundAnims = {
			// 			'media/stars1.png':{
			// 				0:new ig.Animation(star1, 0.1, [0,1,2,3,4,5])
			// 			},
			// 			'media/stars2.png':{
			// 				0:new ig.Animation(star2, 0.1, [0,1,2,3,4,5])
			// 			}
			// 		}
		},

I also tried this method with backgroundAnims:

init: function() {
			ig.input.bind(ig.KEY.RIGHT_ARROW,'right');
			ig.input.bind(ig.KEY.ENTER, 'ok');
			
			this.map = [
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
				[0,0,0,0,0,0,0,0,0,0],
			];
			
			for(var x = 0; x < 10; x++){
				this.map[x] = this.getColumn(); 
			}
			
			this.collisionMap = new ig.CollisionMap (7, this.map);
			// this.backgroundMaps.push(new ig.BackgroundMap(7, this.map, 'media/stars1.png'));
			// 			var bg_animation = new ig.AnimationSheet('media/stars1.png',7,7);
			// 			bg_anim = new ig.Animation(bg_animation, 0.1, [0,1,2,3,4,5]);
			this.player = this.spawnEntity(EntityPlayer, ig.system.width/2-2, 16);
			
			var star1 = new ig.AnimationSheet('media/stars1.png',7,7);
			var star2 = new ig.AnimationSheet('media/stars2.png',7,7);
			this.backgroundAnims = {
				'media/stars1.png':{
					0:new ig.Animation(star1, 0.1, [0,1,2,3,4,5])
				},
				'media/stars2.png':{
					0:new ig.Animation(star2, 0.1, [0,1,2,3,4,5])
				}
			}
		},

Thanks and any ideas?

http://clokwork.net/2012/03/07/particle-generation-in-impactjs/