How to use loader layouts to make custom loading screens

Favourite 103 favourites
Tutorial written by AshleyOriginally published on 8th, June 2012 - 11 revisions

A common request is to customise Construct 2'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 2 projects are loaded. This happens in four phases.

1. The page's HTML and Javascript is downloaded. Since the Construct 2 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 2's stock loading bar, which is typically a HTML5 logo with a blue 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 only downloading images. All the Javascript logic was downloaded in step 1, and audio is streamed after the project has started. For more information on how audio plays on demand, see Audio in the manual. So the only thing loading while the progress bar is showing is the images from Sprites, Tiled Backgrounds, and so on.

This means all you need to do to speed up the loading of your game is make sure your images are as few and as small as possible. For more information and tips on how to reduce the project size, see the blog posts Image compression in Construct 2 and Under the hood: spritesheets in Construct 2.

How to create a loader layout

There are two relevant settings in Project Properties: Use loader layout and Loader style.

Loader layout settings
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 2 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 only 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 native apps on mobile (e.g. via PhoneGap, CocoonJS and appMobi). 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 only ever shown the very first time the game is being downloaded from the web. Since Construct 2 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 2, and the Updates section below.

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 (from the Start & end category). 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 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:

Loader progress bar & logo style
Progress bar & logo (the default): shows a logo and a blue progress bar. You can change the logo by overwriting logo.png in the export folder after exporting. Make sure the file is as small as possible so it displays quickly - the default HTML5 logo is just 1kb! The progress bar is set to the width of logo.png and sits 12px beneath it.

Loader progress bar style
Progress bar only: the same as before, but logo.png is not loaded or displayed.

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

Loader nothing style
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.

Updates

As described above, the loader layout only shows on the first load. Even if you update the game, the next time it is played it will start immediately and start updating in the background, as described in the tutorial Offline games in Construct 2.

You can detect this happening using the following conditions in the Browser object:

Is downloading update: true when your game is running, but you've uploaded a new version and the browser is downloading the update in the background.
On update ready: triggers when the update has finished downloading. The new version won't be used until the page is reloaded, so you may want to prompt the user or use the Browser object's Reload action here.
Also, while Is downloading update is true, loadingprogress is also set to the download progress of the update.

Using these features you can re-use your loader layout as an update layout. However, when it finishes updating, don't forget to reload instead of starting the game. Alternatively you do not need to handle these events and can just let the updates happen automatically and silently.

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.

Congratulations on finishing this tutorial!

Did you learn a lot from it? Share it now with your friends!

Share and Copy this Tutorial

You are free to copy, distribute, transmit and adapt this work with correct attribution. Click for more info.

Comments

7
Shrapnel 6,802 rep

This is going to be very useful, well thought! =)

Friday, June 08, 2012 at 7:05:35 PM
2
7Soul 10.8k rep

Great, I was waiting for this :)

Friday, June 08, 2012 at 7:36:51 PM
1
vidi 4,733 rep

Thank you ! :)

Saturday, June 09, 2012 at 3:03:09 PM
2
valkyriegames 4,730 rep

Thanks for the update. It'll be handy in the future. Cheers!

Saturday, June 09, 2012 at 3:34:46 PM
2
amiltonbr 8,104 rep

Vou criar tutorial .cap para os interessados XD

Saturday, June 09, 2012 at 10:37:59 PM
0
xingfriday 2,159 rep

最好能够自定义加载顺序及加载与播放的时间

Tuesday, June 12, 2012 at 2:20:36 PM
0
jwjb 4,489 rep

Will focus on making a custom splash screen which can be used across platforms to keep the look and feel consistent.

Friday, July 27, 2012 at 2:26:49 PM
0
gameblaster44 2,083 rep

coooooooooooooool, but i just can ' t get it right

Monday, September 10, 2012 at 8:09:07 AM
0
Suvd 2,624 rep

Thank you, very useful.

My sound of main menu late some seconds, after showing a main menu layout.
Can I finish loadingprogress, after loaded a sound of menu?
And game layout's, map layout's sounds are late, too.

How can I resolve this? Help!

Thanks for advance.

Wednesday, November 07, 2012 at 3:36:13 AM
0
BStateham 2,801 rep

Am I missing something? I seem to be having a problem with my custom loader layout working (using r114). I have a loader layout named "LoaderLayout", have set the "First layout" project property to "LoaderLayout" and "Use loader layout" to "Yes", however the standard HTML5 logo and progress bar displays instead. Any tips?

Thursday, December 27, 2012 at 7:21:16 PM
1
BStateham 2,801 rep

It seems to work correctly if I export the project as an "HTML5 Website" or "Windows 8" app. Perhaps the Loader Layout just doesn't work during preview?

Thursday, December 27, 2012 at 10:59:42 PM
0
Ashley 112.1k rep

@BStateham, see the section on limitations - loader layouts don't show in preview because the game loads instantly.

Friday, December 28, 2012 at 9:28:58 AM
0
KAGESHAHA 2,426 rep

Im trying to preview an image (splash image) while my Android app loads, i havent figured out how to do it. Is this code correct?

Global number loadProgress = 0
While loadProgress ≠ 1 SplashScreen Set Visible
On loading finished set loadProgress to 1

Im not sure if im posting in the right place, i cant seem to start a new thread in the forums. Thanks in advance to anyone who answers!

Sunday, January 13, 2013 at 3:32:29 PM
0
Gamer 3,114 rep

Wow thanks, such a nice tutorial!

@Ashley : But I had a little question.
As you have stated above, and also written in the manual, sounds are loaded on demand unless we pre-load them on start of a layout, right ?

But there's a little problem with that. Imagine a player is using a very slow connection or the sound is too big, in that case, the sound won't play on time.

So here's my question:
Is there a way to stop the game from starting before all sounds are loaded? I mean, can we do something so that the game will start only after all sounds are fully downloaded?!

Thanks again.

Friday, January 25, 2013 at 4:26:16 PM
0
Ashley 112.1k rep

@Gamer - try waiting until the Audio object's 'Preloads complete' trigger fires.

Friday, January 25, 2013 at 5:27:01 PM

Leave a comment

Everyone is welcome to leave their thoughts! Register a new account or login.