Is it possible to make a custom loading screen to transition between scenes

Help & Support
1

I am making my next game as Arescape is 98% complete, I just need to fix and add a few things.

for my next game, I am trying to make gameplay act like Metroid Dread, where every room is unloaded except for the room you are currently in, and the rooms right next to you, so the game doesn’t have to load so much at the same time.

However, if you enter an elevator, slide into a vent between sectors, dash into a cable between sectors, etc(I have not finished the tilemap yet, so I don’t have any of the models yet) I will change the Scene to a different sector. but is it possible to make a loading screen between these scenes?

My first thought was to make the scene that has a system script that unloads every asset(except the player, ALISA, COMPUTER sphere(ALISA and COMPUTER are AI units btw), and other assets) and then loads all assets that will be used in the sector.

is that the best way to do it?

2

also for the normal title screen, I am trying to make a dark ambient effect to the loading screen, but I cannot figure out how to make it play, I saw another forum that conformed that you can play audio, but I cannot figure out how to make it play

script: PlayCanvas | HTML5 Game Engine

3

What is the reason you want a loading screen between your scenes?

4

I understand that I wouldn’t need the loading screen, but I thought that the game’s playing quality might improve if I were to make an animated cutscene as a loading screen for the next area.

but for the main point, I want to make a screen that plays while the game is loading/unloading assets in between scenes to save on RAM(since I want it to be playable in many situations), and I don’t want the player to look at a black screen for more than 5 seconds while it is happening(I don’t like looking at black screens for more than 3 seconds, I think it might have something to do with my ADHD). so I want to make a loading screen that people can watch.

that is the main reason I want to add it

5

For a screen between your scenes you can create an UI overlay and enable this at the initialize of your new scene. You can disable this overlay when all assets are ready.

Personally I don’t know how to check if all assets are ready.

6

thx

I think it might be best if I unload them, and then wait a few seconds before starting to load the needed assets then waiting a few seconds, then plays the scene

7

It is possible. Here is an example that unloads/loads assets during scene changes and has a HTML UI loading screen that shows the progress of the loading assets during the scene change.

8

thx, however, I don’t understand how it works, I am still kinda an amateur with Basic javascript, which script unloads the assets, which one loads them, also which script works everything else. I do not understand it that well

I also want a scene transition, and I don’t know how to do that either, so can I have an explanation for that

9

The startup.js file is the entry point. The first scene is displayed and the logic to switch scenes is setup.

// Change to the real first scene.  This will
// - Destroy old scene
// - Unload assets for old scene
// - Load assets for new scene
// - Load new scene
// - Display a transition while changing scenes
await sceneManager.changeScene('scene-6');

In scene-manager.js you will see the steps for changing a scene ie unloading, loading, and a transition.

await sceneTransition.start();
currentScene.destroy();
sceneAssets.unloadAssetsForScene(this.#currentSceneName);
this.#currentSceneName = newSceneName;
await sceneAssets.loadAssetsForScene(newSceneName);
this.#app.scenes.loadSceneHierarchy(newSceneItem, (err, entity) => {                    
    this.#app.scenes.loadSceneSettings(newSceneItem, async (err) => {
        await sceneTransition.complete();
        complete();
    });
});

In scene-assets.js you can find the logic for unloadAssetsForScene() and loadAssetsForScene(). I use a particular method to determine which assets belong to each scene, but you can use other methods too such as tagging, or your own custom logic.

The HTML UI transition code can be found in scene-transition.js and is very similar to the default playcanvas loading screen logic.

10

so the scripts that I need are scene-manager.js, scene-assets.js, scene-preload.js, and scene-transition.js. then hook up a script to act like startup.js, but to create other triggers, am I understanding correctly?

11

Yes

Note that scene-preload.js is just a helper script that can be attached to an entity in a scene. ( see scene-2 root entity as an example) and allow assets to be referenced in the scene. ( and then automatically loaded)

Also note that logic inside startup.js is embedded inside pc.script.createLoadingScreen(). This function is called right at the start of the playcanvas app before any assets have been loaded, or the first scene rendered. I do this so that I can load the assets for the first scene before it is rendered.