Forums » Code » Request: Loading screen plugin

Do you know a good loading-screen plugin? Where I can somehow adjust the boring white rectangle, put some background images etc..?

I already read the entry about subclassing ig.Loader and made some simple modificcations. But has anybody a better solution already?

I'm not aware of such a plugin. Can you be very specific about what you're trying to do? Maybe we could help you create the effect you're going for. Are you simply trying to add a background image?

It's simple and basic but works. Allows you to place a background image during the game loader and change the color of the loading bar if you want as well.

ig.module(
    'plugins.preloader'
)
.requires(
    'impact.loader'
)
.defines(function(){

PreLoader = ig.Loader.extend({
	imageObj:null,
	init: function( gameClass, resources ) {
		this.imageObj = new Image();
		this.imageObj.src = 'media/main_loader.png';
		this.parent(gameClass, resources);

	},

    draw: function() {
        // Add your drawing code here
        var ctx = ig.system.context;
		ctx.drawImage(this.imageObj, 0, 0);

     
        this._drawStatus += (this.status - this._drawStatus)/5;
        var s = ig.system.scale;
        var w = ig.system.width * 0.6;
        var h = ig.system.height * 0.03;
        var x = ig.system.width * 0.5-w/2;
        var y = ig.system.height * 0.85-h/2;
        
        
        ig.system.context.fillStyle = '#fff)';
        ig.system.context.fillRect( x*s, y*s, w*s, h*s );
        
        ig.system.context.fillStyle = '#000';
        ig.system.context.fillRect( x*s+s, y*s+s, w*s-s-s, h*s-s-s );
        
        ig.system.context.fillStyle = '#fff';
        ig.system.context.fillRect( x*s, y*s, w*s*this._drawStatus, h*s );


    }
});


});

ig.main( '#canvas', GameLoop, 60, ig.ua.viewport.width, 320, 1 , PreLoader);

Thanks stillen.

Any idea on how to use an image as a loading bar?

Thanks alot stillen.

2 more questions then,

My canvas size is dynamic. How can I strech (or downscale) this image according to the canvas width/height? Let's say I have a 800x600 image and my canvas size is 1024x768

Any idea on how to use an image as a loading bar?

Do you want to have different images based on the height or the same image just scaled?

For the loading bar image, do you want it to draw the image % based, like it only shows part of the image or do you want it to back like a background image the gets reveled?

It could also be cool to have the image fade in as it loads, like the old resident evil or tomb raiders. Basically the image being at 0% alpha and it fades in more as it loading.

Just a remark : To avoid chicken-and-egg issue with using a non-loaded image within a loader, you can use a Base64 encoded image, that you might put separably inside a module, so you are sure to have the image at hand when the loader starts.
(Encoder can be found on the web.)

I had originally used a base64 image in my loader, and it would never show up in time within ejecta. It wasn't really an issue on my computer. The only issue I had on my computer, was the actual line code of the base 64 image made the file size huge, and a pain to work with.