Match position of Character with a VisualElement (UI Toolkit)

Getting Started
,
1

Hi,
I would like to match the position of a 2D visual Element made in UI Toolkit with the position of a game character.

So I did add a UIDocument containing the VisualElement and a C# Script for positioning the VisualElement to the Character GameObject

Screenshot 2024-10-21 at 22.28.22
Screenshot 2024-10-21 at 22.28.221216×598 65.8 KB

I set canvas size to Match Game View
Screenshot 2024-10-21 at 22.31.15
Screenshot 2024-10-21 at 22.31.15896×208 6.64 KB

Screenshot 2024-10-21 at 22.31.29
Screenshot 2024-10-21 at 22.31.291022×678 57.3 KB

Unfortunately the Visual Element (the white C) is a little right and below of the capsule.

These are the lines to position the VisualElement (customUIElement) to match the character position (transform)

...
            cameraTarget = GameObject.Find("ExampleCamera").GetComponent<Camera>();
            screenPosition = cameraTarget.WorldToScreenPoint(transform.position);

            uiPosition = new Vector2(screenPosition.x, Screen.height - screenPosition.y);

            customUIElement.style.left = uiPosition.x;
            customUIElement.style.top = uiPosition.y;
...

but the uiPosition x and y seem to be incorrect.

In addition I found out that the position changes between different devices. So for an iphone it is placed on the screen and some how follows the character but for an ipad it is outside the screen somewhere.

Any Idea how to fix it?

2

ok I found out with Scale Mode = Constant Pixel Size it looks better. But still the size depends on the device size.