[SOLVED] Enable and Disable Code Not Working Right

So I tried to change between entities using the up and down keys. Basically there are arrows pointing towards images, and the code is supposed to change between each arrow, by enabling or disabling them. Problem is that the code doesn’t work as expected.

Code:

var GlobalManager = pc.createScript('globalManager');

//Scenes
GlobalManager.attributes.add("title", { type: 'entity', title: 'Title' });
GlobalManager.attributes.add("testlvl", { type: 'entity', title: 'Test Level' });  

//Title
GlobalManager.attributes.add("parrow", { type: 'entity', title: 'Play Arrow' });
GlobalManager.attributes.add("sarrow", { type: 'entity', title: 'Settings Arrow' });
GlobalManager.attributes.add("Arrow", { type: 'entity', title: 'About Arrow' });

// initialize code called once per entity
GlobalManager.prototype.initialize = function() {
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.onKeyUp, this);
    
    //Scenes
    this.title.enabled = true;
    this.testlvl.enabled = false;
    
    //Title
    this.parrow.enabled = true;
    this.sarrow.enabled = false;
    this.Arrow.enabled = false;
};

// update code called every frame
GlobalManager.prototype.update = function(dt) {
    //Title
    if (this.title.enabled === true) {
        if (this.parrow.enabled === true) {
            if (this.app.keyboard.wasPressed(pc.KEY_A)) {
                this.title.enabled = false;
                this.testlvl.enabled = true;
            }
            if (this.app.keyboard.wasPressed(pc.KEY_DOWN)) {
                this.sarrow.enabled = true;
                this.Arrow.enabled = false;
                this.parrow.enabled = false;
            }
            if (this.app.keyboard.wasPressed(pc.KEY_UP)) {
                this.sarrow.enabled = false;
                this.Arrow.enabled = true;
                this.parrow.enabled = false;
            }
        }   
        if (this.sarrow.enabled === true) {
            if (this.app.keyboard.wasPressed(pc.KEY_A)) {
                //To Be Added
            }
            if (this.app.keyboard.wasPressed(pc.KEY_DOWN)) {
                this.parrow.enabled = false;
                this.Arrow.enabled = true;
                this.sarrow.enabled = false;
            }
            if (this.app.keyboard.wasPressed(pc.KEY_UP)) {
                this.parrow.enabled = true;
                this.Arrow.enabled = false;
                this.sarrow.enabled = false;
            }
        }
        if (this.Arrow.enabled === true) {
            if (this.app.keyboard.wasPressed(pc.KEY_A)) {
                //To Be Added
            }
            if (this.app.keyboard.wasPressed(pc.KEY_DOWN)) {
                this.parrow.enabled = true;               
                this.sarrow.enabled = false;
                this.Arrow.enabled = false;
            }
            if (this.app.keyboard.wasPressed(pc.KEY_UP)) {
                this.parrow.enabled = false;
                this.sarrow.enabled = true;
                this.Arrow.enabled = false;
            }
        }
    }   
};

// swap method called for script hot-reloading
// inherit your script state here
// GlobalManager.prototype.swap = function(old) { };

// to learn more about script anatomy, please read:
// http://developer.playcanvas.com/en/user-manual/scripting/

Link to Editor: https://playcanvas.com/editor/scene/926034

So can someone help me fix this issue? Is there some code that I wrote wrong?

Your event hooks are set to execute onKeyDown() and onKeyUp() methods, which are absent, or not part of your copy/paste.

You should carefully think about what goes into update method, and if you can avoid it. The easiest way is to consider if it is a “single frame” action, or something that needs to span over many frames.

Example of actions that need to take place over many consecutive frames: moving entity or element from point A to point B. Unless you teleport it, you can’t fit that action into a single frame.

Example of a single frame action: enable or disable entity, teleport something, switch something on or off, etc. Unless you are animating a slowly fading out entity, it only needs a single frame. No need to put it into update method.

Your arrows are only being enabled/disabled on key press. An action that doesn’t need many frames. Your event hook is correct, so create your onKeyDown() and onKeyUp()`` methods and put your arrow entities handling there.

Could you give me a quick example of how to use onKeyDown as an event?

You add a method to your script that acts as an event listener:

// initialize code called once per entity
GlobalManager.prototype.initialize = function() {
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
};

GlobalManager.prototype.onKeyDown = function(e) {

   if( e.key === pc.KEY_DOWN){
      // arrow down is pressed
   } 
};
1 Like