Toggle Script

[Sarrus4x4]

Hello, I know there is a Post for this exact problem but I can’t figure out the solution, sry

In my project I am using a SSAO script and i’d like to toggle it by pressing a key. This Post introduced a script to do exactly that but I don’t understand how to change it so it works for me.

I changed the name of the script I do want to toggle (ssao) and the key event.

This is my ssao script attached to the camera

This is the Script from the other post in my project files

I am new to PlayCanvas and not the best coder, so could you please help me find my problem?

Thank you for any help <3

[Leonidas]

Hi @Sarrus4x4,

It should work, not sure why it’s not working for you. Are you getting any errors in the console?

Here is a quick try of mine on an example project, check the toggle-ssao.js script:

ToggleSsao.prototype.update = function(dt) {

    if(this.app.keyboard.wasReleased(pc.KEY_1)){
        this.entity.script.ssao.enabled = !this.entity.script.ssao.enabled;
    }
};

https://playcanvas.com/editor/scene/1746283

[Sarrus4x4]

Thank you for your help!

I found the problem… I was stupid and did not add the toggle script to the camera

Now it works

[Sarrus4x4]

Is it also possible to link this toggle to a simple button? A simple JS button as an overlay to the Application.

[Leonidas]

Here I’ve updated the script to listen to a UI button at the same time. To do that I’ve moved the script to the button entity, and added a separate script attribute to target the camera entity:

var ToggleSsao = pc.createScript('toggleSsao');

ToggleSsao.attributes.add('cameraEntity', {
    type: 'entity'
});

// initialize code called once per entity
ToggleSsao.prototype.initialize = function() {

    // --- events
    this.entity.button.on('click', function(){
        this.toggle();
    }, this);
};

ToggleSsao.prototype.toggle = function() {
    this.cameraEntity.script.ssao.enabled = !this.cameraEntity.script.ssao.enabled;
};

// update code called every frame
ToggleSsao.prototype.update = function(dt) {

    if(this.app.keyboard.wasReleased(pc.KEY_1)){
        this.toggle();
    }
};

https://playcanvas.com/editor/scene/1746283

[Sarrus4x4]

Thank you very much! This is very helpful

[Jacob_McBride2]

First, make sure you have added an event listener to capture the key press event. Based on the image you provided, it seems you’re using the ‘keydown’ event to toggle the SSAO script. That’s a good choice.

Next, let’s modify the script you shared to toggle the SSAO script. Here’s an example of how you can modify it:

var ToggleSSAO = pc.createScript('toggleSSAO');

// Variables
ToggleSSAO.prototype.initialize = function() {
    // Reference to the camera entity
    this.cameraEntity = this.entity.camera;

    // Reference to the SSAO script component
    this.ssaoScript = this.cameraEntity.script.ssao;
};

// Key press event handler
ToggleSSAO.prototype.onKeyDown = function(event) {
    if (event.key === 's') { // Change 's' to the desired key
        this.ssaoScript.enabled = !this.ssaoScript.enabled; // Toggle the enabled state of the SSAO script
    }
};

In this modified script:

1. We added two variables: cameraEntity to reference the camera entity, and ssaoScript to reference the SSAO script component.
2. In the initialize function, we assign the camera entity and SSAO script component references.
3. In the onKeyDown function, we check if the key pressed is the desired key (in this example, ‘s’). If it is, we toggle the enabled property of the SSAO script, which will enable or disable it.

Make sure you attach this modified script to the same entity where you attached the original SSAO script (the camera entity).

Remember to change the key code (‘s’ in the example) to the key you want to use for toggling the SSAO effect.

I hope this helps! Let me know if you have any further questions or issues.

[Tirk182]

@Jacob_McBride2 I am curious about the answer you provided after this was answered for the user by @Leonidas. Did you actually try this with the user provided project? The text is suggesting that an event listener needs to be added but I don’t see this in the initialize. Is this a ChatGPT answer? I am confused and hope that the person who originally posted this question is not now confused.

[Sarrus4x4]

@Tirk182 Thank you for your conserns.

I still have a little problem. The button that is used in the example from Leonidas is a PlayCanvas UI Button. I would like to use a simple JavaScript/html button that is displayed as an overlay over my application (3D model viewer). But when researching after “playcanvas button” i only get results for the PlayCanvas UI version

I noticed that I need this, because I want to test the application on mobile and there is no keyboard available there…

Thank you for any advice

[Leonidas]

Hi @Sarrus4x4,

Check this example on how to use an HTML button. You will find in the relevant script the JS code that responds on the click event which you can use similarly to the code above.

https://developer.playcanvas.com/en/tutorials/htmlcss-ui/

[Sarrus4x4]

Yes! Thank you very much, <3 I’ll do my best to convert this to my purposes

[Sarrus4x4]

It worked!