[SOLVED] Problem to release key_Change object material

Help & Support
1

Hello, could someone help me? I have this cube which uses a script to change material when the player presses the A key, the problem is that I can’t get the material to hold when the A key is released, releasing the key returns to the original material. What is the problem?

The code:

var KeyboardHandler = pc.createScript('keyboardHandler');

KeyboardHandler.attributes.add('redMaterial', {
    type: 'asset',
    assetType: 'material'
});

KeyboardHandler.attributes.add('whiteMaterial', {
    type: 'asset',
    assetType: 'material'
});

// initialize code called once per entity
KeyboardHandler.prototype.initialize = function() {
    // Use on() to listen for events on the keyboard device.
    // Arguments are:
    // 1) The event name to listen for
    // 2) The callback function to call when the event fires
    // 3) (optional) The value to use for 'this' in the callback function
    
    this.app.keyboard.on(pc.EVENT_KEYDOWN, this.onKeyDown, this);
    this.app.keyboard.on(pc.EVENT_KEYUP, this.onKeyUp, this);
};



/*
* Event handler called when key is pressed
*/
KeyboardHandler.prototype.onKeyDown = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.redMaterial) {
        this.entity.model.meshInstances[0].material = this.redMaterial.resource;
    }

    // When the space bar is pressed this scrolls the window.
    // Calling preventDefault() on the original browser event stops this.
    event.event.preventDefault();
};

/*
* Event handler called when key is released
*/
KeyboardHandler.prototype.onKeyUp = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.whiteMaterial) {
        this.entity.model.meshInstances[0].material = this.whiteMaterial.resource;
    }
};

/*
* Event handler called when key is pressed
*/
KeyboardHandler.prototype.onKeyDown = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.whiteMaterial) {
        this.entity.model.meshInstances[0].material = this.whiteMaterial.resource;
    }

    // When the space bar is pressed this scrolls the window.
    // Calling preventDefault() on the original browser event stops this.
    event.event.preventDefault();
};

/*
* Event handler called when key is released
*/
KeyboardHandler.prototype.onKeyUp = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.redMaterial) {
        this.entity.model.meshInstances[0].material = this.redMaterial.resource;
    }
};

The proyect:

https://playcanvas.com/project/690542/overview/test-segundero

2

Possibly because this also changes the material.

3

It is difficult to see what causes it. The keyboard_handler script in your project is empty (and not saved). I’m not sure if your if statements are correct and maybe two functions are run in succession because you use them twice. I would put them together. So one function for the onKeyUp and one for the onKeyDown.

4

Sorry albertos, check now the script! maybe I accidentally emptied it.

5

Hay @Ariel_Cancio! I would like to know with what intention you use this.redMaterial and this.whiteMaterial in your if statements.

6

Hello albertos, with the intention of switching the material. Maybe not the best way to make this work ??

7

Oke, when do you want to switch the color?

8

only when the key is pressed, not in released.

9

Then this is all you need:

var KeyboardHandler = pc.createScript('keyboardHandler');

KeyboardHandler.attributes.add('redMaterial', {
    type: 'asset',
    assetType: 'material'
});

KeyboardHandler.attributes.add('whiteMaterial', {
    type: 'asset',
    assetType: 'material'
});

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

KeyboardHandler.prototype.onKeyDown = function (event) {
    // Check event.key to detect which key has been pressed
    if (event.key === pc.KEY_A && this.entity.model.meshInstances[0].material === this.redMaterial.resource) {
        this.entity.model.meshInstances[0].material = this.whiteMaterial.resource;
    }
   
    else if (event.key === pc.KEY_A) {
        this.entity.model.meshInstances[0].material = this.redMaterial.resource;
    }
};

It could probably be even better, but I am not a professional either.

10

Many Thanks Albertos!!

1 Like
11

Oops! I made a small change to the code above to avoid problems.