Some icon problems

It is probably not my day today, because everything I wanted to achieve today is causing problems. Who would like to help?

  • I try to make a plane with a icon that is on the same position of the player but that is visible in front of the player. I try to do that setting the plane on a diffrent layer and set this layer after the layer of the player, but it doens’t work.

  • I also want to know how i set up a look at the camera function, but not to the center of the camera so that the plane with the icon stays straigt like a UI element.

  • I’m unable to simply put an UI element at the mouse position. Very furious.

Hey @Albertos, not sure how to fix 1) and 2). However, for 3), you could try something similar to this - https://developer.playcanvas.com/en/tutorials/mouse-input/. Instead of a cube following the mouse as in the tutorial, you could put you UI element instead.

Thanks for your comment. Unfortunately that doesn’t seem to work with UI elements in my project.

With the same script?

I will try to make a sample project for this issues later today.

1 Like

I made a sample project with four icons.

  • An world icon that should look at the camera but horizontally straight
  • An world icon that must be visible on top of a world entity
  • An UI icon that must take over the position of a world entity
  • An UI icon to take over the position of the mouse

If you can do one of these things, I would like to hear how it should be done. I can add you to the project if that is easier for you. Thanks in advance!

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

2 Likes

Please add me to the project. As I said, I am not sure how to solve the first and second problems, but can solve the third. My username:- tester29

I added you to the project @DevilZ.

1 Like

Is there anyone else who can help?

Hi @Albertos,

Not sure I fully understand, but if you mean the entity shouldn’t rotate up/down to stay on the same XZ level you can do it like this:

    var pos = this.entity.getPosition();
    var cameraPos = this.cameraEntity.getPosition();
    
    this.entity.lookAt(cameraPos.x, pos.y, cameraPos.z);

Well, if it’s a world icon then just position it on top of a world entity? Otherwise to have it render always above other entities you can disable Depth Test on that material:

image

The code you have in place is correct, you just need to update the Element properties (and entity scale to something meaningful) to:

image

Update your element properties to use the Top/Left preset (mouse coordinates start from Top/Left):

image

And you can use this code to position your element to the mouse cursor pos.

    // scale mouse coordinates to screen space
    var scale = screenEntity.screen.scale;
    
    this.entity.setLocalPosition(event.x / scale, -event.y / scale, 0);

I’ve updated your project with my changes:

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

Hi @Leonidas,

I can’t get it done with your instructions. It does not work. Your own project gives an error which prevents me from testing it properly.

I will explain what I need slightly better:

An world icon that should look at the camera but horizontally straight

With this i just mean an world object that is straight looking to the screen. (So not to the centre of the camera).

An world icon that must be visible on top of a world entity

With this i mean that the world icon only has to be on top of the player. Not other world objects. I tought we can do that with the layer but i doesn’t work. I already at the layer WorldTop to it.

An UI icon that must take over the position of a world entity

With this i mean an UI icon that is visible on the same position as a world entity. There is a tuturial for that but that solution is not working on mobile when you use Device Pixel Ratio for the project.

An UI icon to take over the position of the mouse

This works partly, I keep getting an offset…

I’ve fixed my error, you can check the project again. Most of the things you ask have been implemented, about this:

Sorry, I don’t understand the difference, when you mean screen I think something different than the viewport (which is the camera).

Why don’t you add it as a child to the player and position it on top of the Player using the Move gizmos? It will always follow the player and stay on top of him.

Only the ‘on top op player icon’ is fixed now, so thanks for that. I don’t know how to move with gizmos. Can you explain that?

The other things are still not working, also not in your project:

  • The icon that is looking to the camera looks to the centre of it. So the text is not straight on the screen.

  • The icon that has to be follow the mouse has an offset. So it’s not on the same position as the mouse.

  • The icon that has to be follow a world entity is also not on the same position as the entity.

I left that for you :slight_smile: Having the elements follow the object/cursor is most of the work.

You can get the size of the element (element width/height) and adjust the equation to take into account that offset.

Hah, not sure how we ended up here :slight_smile:

Spent close to an hour to do work on all of your points, hoped to give you a head start.

Sorry, I still don’t understand what you mean straight and also point at the screen at the same time. Maybe an illustration would help here.

In my solution, the plane looks towards the camera but also stays horizontal to the XZ plane. Much like tree billboards do in open world games:

image

Haha, yes I am grateful for that, but it still does not work.

And i mean like all the text on your screen is straight on the screen and not looking the the center of the screen so you can read it normal. The icon is now pointing to the center of the screen.

No worries, programming can be mean from time to time. One thought that always helps me is to keep looking for workarounds, when stuck, that is very true especially in game dev.

I think I understand now what you ask, you would like to have the plane rotated to face the camera clipping planes (viewport). To do that you would have to find a way to rotate that entity to be parallel to the camera’s frustum planes.

I am not sure how to easily do this, haven’t done this before.

1 Like

Here is an example, on how to make this, if I understood the issue correctly:

Project link

Yes, that’s it! Thank you for making this example @LeXXik!