How to use loader layouts to make custom loading screens

A common request is to customise Construct 3's loading screen. This can be done by using a loader layout, which is a special layout shown while the project is still loading.

Creative possibilities

Here are some interesting ideas about how to best take advantage of having your own loading screen:

• You can design the progress bar in the same style as the rest of your game. This helps immerse the player in your game's look-and-feel from the moment the game starts loading.
• The loading screen could be designed like the main title screen, so the player feels they are closer to being able to play the game.
• You can also include information like instructions and controls on the loading screen, so the player can read something useful while waiting. (Don't forget to include instructions in the main game as well though, in case the game loads quickly!)
• You could even include a mini-game, or a tiny section of the actual game, so the player can be kept entertained while waiting. Don't forget you should try to use as few objects on the loader layout as possible so it loads quickly itself! More on that in a moment.

How projects load

Before making a loader layout, it's best to understand how Construct projects are loaded. Broadly speaking, this happens in four phases.

1. The page's HTML and JavaScript is downloaded. Since the Construct engine is not even downloaded yet, nothing is shown.
2. Once the JavaScript is downloaded (typically very quickly, since the code is small), the default loader appears. This is Construct's stock loading bar, which is typically a logo with a progress bar. This is shown while the loader layout is itself loading. The default loader style can also be changed in Project Properties (see later).
3. The rest of the project loads while showing the loader layout.
4. Finally, the game is fully loaded and ready to begin.

Note that in stages 2 and 3, it is usually only downloading images. All the JavaScript logic was downloaded in step 1. By default audio is streamed after the project has started, but it will also be downloaded in step 3 if Preload sounds is enabled. (For more information about loading audio, see Audio in the manual.) So the only thing loading while the progress bar is showing is the images and possibly audio used in the game.

How to create a loader layout

There are three relevant settings in Project Properties: Use loader layout, First layout and Loader style. These are all in the Startup section.

Loader style changes the appearance of the default loader. See Changing the default loader below for more information.

Use loader layout enables the use of a loader layout. By default it is disabled, so you need to specifically turn it on for each project. Then, the first layout becomes the loader layout. You should specifically select your loader layout with the First layout option to make sure it is the first layout to appear (otherwise Construct might choose a different layout to use for the loader).

Showing progress

The system expression loadingprogress returns a number from 0 to 1 for the project's load progress. For example, if the project is half loaded, loadingprogress will be 0.5. You can use this to show the progress on the loader layout.

For example, to display the percentage loaded as text, you could set a text object's text to:

round(loadingprogress * 100) & "%"

This multiplies the progress by 100 to make it a percentage, rounds the result, and appends the percent character, resulting in text like "50%".

Tiled Background objects also make good progress bars. For example if you have a Tiled Background which is 500 pixels wide when full, every tick set its width to:

500 * loadingprogress

This will result in the loading bar filling up to the full width of 500 pixels in accordance to how much of the project has loaded.

It is essential to show feedback on how much of the project has loaded. Otherwise users on slow connections may get frustrated, having no idea how close they are to playing the game, and quit. It would be a shame if they quit a few seconds before the game would have loaded because you didn't show any progress feedback.

In addition to some kind of progress indicator you could also add other animations or effects, e.g. spinners, hourglasses and so on.

Considerations

Remember every object's images on the loader layout must finish loading completely before the loader layout will be shown. If you place your Player object with 10 animations on the loader layout, all 10 animations must finish loading before the default loader switches to the loader layout. If you only want to show an icon of the player, consider making a separate object for the loader layout with just one of the player's images.

Consider carefully every object you place on the loader layout, as well as all its animations. Are all of them necessary? Remember objects with images will delay the showing of the loader layout, so think carefully about every Sprite and Tiled Background you use, especially if any of them have long animations. Ideally you want your loader layout to show as quickly as possible.

Limitations

Note a few limitations on using loader layouts:

1. Loader layouts are not shown when publishing as apps (e.g. via Cordova or NW.js). This is because the entire application is downloaded at once. Since all files are immediately available, nothing needs to be downloaded. For these platforms you probably want to focus on a custom splash image instead.
2. Loader layouts are generally only shown the very first time the game is being downloaded from the web. Since Construct games save to disk so they can work offline, the next time the user plays the game it will load instantly. Even if you update your game, it will still load instantly. Instead the game loads instantly from disk again, and starts downloading the update in the background. You can use the Browser object to detect updates occurring, and prompt the user to reload when the update is ready. For more information, see the tutorial Offline games in Construct 3.
3. On loader layouts, you cannot create or spawn objects not on a loader layout, nor can you switch to another layout until loading is complete. This is, obviously, because the rest of the project is not loaded yet.
4. Remember the default loader is still shown while the loader layout is itself loading.

Loading completing

When loading has finished, loadingprogress will equal 1. Also, the On loader layout complete system trigger runs. You can use this event to show a 'Play' button, switch to a main menu, or simply start the game.

Changing the default loader

The Loader style property changes the default loader for the project. This is still shown when the loader layout is itself loading, or is the sole progress bar when no loader layout is used. The four styles are:

Progress bar & logo (the default): shows a logo and a blue progress bar. You can change the logo by editing the icon with the Loading logo purpose in the Project Bar Icons folder. The progress bar is set to the width of the loading logo image and sits 12px beneath it. For more information see Icons & splash.

Progress bar only: the same as before, but the loading logo is not loaded or displayed.

Percentage text: instead of a progress bar, some grey text indicating the load percentage is shown.

Nothing (not recommended): will simply display a blank screen while loading. This is not recommended even with a loader layout, since users on slow connections will not see any feedback while the loader layout is itself loading. It is strongly recommended to use Percentage text as a minimum.

Conclusion

Making a loader layout is a vital way to create a great first impression from the moment the game starts loading. Just remember: always show some kind of loading feedback, and try to use as few images as possible on the loader layout itself.