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 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:
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.
Progress bar only: the same as before, but logo.png 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.
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.