Forums » Impact Engine » Preloading (Images)

Im my game when designing a new level in weltmeister i have an entity called EntityImage and i specify the image src in the editor as (src)

The image initialization is as the following:

 init: function(x, y, settings) {   			    	    
             this.parent(x, y, settings);
	  	    
	    this.animSheet = new ig.AnimationSheet(this.src, 237, 250);
	    this.addAnim( 'image', 0.1, [0] );
        },

The problem is that in this way the preloader doesn't ensure me that the image is available after the level loading.

How can i make sure that when the level is shown the image is already loaded?

By taking the animSheet bit and having it above and out of the init function. Check out the jump’n’run demo on your download page. Will make your life a ton easier. :)

I would do that, but since this.src is set in the editor
it is undefined until init is called (this.parent(x, y, settings);)

Well, you entity instance is only created after the preloader already finished loading.

The easy way to ensure that the image is already loaded, is to create some dummy ig.Images with all the resources that may be used E.g.:

EntityNinja = ig.Entity.extend({
	dummyImages: [
		new ig.Image( 'media/ninja-green.png' ),
		new ig.Image( 'media/ninja-red.png' ),
		new ig.Image( 'media/ninja-blue.png' )
	],
	
	init: function( x, y, settings ) {
		this.parent( x, y, settings );
		
		// If the image for 'this.src' is already loaded,
		// Impact will use it.
		this.animSheet = new ig.AnimationSheet(this.src, 237, 250);
	}
});

If you want it to be truly dynamic, you could overwrite the Game&039;s #loadLevel() method to create another preloader and load all the resources needed for this level. This will require a fair amount of work, though.

Thats what i will have to do since my levels are loaded in runtime from the server -_-

Thats dominic

Thinking a bit more about it, it's actually not that complicated. Here's an idea how to do this. It's untested and I probably forgot something, but it should be a good starting point.

When you create an instance of ig.Image (or ig.Animation for that matter) and ig.ready is false, the image will add itself to ig.resources, to be loaded by the preloader. Now, if you set ig.ready = false before loading your level, you should be able to "capture" all those resources and then run a custom preloader to load them.

IntermediateLoader = ig.Loader.extend({	
	end: function() {
		// Unset .loader to tell the game we're finished
		ig.game.loader = null;
		clearInterval( this._intervalId );
	},
});

	
MyGame = ig.Game.extend({
	loader: null,
	
	loadLevel: function( data ) {
		// Capture all resources that are created during loadLevel
		ig.resources = [];
		ig.ready = false;
		this.parent( data );
		ig.ready = true;
		
		// Start the custom preloader with the captured resources
		this.loader = new IntermediateLoader( null, ig.resources );
		this.loader.load();
	},
	
	run: function() {
		// If this game has an active .loader, don't run it.
		// When the loader is finished, it will "unset" itself.
		if( !this.loader ) {
			this.parent();
		}
	}
});