[SOLVED] Tutorial on .render "show()" and "hide()" - object on/off rendered at runtime

Help & Support
1

I presume all the ‘.enabled’-methods are deprecated.
But how to use .render “show()” and “hide()”, in the new hierarchy?

I have used them earlier, but cannot find the specific projects (code snippets) in a good/fast way :-/
The api-sources does not have any real examples.

All in all: As I dont get the same autocomplete feedback as earlier, I am a bit challenged.

2

You call it on the render component. ie this.entity.render.hide() It’s listed as a method on the render component so you call it on the render component https://developer.playcanvas.com/en/api/pc.RenderComponent.html?filter=enti#hide

If you want to get all the render components in an entity hierarchy, you can use findComponents that returns an array of a specific component in the entity and it’s children: https://developer.playcanvas.com/en/api/pc.Entity.html#findComponents

Not sure what you mean by this. Using enabled property on the entity will disable/enable the entity and it’s children.

3

ok, for now I will try the “findComponents”-method … will get back to the enabled-issue at another time (but in case you haven’t used .enabled for a while, would you try it in a 5 minute example? → I have namely had trouble with it on three occasions the last months)

4

.enabled on the entity or compoment?

5

I’m going to assume component. Works fine here: https://playcanvas.com/editor/scene/1387363

Press Space to toggle the the render components enabled property that will make the vehicle appear/disappear

Relevant code:

// update code called every frame
PressSpaceToToggle.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_SPACE)) {
        var renderComponents = this.entity.findComponents('render');
        for (var i = 0; i < renderComponents.length; ++i) {
            renderComponents[i].enabled = !renderComponents[i].enabled;
        }
    }
};

I’ve also added the code to disable/enable an Entity when you press 1

Relevant code:

var Press1ToToggle = pc.createScript('press1ToToggle');
Press1ToToggle.attributes.add('targetEntity', { type: 'entity' });

// update code called every frame
Press1ToToggle.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_1)) {
        this.targetEntity.enabled = !this.targetEntity.enabled;
    }
};

It’s a script on a separate entity because rather than on the entity that gets toggled because when the Entity is disabled, the update in the script is not called so the code to detect the keypress is not ran to enable it again.

6

ok, no the basic one:

this does not work for me - as you can tell I had to use a layer and turn that off and on

// initialize code called once per entity

Flare.prototype.initialize = function() {

    this.flareBokeh_Pos = this.app.root.findByName("FlareBokeh"); this.flareBokeh_Pos2 = this.app.root.findByName("FlareBokeh2");

    this.app.scene.layers.getLayerByName("flare").enabled=false;
7

this is the hierarchy

image

8

Here, you are using the .enabled on a layer, not an entity or component so the hierarchy doesn’t matter here.

The example here works where I have the Box on a layer called ‘Box’: https://playcanvas.com/project/911159/overview/f-layer-enabled

Press Space to toggle the layer on/off

// update code called every frame
ToggleLayer.prototype.update = function(dt) {
    if (this.app.keyboard.wasPressed(pc.KEY_SPACE)) {
        var layer = this.app.scene.layers.getLayerByName("Box");
        layer.enabled = !layer.enabled;
    }
};

9

If you can provide an example project of the issue you are getting, then someone from the community can look into it a bit more.

Right now, I’ve provided all the examples of it working so I assume there’s some issue that is specific to your project

10

well for now - did this rewrite that works:


var ToggleLayer = pc.createScript('toggleLayer');

// initialize code called once per entity

ToggleLayer.prototype.initialize = function() {

this.layerBx = this.app.root.findByName("Box");

};

// update code called every frame

ToggleLayer.prototype.update = function(dt) {

    if (this.app.keyboard.wasPressed(pc.KEY_SPACE)) {

       

        this.layerBx.enabled = !this.layerBx.enabled;

    }

};

So will dive into look for the the error myself (should be able to compare and find it … or somehow copy project and chissel down the lines, to see where it goes wrong)

(will return if it still bugs me)

thx anyway and solved