[SOLVED] Keyboard Button

Hello, I hope you can help me. I need to create a UI button that when clicking with the mouse can replace any keyboard key, I don’t even know how to start.

Hey @Ariel_Cancio!

Start by looking at the input tutorial and the button tutorial. What exactly do you mean by “replace a keyboard key”? You want a UI button to take the place of a keypress in your game/app?

1 Like

Exactly Devil, that’s what I want!

Then, this should work.

this.entity.element.on('click', function (event) {
    //do whatever
}, this); 

Make sure this script is attached to your button @Ariel_Cancio. Instead of the comment, put whatever was inside your keyboard if statement.

Ok Devil, this is the proyect:
https://playcanvas.com/editor/scene/940423

When you press the “A” key the cube changes color. I need the button to be an alternative to the “A” key

In Button Change Color.js, you basically copy pasted the code along with the comment, while the above, mentioned in my previous post is what you needed to do. Change the code to this.

this.entity.element.on('click', function (event) {
    if (this.app.root.findByName("Box").model.meshInstances[0].material === this.redMaterial.resource) {
        this.app.root.findByName("Box").model.meshInstances[0].material = this.whiteMaterial.resource;
    }
    else  {
        this.app.root.findByName("Box").model.meshInstances[0].material = this.redMaterial.resource;
    }
}, this); 

Hope this helps. Don’t forget to add the attributes of the keyboard code in this file, otherwise it won’t work.

Thanks Devil for your help, I have added the attributes in the code and it doesn’t work, I’m sure I’m doing something wrong, I’m really not good at this.

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;
    }
    };

this.entity.element.on('click', function (event) {
    if (this.app.root.findByName("Box").model.meshInstances[0].material === this.redMaterial.resource) {
        this.app.root.findByName("Box").model.meshInstances[0].material = this.whiteMaterial.resource;
    }
    else  {
        this.app.root.findByName("Box").model.meshInstances[0].material = this.redMaterial.resource;
    }
}, this);

Why did you change the name of the script? Give me access to the project. My PlayCanvas username is tester29.

Ok Devil, check now!

Fixed @Ariel_Cancio. You can remove me from the project if all is in order.

Thank you very much Devil, you are very kind

1 Like

Just as a tip - try using the @ feature to notify me instead of just typing my username! Probably would have replied a lot earlier if I had been notified TBH.

Ok @DevilZ can you review the project again? I have added several other buttons that change the material to other cubes, but I would like to have a universal button that changes the material simultaneously to the three cubes, will it be very difficult?

Very late where I live. Will take a look tmrw morning IST.

Ok, no problem. Thank you @DevilZ

Not difficult at all. But I’d recommend you do this yourself using the steps below so as to understand buttons properly. You have seen how I linked the button code to the box by using this.app.root.findByName. Instead of findByName, here, findByTag would be more useful. Add a tag to all your boxes. Change findByName to findByTag, and then in the arguments put in the tag you attached to all your boxes.

Many Thanks !!!

1 Like