This forum is read only and just serves as an archive. If you have any questions, please post them on

10 years ago by dungeonmaster

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?

10 years ago by Joncom

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?

10 years ago by stillen

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.


PreLoader = ig.Loader.extend({
	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,, 320, 1 , PreLoader);

10 years ago by dungeonmaster

Thanks stillen.

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

10 years ago by dungeonmaster

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?

10 years ago by stillen

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.

10 years ago by vincentpiel

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.)

10 years ago by stillen

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.
Page 1 of 1
« first « previous next › last »