Unity: UI following scene object lags or jumps

Question

I have a 3D plane with "enemies", each one has it's canvas with a health bar, that follows the enemy position. When the enemy rotates, the health bar position gets laggy and jittery (you see no fluently, like a jump)

The code that I'm using is:

 private Camera _camera;
 private RectTransform _healthBarReact;

 void Start {
     _camera = GameObject.Find("Camera").GetComponent<Camera>();
     _healthBarReact = transform.FindChild("HealthBarImage").GetComponent<RectTransform>();
 }

 void Update {
       Vector3 screenPoint = _camera.WorldToScreenPoint(transform.parent.position); // the parent is the enemy, I attached the script to the child canvas "HealthBar"
     _healthBarReact.position = screenPoint;
 }

How can I fix that "lag" issue? apparently, the issue only occurs when the enemy is rotating... when it follows you in a straight line, the healthbar looks well.

Answer 1

All UI follow functionality should be implemented in LateUpdate() method. See manual.

Example using your code:

void LateUpdate {
    Vector3 screenPoint = _camera.WorldToScreenPoint(transform.parent.position); // the parent is the enemy, I attached the script to the child canvas "HealthBar"
    _healthBarReact.position = screenPoint;
}

Answer 2

Camera matrix update is delayed until very late in frame (probably updates just before rendering). WorldToScreenPoint relies on matrix to calculate screen position.

To make it work correctly you have to do two things:

1. Ensure HealthBar update is called AFTER input handling (which moves camera)
2. Force Camera matrix to be updated

The code:

using UnityEngine;

public class HealthBarPositionUpdate : MonoBehaviour
{
    public GameObject Enemy;
    public RectTransform HealthBarElement;

    // LateUpdate ensures that camera position was already updated
    private void LateUpdate()
    {
        Camera.main.ResetWorldToCameraMatrix(); // Force camera matrix to be updated
        var targetPos = Camera.main.WorldToScreenPoint(Enemy.transform.position);
        if (targetPos.z > 0)
        {
            var pos = targetPos.Round(); // Pixel snapping
            pos.z = 0;

            HealthBarElement.SetPositionAndRotation(pos, Quaternion.identity);
        }
    }
}