[SOLVED] Trying to put element ui image on top of entity

Help & Support
1

I’m trying to put an element ui over an entity. So when the player presses a key it moves to where it is.
I know an element ui works in a 2d screen element and an entity is in a 3d space. So I’m using the function worldToScreen of the camera:

var elementPos = new pc.Vec3();
this.mainCam.camera.worldToScreen(this.entity.getPosition(), elementPos);
this.element.setLocalPosition(elementPos);

It moves the element but it’s never over the entity, it doesn’t even cover it a bit. It’s always too far from the entity.
image

The green tick image should be over the cube.

2

Hi @Visama,

Why do you use world to screen to position the element entity?

Even though it’s a 2D graphic that entity can still be positioned in 3D space to easily get what you want.

Something like:

this.element.setPosition(this.cube.getPosition());

If the element renders to the UI layer only it will be always rendered on top of the cube.

3

I’m using that function and the tick doesn’t appear anymore.

4

Can you try posting a sample project to debug this?

5

https://playcanvas.com/editor/scene/870676

It happens more or less the same. The element is not positioned on top of the cube.

6

Ok, so you need a number of things to get this working using elements:

  • No need to use a 2D Screen since you are positioning the element in 3D space (this requires to scale the element by 0.01).
  • You need to add a material with Depth Test disabled on your element.
  • And create a new pc.Layer in the project’s settings where you can set a different sort order.

https://playcanvas.com/editor/scene/870678

Here is the updated project, as soon as you press space the element will be positioned in place.

7

But then I can’t use the opacity variable to fade it out. Since it’s a material I will have to change sth else I guess

8

Yes sure, just use regular Opacity on the material.

9

oh, materials have opacity too?

10

Oh yeah, I’ve updated the project:

image

11

ok, so I just have to change the opacity of the material, I don’t have to set the material again to the entity, right?

12

No, doing it once in the editor would be sufficient.

13

I’m going to try then. The game is almost finished actually, except for the tick and cross elements.

1 Like
14

image
image.png853×619 93.6 KB

I’ve tried to do as you did but the corners of the element are black instead of transparent. Also it cuts the edges of the sprite :S

15

Maybe I should use the 2D Screen element, so it scales when the width of height of the screen changes.
And it allows transparency.

16

You can definitely use transparency in the custom material you’ve created:

image

Drag and drop your image in the Opacity channel, change the Blend Type to Alpha, select the appropriate channel (when using PNGs it would be usually A) and play with Intensity.

17

Oooooh the channel. That was my problem
Now it works fine. I haven’t noticed the channel was there till now XD
Thank you for your help, now everything is working. I’ve tried sth similar with raycasting but this is easier XD

1 Like