[SOLVED] Element still visible after removing layer

Help & Support
1

Hello,

When I dynamically remove a layer from an entity with an element the element is still visible.

Is there an refresh function which I am forgetting or something?

Here’s what is happening:

And here is what I am expecting:

Here’s the code to remove the layer:

RemoveLayer.prototype.initialize = function () {
    const redSquare = this.app.root.findByName('Front');

    this.entity.button.on('click', function () {

        console.log('layers before removing:');
        console.log(redSquare.element.layers);

        let layers = redSquare.element.layers.splice(0);
        const newLayer = this.app.scene.layers.getLayerByName('Front');

        var index = layers.indexOf(newLayer.id);
        if (index >= 0) {

            layers.splice(index, 1);
            redSquare.element.layers = layers;

            console.log('layers after removing:');
            console.log(redSquare.element.layers);
        }

    }, this);
};

And here is the sample project:
https://playcanvas.com/editor/project/1190037

Any idea why the element is still visible after removing the layer?

2

Unfortunately, I can’t really figure it out.

Anybody else came across this issue?

3

Hi @Ramon!

It looks like the topic below is related.

Maybe it can help you.

4

Hi @Albertos,

Thanks for your reply!

I saw that post and used yaustars method to remove a layer.

Yaustars code:


this.newlayer = this.app.scene.layers.getLayerByName('New');
this.layers = this.cameraEntity.camera.layers.splice(0);

var index = this.layers.indexOf(this.newlayer.id);

this.layers.splice(index, 1);
this.cameraEntity.camera.layers = this.layers;

My code:

const redSquare = this.app.root.findByName('Front');
let layers = redSquare.element.layers.splice(0);
const newLayer = this.app.scene.layers.getLayerByName('Front')

var index = layers.indexOf(newLayer.id);

layers.splice(index, 1);
redSquare.element.layers = layers;

The difference is that Yaustar is removing the layer from the camera entity resulting in all entities which have the specific layer to not be visible.

I keep the layer on the camera entity, as in my main project file I need other entities which have the specific layer to be visible while hiding just one (the one i am removing the layer of).

In the sample project I shared, I reconstructed the issue in a very simple setup.

5

I understand. In the shared topic there seems to be a problem with removing the layer from the camera component. Maybe the same problem occurs when you try to remove a layer from another component. As far I understand the workaround is to disable the entity, then change the layers and after that enable the entity again.

6

Unfortunately the workaround to disable the entity, remove layer, then enable the entity does not work in the sample.

I might just make different layers for each entity I want to indivually change its z index. As removing the layer from the camera entity does work.

7

Hmm, after you’ve changed the element’s layers, you could probably reassign the camera layers to camera, without changing them. I think that should trigger a refresh.

@mvaligursky , any suggestions?

8

Hi @LeXXik,

reassigning the layers to the camera does not fix it unfortunately.



this.app.root.findByName('Camera').enabled = false;
let cameraLayers = this.app.root.findByName('Camera').camera.layers.splice(0);
this.app.root.findByName('Camera').camera.layers = cameraLayers;
this.app.root.findByName('Camera').enabled = true;

It seems the element needs a refresh. Is there any way to trigger this?

9

I mean, remove the layer from the element first, then reassign the camera layers. You change the element layers, not camera layers. Something like:

const cameraEntity = this.app.root.findByName('Camera');
const camera = cameraEntity.camera;

// change your element layers
this.entity.element.layers = [];

// reassign camera layers
camera.layers = camera.layers;
10

Ah yes, that codesnippet was being executed after removing the element layer first.

This is the whole function which is run after clicking the button.


// initialize code called once per entity
RemoveLayer.prototype.initialize = function () {
    const redSquare = this.app.root.findByName('Front');
    const cameraEntity = this.app.root.findByName('Camera');
    const camera = cameraEntity.camera;

    this.entity.button.on('click', function () {
        console.log('layers before removing:');
        console.log(redSquare.element.layers);
        // logs: [1000]

        let layers = redSquare.element.layers.splice(0);
        const newLayer = this.app.scene.layers.getLayerByName('Front');

        var index = layers.indexOf(newLayer.id);

        if (index >= 0) {

            layers.splice(index, 1);
            redSquare.element.layers = layers;

            // reassign camera layers
            camera.layers = camera.layers;

            console.log('layers after removing:');
            console.log(redSquare.element.layers);
            // logs: []
        }
    }, this);
};
11

Well, I just tried myself and it works without touching the camera layers, just changing the UI element layers:

https://playcanvas.com/project/1191004/overview/remove-layer

13

Thank you, I finally made it work.

The layers did in fact change on my element however the overlay entity had the wrong layer assigned. This resulted in the red square to still show in front.

My mystake, but thank you for your help!

1 Like