Mark Andrade

Custom GameMaker HTML5 Loader

I love making games for the web. I've been doing that since the mid to late 90s. Basically ever since Shockwave. For the past, I don't know, 8 years maybe, I've been using Phaser. Now I'd like to try something different and use GameMaker.

My brain really likes the compartmentalization of GameMaker's IDE. It reminds me of the time I used to make games in Director. It's pretty fun and it exports to almost everything! I've been playing on and off with it's HTML5 export option.

As far the HTML5 export, it's ok. I've discovered a bunch of issues and I was porting games but they've fixed the things I sent in bug reports for. So far I'm content even though it can take 2 months to, maybe, get a fix. 😔 Nothing beats open source where you can fix it yourself.

Loading Bar

The one thing I don't like is their default loading bar. It's does the trick but it's generic. If you want something that matches you style you have to build it yourself.

I found a couple of tutorials on how on GML loading bars but I couldn't get it to work properly when I scaled the game. Plus, I also wanted something more robust.

So I decided to try and give it shot.

This is what I ended up with.

GIF of a custom loading screen for Game Maker HTML5 export. Has an beating animating SVG of the star heart Taara Games logo in the center with a red progress bar at the bottom of the screen.

What's happening

It doesn't use a canvas for the loading animation or bar. The loader div that contains the logo, loading bar and text is positioned relatively within the gm4html5_div_class class.

The Taara Games star heart logo is a CSS animated SVG also position relatively and centered using flex box within the loader div.

The progress-bar div is just a simple div with a red background color and a height of 15px. It's width and percent loaded are calculated with every call to the loadingbar_hook callback function in the loading extension.

    <div class="stage">
        <div class="gm4html5_div_class" id="gm4html5_div_id">
          <!-- Create the canvas element the game draws to -->
          <canvas id="canvas" width="1280" height="720">
            <p>Your browser doesn't support HTML5 canvas.</p>
          </canvas>
          <div class="loader">
            <div class="taara_logo">
              <div><img src="./html5game/taara-logo-solo.svg" alt="" /></div>
            </div>
            <div class="progress-bar"></div>
            <p class="bold_text" id="load_info">LOADING</p>
          </div>
        </div>
        <div class="ad"></div>
    </div>

The great thing about this implementation is that you can use almost anything as your loading animation and progress bar. Basically anything HTML supports.

In this example the loader div is transparent and lives on top of the canvas div. It only shows a logo and progress bar. The "Taara.Games" text on the yellow background is actually the first room in Game Maker.

The Game Maker canvas is also fully scalable and fits neatly into any size div.

This post was originally on Taara.games website and was moved here for my simplicity.