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

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.

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.

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

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;
1 Like

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:

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

If u really need anymore help try helped me out for many things

1 Like

Does the button image have transparent background?

1 Like

Doesn’t look like it.

The render order is incorrect. It should be:


Refresh the editor after changing the order

1 Like

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.
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.

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:

So, I need to findById the passiveAsset, then?

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

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