[SOLVED] UI Problems - Additive Scene Loading

Help & Support
1

Hi,

I have a problem I cannot seem to resolve with UI elements using additive scene loading.

Here is the example: https://playcanv.as/p/oDty5oVh/

Press the Red button to load the Red scene. You can click on the two smaller boxes to show their names in a floating UI panel - Bob and Billy. Now, if you click on the Blue button to load the Blue scene and then again the Red button the load the Red scene, the functionality on the 2 boxes no longer works as expected.

We get the following error:

ui-manager.js:23 Uncaught TypeError: Cannot set properties of undefined (setting ‘text’)
at i.UiManager.settext (ui-manager.js:23:29)
at i. (ui-manager.js:13:14)
at i.e.fire (playcanvas-stable.min.js:6:11885)
at picker.js:24:22
at e.i.raycastFirst (playcanvas-stable.min.js:6:1078578)
at i.Picker.onSelect (picker.js:19:32)
at e.fire (playcanvas-stable.min.js:6:11885)
at e.i._handleDown (playcanvas-stable.min.js:6:1233344)

It appears that the Text Element no longer exists on the entity. Puzzled as to why.

Here is the sample project: https://playcanvas.com/project/917187/overview/scene-load-tests

Any help would be appreciated.

Thanks!

2

Hi @mr-jose,

Taking a look at your project, it seems like you’re having problems with event subscriptions at the app level. In your uimanager.js file you have:

var UiManager = pc.createScript('uiManager');
UiManager.attributes.add('panelEntity', { type: "entity" });
UiManager.attributes.add('textEntity', { type: "entity" });

UiManager.prototype.initialize = function () {
    this.panelEntity.enabled = false;

    this.app.on("ui:togglePanel", function () {
        this.togglePanel();
    }, this);
    this.app.on("ui:setText", function (text) {
        this.settext(text);
    }, this);
};

UiManager.prototype.togglePanel = function () {
    this.panelEntity.enabled = true;
};

UiManager.prototype.settext = function (text) {
    console.log(this.textEntity);
    this.textEntity.element.text = text;
};

Since the app itself doesn’t get destroyed when you switch scenes, it searches for the original entity in the Graph Node which no longer exists. Check out your other script picker.js and study how it employs this.app.off() when the entity is destroyed to unscubscripe from the app level mouse event.

You can learn more about the builtin functions of the Playcanvas event system here:

https://developer.playcanvas.com/en/user-manual/scripting/communication/

or here for the API reference:

https://developer.playcanvas.com/en/api/pc.EventHandler.html

I hope this is helpful

3

Hi @eproasim

The scene with the UiManager is destroyed when the scene is switched to Blue, or so I am lead to believe from reading through the tutorials, forums etc. The children of the scene-root entity are destroyed.

The picker is never destroyed, the Camera entity to which it is attached lives in the root Entry scene.

Again, everything works as expected other than the Text Element on the “Text” Entity mysteriously disappearing.

Thanks

4

Update: I got this working by adjusting the way I wrote the listeners. Initially using destroy with this.app.off for each listener was not working until I realised I had to change the approach to the callback.

Thanks @eproasim