Properly Loading a Scene

Questions
,
1

I’m trying to add a Save/Load function to my project so that players can save their levels and load them when they return. So far I’ve been able to save the scene using the method shown in this playground: https://playground.babylonjs.com/#1AGCWP#1

I imported that Babylon file into my project and I’m loading it using this:

async LoadScene(): Promise<void> {

    const res = await SceneLoader.LoadAsync("./levels/", "test.babylon");

    this.scene = res;

  }

This kind of works in that I do see the meshes from the object and the fixed camera view. However, I can’t move the camera around like I could in the original scene where this was saved from. I’m not entirely sure if I should be assigning:

this.scene = res;

but without that nothing appeared at all within the scene. So I assume I need to “swap” the default scene with this new one. I also tried this with my own environment and the camera ends up well below all the other meshes.

I looked in the documentation here: Loading Any File Type | Babylon.js Documentation but I didn’t see anything that went into more depth on how to load a scene this way.

In general, what I’d like to create is to have a “save area” where players can enter a specific area (like a trigger zone) then get prompted to save their game progress there. I’d like to save that file online somewhere (something I still need to implement) then when they return to the game they’d load up their last file and start off that same point.

Does anyone have a save/load system similar to this that they can provide some info on how to approach this properly?

2

In a multi-scene environment you need to make sure you attach and detach the canvas from the scene when needed. Keyboard and pointer events are passed down to the scene’s camera when you use attachCanvas (a function on the scene). If the scene is not in use anymore, it is very recommended to detach the input so pointer events will not pass to a disabled scene.

You could also just have a single-scene environment and work with a mechanism like the assets container - Asset Containers | Babylon.js Documentation
This way you can add or remove any resource when needed, while still maintaining the scene and keeping the input working correctly.

This is about resources, which is the code example you provided. What you are referring to is state - the player’s state needs to be saved, along with the player’s progress in the game. This is very much dependent on how you keep the player’s state. But if you have different “levels”, which are different resources/assets, you could load the right asset and import it to the existing scene

3 Likes
3

Thanks for the detailed explanation. I’ll have to experiment with Asset Containers. I mostly just need to save the changes made to the environment (meshes), everything else will stay the same and anything like keeping track of points or experience levels would be stored in a database.

1 Like