(or see by yourself here)

Someone on forums has asked if there's an example/extension that would allow to display a logo or image alongside with the loading bar in HTML5 module of GameMaker: Studio, and I did just that.

It's not uncommon to wish to display a company/game logo along with the loading bar in games.
Alas, the default loading bar either displays the bar, or the image, which can be slightly inconvenient.
But, fortunately, loading bar extensions for GameMaker: Studio are easy enough to make, so with a bit of JavaScript and patience you can have pretty much any kind of loading bar.

JavaScript extension code in this case looks like this:

function ImageLoadBar_hook(ctx, width, height, total, current, image) {
	// change these to your liking:
	var backgroundColor = "#FFFFFF";
	var barBackgroundColor = "#FFFFFF";
	var barForegroundColor = "#242238";
	var barBorderColor = "#242238";
	var barWidth = Math.round(width * 0.6);
	var barHeight = 20;
	var barBorderWidth = 2;
	var barOffset = 10;
	// background:
	ctx.fillStyle = backgroundColor;
	ctx.fillRect(0, 0, width, height);
	// image:
	var totalHeight, barTop;
	if (image != null) {
		totalHeight = image.height + barOffset + barHeight;
		var image_y = (height - totalHeight) >> 1;
		ctx.drawImage(image, (width - image.width) >> 1, image_y);
		barTop = image_y + image.height + barOffset;
	} else barTop = (height - barHeight) >> 1;
	// bar border:
	var barLeft = (width - barWidth) >> 1;
	ctx.fillStyle = barBorderColor;
	ctx.fillRect(barLeft, barTop, barWidth, barHeight);
	//
	var barInnerLeft = barLeft + barBorderWidth;
	var barInnerTop = barTop + barBorderWidth;
	var barInnerWidth = barWidth - barBorderWidth * 2;
	var barInnerHeight = barHeight - barBorderWidth * 2;
	// bar background:
	ctx.fillStyle = barBackgroundColor;
	ctx.fillRect(barInnerLeft, barInnerTop, barInnerWidth, barInnerHeight);
	// bar foreground:
	var barLoadedWidth = Math.round(barInnerWidth * current / total);
	ctx.fillStyle = barForegroundColor;
	ctx.fillRect(barInnerLeft, barInnerTop, barLoadedWidth, barInnerHeight);
	console.log(current + "/" + total);
}

As you can see, it's all about drawing a bunch of rectangles, an image, and having descriptive variable names so that the end user (you) can customize colors and other things easily.

Installation is as following:

1. Import the attached GMZ into GameMaker: Studio.
   Alternatively, if you have 7-zip installed, you can "unpack" the GMZ file somewhere using it.
2. Add the "ImgLoadBar" extension to your project.
   The easiest way to go about this is to simply drag the .extension.gmx file from the project' directory onto GameMaker: Studio window with your project open.
3. Setup the loading bar via the "HTML5" tab of global game settings:
   
   There are a couple of things worth attention here:
   1. Set the "loading bar extension" to the newly introduced function.
   2. Make sure that "use splash screen" checkbox is "checked" (it determines whether the splash image will be sent to the loading bar extension or not).
   3. Update the "splash screen" to your desired image. In this case the extension draws the image "as is" (without scaling) so you may need to experiment a little.
4. If all above steps were done, the game will now display the newly-obtained loading bar.
5. (optional) Change the parameters to suit your game better. This is done by changing the JS file in /extensions/ImgLoadBar. Changes are reflected upon compilation.

If you cannot import the extension for some reason, it can also be "remade" in a few steps:

1. Create a new extension by right-clicking "extensions" folder in the IDE and picking "Create new extension".
2. Right-click your new extension, pick "add file", and pick the JS file provided (containing the earlier shown function).
3. Right-click the newly added JS file and pick "add function". Set the name and external name to "ImageLoadBar_hook", set it to have 6 arguments (type does not matter) and make sure that "use variable arguments" checkbox is not checked.
4. If the above steps were done correctly, the extension' function will now show up in the list in Global Game Settings tab and you'll be able to proceed with it as usual.

As usual, the post ends with a link to example in question:

Download GMZ

Have fun!

Update (Apr 2017): a more configurable version of this extension is now available.

Related posts:

• GameMaker: Opening links in a new tab on HTML5
• GameMaker: Loading bar + animated image in HTML5
• MouseLock & PointerLock for GameMaker
• Understanding isometric grids
• Hosting HTML5 games on Google Drive