Hi, I have some drawer animation (open and close the drawer). I would like to have a 3d/2d button which will be opened/closed with the drawer. Even if I will do a 3d sphere I will show it flat without a shadow to look flatter. I have also an idea to put *.png image with transparency and use that as a button. Could you point me to some tutorials or documentation which would help me with that, because I don`t know where to start?
Thanks in advance.
Hi @mdesign!
If I understand you correctly, you can use an entity with an image element component.
https://developer.playcanvas.com/en/user-manual/user-interface/image-elements/
To detect user input, be sure ‘Use Input’ is enabled.
https://developer.playcanvas.com/en/user-manual/user-interface/input/
Thanks. How do an image which is always directed toward the camera? I would like to be always visible from the front. Is that possible?
You can add the script below to the entity.
var LookAtScreen = pc.createScript('lookAtScreen');
// initialize code called once per entity
LookAtScreen.prototype.initialize = function() {
this.cameraEntity = this.app.root.findByName('Camera');
};
// update code called every frame
LookAtScreen.prototype.postUpdate = function(dt) {
this.entity.setEulerAngles(this.cameraEntity.getEulerAngles());
};
Thanks a lot.
Everything works super.
I have additional questions. How to do Image Element (button) would be visible through everything? I would like to be on a top layer. I`ve tried with UI and World layer without success.
What if I would like to change the image by hovering the mouse over the button (image element)? Could you give me some direction?
PlayCanvas | HTML5 Game Engine - This is how it looks.
I would like to set that buttons are visible through everything (I will hide them with logic later).
The second change is that I would like to set hovered button as a different image. I see there are only tint, sprite or static image options.
Could you help me with that?
The way I would do it is to clear the depth buffer in a render layer before rendering the UI elements. I’ve done something similar here: [SOLVED] Render Object Over Another Objects with one camera - #5 by yaustar
The other way is to do camera stacking: Search results for 'camera stacking order:latest' - PlayCanvas Discussion
Thanks, it works.
Could you tell me why button stages (sprite images) are white squares after moving the mouse from the hovering stage?
This is my project: PlayCanvas 3D HTML5 Game Engine
OK. I’ve solved it. The image in Element Component should be a sprite also not an image. If it’s an image and the hovering stage is a sprite then there is that error that I`ve posted above.
