Strange occurence between debug vs build

Help & Support
1

Hi all,

I have been playing around with a little PlayCanvas project to test out its features.

I am happy with how it works when using the debug/launch mode. Everything works like it should.
However, when I build and publish the project it behaves differently.

I have made a quick video to show what’s happening:

As you can see the scenes are not initializing when revisiting a scene in the build version. They are however reinitializing in the debug/launch version.

The latter is what I am looking for as I am storing global variables in the root script.

Currently I am deleting the old scene like so:

    var oldHierarchy = this.app.root.findByName ('Root');

    // once the new scene has been loaded, destroy the old one
    setTimeout(() => 
    {
    oldHierarchy.destroy ();
    }, 10);
    this.loadScene (this.sceneId, function () {
    });

I have a feeling it has to do with the setTimeout function as there are enitities in all scenes with the same name. The new entities might get destroyed 10ms after they are created but I am not sure.

What can I do to delete the old scene and load the new scene and make it initialize when you revisit a scene?

Here is the project:
https://playcanvas.com/editor/project/871003

And here is the build:

Thank you in advance!

2

Looks the same to me:

3

Hi @yaustar,

Yes it looks the same and it works the same until you are switching between locations.
Please look at the video where I am showing the problem.

It occurs when switching to the same scene multiple times.

4

There’s quite a bit of code to look at and I’m not clear what is correct and not in the project.

Can you provide a clear set of reproducible steps for someone to follow with what it should look like please?

5

Yes, this is what should happen:

  1. You click on start and the next scene is loaded.
  2. In all the location scenes (these are the scenes with a map) there is a entity with kaart.js script attached.
    In kaart.js the following code makes sure the big map with buttons won’t be visible when the scenes is loaded:
// initialize code called once per entity
Kaart.prototype.initialize = function() {
    this.app.on("kaart:reset", function(){
        kaart = this.app.root.findByName("Kaart");
        currentLoc = this.app.root.findByName("CurrentLoc");
        currentLoc.element.text = this.currentLocText;
        currentLoc.enabled = false;
        Kaart.kaartIs = false;
        kaart.enabled = false;
    }, this);

    this.app.fire("kaart:reset");
};

This is working like it should in the debug/launch version.

  1. When opening the big map and clicking on the button to go to the next location/scene, the old scene is deleted and the new scene is loaded:

BtnNewScene.prototype.onPress = function (event){
    var oldHierarchy = this.app.root.findByName ('Root');

    // once the new scene has been loaded, destroy the old one
    setTimeout(() => 
    {
    oldHierarchy.destroy ();
    }, 10);
    this.loadScene (this.sceneId, function () {
    });
};

The old entities with kaart.js attached are now deleted and the new scene with its entities is loaded.

  1. To my understanding the initialize code from kaart.js ,which is attached to the newly loaded entity, should run again. But on the build version the big map is still visible which tells me it did not run.

So to make sure it runs again I added an event fire:

BtnNewScene.prototype.onPress = function (event){
    var oldHierarchy = this.app.root.findByName ('Root');

    // once the new scene has been loaded, destroy the old one
    setTimeout(() => 
    {
    oldHierarchy.destroy ();
    }, 10);
    this.loadScene (this.sceneId, function () {
    });

    this.app.fire("kaart:reset");
};

This did not fix it.

The weird thing is; the problem does not always occur. It looks like kaart.js is getting initialized when changing scenes. Then after a few clicks through scenes it does not initialize anymore.

Also, removing the 10ms delay does not fix it either.

What I don’t understand is why the problem does not occur when using the debug/launch version.

6

Right, so the issue is the big map should not be shown when changing locations?

7

Yes that is the issue. As you can see in the video in my first post, the debug version is working like it should and the build version is not.

kaart.js should make sure the big map is not enabled.

The initialize script should run when revisiting the same scene after deleting it before, right?

8

I fixed the issue by removing the timeout.

This is now my script to change scenes:

BtnNewScene.prototype.onPress = function (event){
    var oldHierarchy = this.app.root.findByName ('Root');
    
    oldHierarchy.destroy ();
    this.loadScene (this.sceneId, function () {});
};

Now the kaart.js is initialized every time. However, I get an error now every time I change scenes.

error

I am not sure what that error is about. It seems to be okay though.

9

Please refer to the Office Hours video below regarding the exception error. Jump to 11:05 for the answer.

The issue is that there are multiple event listeners for the mouse up event on the button to change locations and in this instance, the scene (including the button) is destroyed in the middle of engine going through the listeners.

Therefore any listeners that are after the one where the scene is being destroyed, no longer have an entity to reference (hence being null).

Solved by triggering the destroy and load on the next frame in the update.

Fixed scene: PlayCanvas 3D HTML5 Game Engine

2 Likes
10

@yaustar,

Wow, thank you! It’s really great to follow you along working out the problem.
These Office Hours videos are very informational!