While working on my latest project – Ninja Way – I struggled a bit to find a way to add a custom loading screen on the HTML5 version, made with Game Maker Studio.

Game Maker, unlike Stencyl – the tool I normally use to make Flash games – doesn’t have a built-in loading screen editor, you can just decide either to use the standard loading bar or show a static splash screen image. But, luckly, it’s available a JavaScript extension that allows to override the standard loading bar and create a customized one.

I have to admit that it took me some time to understand it, because of the lack of documentation and probably mostly because I am not very familiar with JS. But in the end I made it work as I wanted, than I modified it a bit to be more “readable” and “user-friendly” to an average GM user.

So, here I am to share with anyone who needs it my modification, along with a brief tutorial on how to implement it in GameMaker.

With this extension and following this tutorial you will be able to create a simple but nice loading screen with customizable loading bar and also add and image by URL, so in case you will have ot update it in the future you just have to change the image uploaded on the internet without the need to re-export your games! Moreover, an advanced user could make further customization to have an even nicer screen.

Requirements:

First open your GameMaker project and import the extension.

extimp

Right-click on the Extension folder, select Import extension and upload the FMS_Loading.gmez file you have found inside the .zip archive.
Now you will need to activate the custom loader in Game Settings, so double click on Global Game Settings, choose HTML5 tab and select FMS_Custom_Loading in the drop-down menu of Loading Bar Extension. In this window  we can also upload an image in the Splash Screen section, it will be used as background in our loading screen. To activate it tick Use Splash Screen option. Confirm by clicking Ok and that’s all we have to do in GameMaker.

splash

Now we will need to decide how our screen and loading bar will look like, to do this we need to define some settings directly in the JavaScript.

Locate the script: open your project’s folder (somthing like my_game_name.gmx), inside it you will see many folders, one of those is extension. Open it and open the subfolder named FMS_Loading_SCreen. Here we’ll find FMS_loading.js, this is what makes everything possible, and where we haveto make some editing. Open the js with your code editor (with Notepad++ you just need to right click on it and select Edit with Notepad++)

javascript

Here we are, starting from line n.20 of our script we find a series of variable we can set to decide how the Loading Screen will look like.

The first part is about the text that will appear while loading, here we can set:

  1. The actual text that will be written
  2. Text style: pixel dimension and font
  3. Text alignment: Center, left, right
  4. Text color in rgb
  5. Text orizontal position (in pixel, from the left side)
  6. Text vertical position (in pixel, from the top)

The second section is about the loading bar. Let’s set:

  1. Width of the bar (in pixel)
  2. Height of the bar (in pixel)
  3. Loading bar orizontal position (in pixel, from the left side)
  4. Loading bar vertical position (in pixel, from the top)
  5. Bar border (in pixel)
  6. Bar border color
  7. Color of the background of the bar (that shows the part not yet loaded)
  8. Color of the progress bar (that shows the part already loaded)

Now we can specify some settings for the background of our screen and of the splash screen image we have set in GameMaker:

  1. Background color (visible in case image is not set or if it’s smaller than canvas)
  2. Loading Screen image height in pixel
  3. Loading Screen image width in pixel
  4. Loading Screen image vertical position (in pixel, from the top)
  5. Loading Screen image orizontal position (in pixel, from the left side)

I wanted to add a little feature: the ability to set an image from url instead of (OR ADDITIONALLY TO) the one set in GameMaker. Please not that if you have set both Splash Screen image in GameMaker and the custom image from URL, the latter will be placed ABOVE the one from GM, if bigger or same dimension it will cover it but if smaller it will be shown together!

In the fourth part of variable settings we can specify some parameters:

  1. URL to the image, if you don’t need it just leave empty quotes
  2. Custom image height in pixel
  3. Custom image width in pixel
  4. Custom image vertical position (in pixel, from the top)
  5. Custom image orizontal position (in pixel, from the left side)

example

Loading Screen Example

Note that there are a couple of confortable variables we can use and play with to help use with positioning and dimensions. they are _width and _height, in this var there are stored canvas width and canvas height. So it will be fast and easy to place something centerd for example, just like I did with text simply by setting  var text_x_pos= (_width/2);

There is no need of editing anything else, unless you know a bit of scripting and want to try something more advanced. There are comments on every functions so it’s quite easy to understan who does what.

When you are ready editing, simply run the game to see how your loading screen looks like!

*FMS_Loading_screen extension is a modification of Mike’s (YoYo Games) HTML5_Custom_Loading_Bar Extension.

Advertisement
Advertisement

Leave a Reply