Search Unity

  1. We are migrating the Unity Forums to Unity Discussions by the end of July. Read our announcement for more information and let us know if you have any questions.
    Dismiss Notice
  2. Dismiss Notice

Question Floating UI Help

Discussion in 'UGUI & TextMesh Pro' started by AltaAuctor, Jan 14, 2024.

  1. AltaAuctor

    AltaAuctor

    Joined:
    Oct 8, 2023
    Posts:
    11
    Hello,

    I'm working on positioning my UI directly above the center of my character. While it looks fine when the character is at the center of the camera's perspective, there's an issue when I move to the far left or right of the camera's perspective. I've attached two screenshots to help visualize the issue. Could someone help me address this problem? For additional context, target is set to the player's transform, camera is the main camera, and the canvas is the scene's canvas which is set to overlay.

    Please also note that this script was quickly made so the naming and lack of use for some variables will be altered once I iron out this issue. Here's the script:

    Code (CSharp):
    1. using System.Collections;
    2. using System.Collections.Generic;
    3. using UnityEngine;
    4. using UnityEngine.UI;
    5.  
    6. public class PlayerFloatingUI : MonoBehaviour
    7. {
    8.  
    9.     [Header("UI Settings")]
    10.     [SerializeField] private Vector3 offset;
    11.     [SerializeField] private Canvas canvas;
    12.     [SerializeField] private Camera cam;
    13.     [SerializeField] private Transform target;
    14.  
    15.     [Header("UI Prefabs")]
    16.     [SerializeField] private Image xBtnPrefab;
    17.     [SerializeField] private Image xAtnPrefab;
    18.  
    19.     private Image uiUse;
    20.  
    21.     // Start is called before the first frame update
    22.     void Start()
    23.     {
    24.         uiUse = Instantiate(xBtnPrefab, canvas.transform).GetComponent<Image>();
    25.     }
    26.  
    27.     // Update is called once per frame
    28.     void Update()
    29.     {
    30.  
    31.         uiUse.transform.position = cam.WorldToScreenPoint(target.position + offset);
    32.  
    33.     }
    34.  
    35.  
    36. }
     

    Attached Files:

  2. AltaAuctor

    AltaAuctor

    Joined:
    Oct 8, 2023
    Posts:
    11
    Here are alternative screenshots. Better display the issue I'm having.
     

    Attached Files:

  3. LarsTheGlidingSquirrel

    LarsTheGlidingSquirrel

    Joined:
    Apr 24, 2020
    Posts:
    9
    I think the UI is positioned "correctly": If you would draw a line in 3D from the center of your character upwards it would go through the center of your UI. But, that is obviously not what you want here. Instead, the bottom-center of your UI should be above the characters center and "above" should be moving vertically on the screen.

    To achieve that you could:
    1. Get the screen coordinates of the character's center
    2. Add half of the UI height
    3. Add a vertical offset to make it float above the character
    Compared to your approach, this will add the offsets in screen-space where "above" will always move vertically on the screen (which is not true for offsets added in 3D)
    Just be aware that if your camera moves, this approach might not work. Then you might have to scale the offset or use a 3D offset again. In that case it can get a little complicated. I experimented a lot while working on my Unity asset. But your camera looks like a non-moving one to me, so this should hopefully work.