Forums » Help » Preload Images for animationsheet

hi, i have a small problem in my game. i create a lot of entities and kill them again and again. and sometime it happens, that the js cant get the image fast enought and so the entity is invisible :)

i have 10 images for the animsheets and create them like

this.animSheet = new ig.AnimationSheet( 'image'+balltype+'.png', 86, 86 );

can i preload these images so this will not happen again?

Make sure your AnimationSheets are loaded by the pre-loader. See Working with Assets.

Also, you probably shouldn't change the .animSheet property dynamically. Just load several AnimationSheets and use the ig.Animation constructor directly to specify the anim sheet, instead of the .addAnim() shorthand. Something like this:

EntityTest = ig.Entity.extend({
	animSheets: {
		steel: new ig.AnimationSheet( 'imagesteel.png', 86, 86 ),
		marble: new ig.AnimationSheet( 'imagemarble.png', 86, 86 )	
	},
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		this.anims.foo = new ig.Animation( this.animSheets.steel, 0.1, [0,1,2] );
		this.anims.bar = new ig.Animation( this.animSheets.marble, 0.1, [0,1,2] );
	},
	
	update: function() {		
		if( something ) {
			this.currentAnim = this.anims.foo;
			
		}
		else if( somethingElse ) {
			this.currentAnim = this.anims.bar;
		}
		
		this.parent();
	}
});

thx a lot dominic, awesome service!

So I also had this similar problem on Chrome that some images are "sometimes" not visible without any error or warning on the console.

After a lot of hair pulling, I moved the images to the 'preloader' from the init() and the problem solved.

But I still don't understand why the image becomes permanently invisible once it misses to load during execution?