I’ve tried to change the materials of an object according to several buttons. The issue is that the buttons doesn’t work as intended. The selected script to be run when clicked on the button, activates whenever I clicked on any point in the screen.
The green.js and red.js are scripts which must be added to the buttons. And the colorizer.js controls and manages the object’s materials. So it must must be added in to the object (the bottle). What I planed to happen when the user clicked on the button, is to trigger a function which is written in the colorizer.js. That specific function would ultimately change the materiel.
Here’s the link to my project: https://playcanvas.com/project/709268/overview/bottlestyler
What did I do wrong?
Hi @navinzero,
The reason this is happening is because of using this input event:
this.app.mouse.on(pc.EVENT_MOUSEDOWN, this.onPress, this);
This will attach a mouse click input on the whole page window, not only to the element. Use this instead:
this.entity.element.on('mousedown', this.onPress, this);
Take a look at this tutorial for more info on how to use it:
https://developer.playcanvas.com/en/tutorials/ui-elements-buttons/
2 Likes
Thanks again @Leonidas for helping me to figure out my noob issues.
This solution totally worked!
Btw, can you please explain what does pc mean? furthermore, is there a place where I can find the other input tags as the 'mousedown'?
That’s the global namespace holding all Playcanvas classes and static properties/methods. So basically here you reference a static property pc.EVENT_MOUSEDOWN instead of typing 'mousedown' (which is the same thing, but it’s better using the pc reference in case in the future something changes).
You can find all the mouse, and other kind of events, for the element component here:
https://developer.playcanvas.com/en/api/pc.ElementComponent.html#event:mousedown
1 Like