How to make a UI entity disappear and reappear (and opacity issues)

Help & Support
1

Now that the ruler functionality is complete, the next step is to figure out ETA’s initiative and token spawning functionalities. Both of these require UI entities that disappear and reappear when the relevant buttons are pressed.

However, a couple of roadblocks present themselves: how to make the UI entities disappear and reappear, how to make those UI entities opaque, and how to keep mouse input from activating the tiles behind the UI.

image
image.png1282×737 83.5 KB

Here is a link to the relevant script. Lines 31-34 & line 64 are the ones meant to make the token spawner window disappear and reappear. It’s partially based on Will Eastcott’s WebGL Chess game’s “button” script, which I have forked and am attempting to grok. Hopefully WebGL Chess doesn’t use legacy scripting.

A big thanks to everyone who’s been helping. Your help has been invaluable.

2

I don’t quite understand this fully.

If you need UI elements to appear/disappear, you can enable/disable the entities for the UI elements.

Not sure what you mean by the rest of this.

1 Like
3

You must also change the material opacity as well as disable the button.
0 = no opacity
1 = fully opaque
Numbers in between are valid and will give different levels of opacity.

Addendum: I could be wrong that you “must” change the opacity. But that is what I did on our recent project because we wanted them to fade out, not disappear instantly.
…

    this.entity.element.material.opacity = 0;         
    this.entity.blendType = pc.BLEND_NORMAL;
    this.entity.element.material.update();
1 Like
4

Well, my problem is that I can still see things behind the UI entity (e.g. that green cube), even when the opacity is at full:

image
image.png1816×484 86.2 KB

5

Alright, I’ll try to gather my thoughts for you.

6

If u really need anymore help try https://developer.playcanvas.com/en/tutorials/keepyup-part-six/ helped me out for many things

1 Like
7

Does the button image have transparent background?

1 Like
8

Doesn’t look like it.

image
image.png1187×345 51.3 KB

9

The render order is incorrect. It should be:

image

Refresh the editor after changing the order
image

1 Like
10

Thanks, Yaustar. I’ve fixed the render order, and now I have another problem with the token spawner. In order to make scripting the token spawner functionality simpler, I dragged and dropped all of the token spawner stuff into the token spawner button.
image
Unfortunately, this causes some strange behavior with the token spawner.
If you follow the link, you can see on lines 74-79 that are causing the problem. By all rights, if the event’s texture asset matches the passiveAsset, then the script should execute. And as you can see here, they do in fact match.
image So, what’s the problem? Why isn’t the script working?

On lines 89-114, there is a block comment. If you swap the uncommented script above it with the script below it, you’ll find that the script below enable and disable tokenUI just fine.

I know this question is disjointed and confusing, and I’m sorry. But I’m just…lost.

11

Likes like textureAsset is a number and passiveAsset is a JS object judging from the way that they were printed in the console logs.

Edit: API docs confirm that textureAsset is just the id of the asset used: https://developer.playcanvas.com/en/api/pc.ElementComponent.html#textureAsset

12

So, I need to findById the passiveAsset, then?

13

I’m only telling you why the if statement failed. I have no idea what logic you are trying to perform here.

14

Alright, I gave up on what I was trying to do. I’ll try a different way.