Smoother loading bar for GameMaker HTML5 builds

Default GameMaker loading bar used in HTML5 builds does not look very attractive, but my biggest problem with it is jarring progress jumps that happen in projects with few sound assets. In some cases, for example when publishing my games on Poki, I do have to wait for their SDK to be initialized before calling GameMaker_init() and for a few moments that leaves player with nothing to look at. Last, and probably least, adding an animated GIF via loading bar extension is a huge pain in the rear. This solution is to take complete control over the way game loading is displayed and utilize index.html template together with included files to make it fancy!

Note: this article is still being worked on and I will provide a full example project in the near future.

List of ingredients:

One LoadingBar_hook extension
One loading.js
Few changes in index.html

It’s that easy!

Different loading bar approach

Instead of drawing my custom loading bar in LoadingBar_hook() function, I decided to only use that function for passing on the progress and added a simple Javascript + CSS bar in the index.html. To avoid situations where progress bar is frozen due to loading lag or delay in initialization, I cheated a bit by keeping animations going even if nothing is happening. Better UX is worth a small white lie.

Finally, I hide the main game canvas until the loading is completed, otherwise it will cover all of my effort.

1. Override drawing with a custom extension

There’s only a few lines of code in our loading bar hook, so it will take longer to setup the extension itself.

function LoadingBar_hook(_context, _width, _height, _total, _current, _image) {
	if (loading_set_progress != undefined) {
		loading_set_progress(_current / _total);
	}
}

2. Add loading bar scripts

To complete this step you will have to download loading.js, add it to your Included Files directory and insert the following bit between <head> and </head> tags in your index.html

<!-- Loading Bar -->
<script src="html5game/loading.js"></script>

3. Add HTML and CSS

While you have the index.html file open, it’s time to style the bar and actually add it to HTML code. If there will be any interest, I will simplify this step in the future and use JavaScript in loading.js to generate required elements.

Add these styles somewhere between <style> and </style> tags and feel free to modify colors and sizes to fit your taste better.

#bar {
	background:#5a3a32;
	width:50%;
	height: 40px;
	border:1px solid #5a3a32;
		
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
				
	position:fixed;
	z-index:-9999;
	overflow:visible;
}
			
#fill {
	background-color:#ffffff;
	position:relative;
	width:0%;
	height:100%;
	margin:0px;
}

With the styling done, add <div id="bar"><div id="fill"></div></div> at the bottom of gm4html5_div_id section.

<div class="gm4html5_div_class" id="gm4html5_div_id">
<canvas id="canvas" width="1024" height="576">
    <p>Your browser doesn't support HTML5 canvas.</p>
</canvas>
<script type="text/javascript" src="html5game/YOURGAMENAME.js"></script>
	
<!-- Loading Bar -->
<div id="bar"><div id="fill"></div></div>
</div>

4. Add the loading call

Only one last change we have to do at the bottom of the index.html template

<!-- Find a line that looks like this -->
<script>window.onload = GameMaker_Init;</script>

<!-- Replace with this -->

window.onload = function() {
    loading_start();
    GameMaker_Init();
}

5. Test and enjoy

Clear the cache by using Clean function (CTRL+F7) in the IDE and build your project with HTML5 target.

Smoother custom loading bar for GameMaker HTML5 build