25. 制作血条的 UI Document
UI Toolkit
本项目使用 UI Toolkit 进行
HealthBar
通过 Create -> UI Toolkit -> UI Document 创建一个 HealthBar
在 HealthBar 里面，我们可以添加一个 Progress Bar 用于表示血条，然后将 ProgressBar 改成下面的样子，Anchors 向左 150 像素，向上 20 像素，宽度 300 像素
Panel Settings
Create -> UI Toolkit -> Panel Setting Asset，起名叫 Panel Settings
然后我们让它的 Scale Mode 为 Scale With Screen Size，分辨率改为 1920 x 1080，Match 改为 0.5
Player 添加插件
在 Player 上面，添加 UI Document 插件，其中 Panel Settings 和 Source Asset 是之前 UI Tookit 里创建好的资源
然后在 Player 下面添加一个子节点，用于表示血条的位置
最后在 Player 上面添加 HealthBarController 组件
HealthBarController 组件的代码如下
using UnityEngine;
using UnityEngine.UIElements;
public class HealthBarController : MonoBehaviour
{
[Header("Elements")]
public Transform healthBarTransform;
private UIDocument healthBarDocument;
private ProgressBar healthBar;
private void Awake()
{
healthBarDocument = GetComponent<UIDocument>();
healthBar = healthBarDocument.rootVisualElement.Q<ProgressBar>("HealthBar");
Debug.Log($"{healthBarTransform.position}");
MoveToWorldPosition(healthBar, healthBarTransform.position, Vector2.zero);
}
private void OnEnable()
{
healthBarDocument = GetComponent<UIDocument>();
healthBar = healthBarDocument.rootVisualElement.Q<ProgressBar>("HealthBar");
Debug.Log($"{healthBarTransform.position}");
MoveToWorldPosition(healthBar, healthBarTransform.position, Vector2.zero);
}
private void MoveToWorldPosition(VisualElement element, Vector3 worldPosition, Vector2 size)
{
Rect rect = RuntimePanelUtils.CameraTransformWorldToPanelRect(element.panel, worldPosition, size, Camera.main);
Debug.Log($"{rect.position}");
element.transform.position = rect.position;
}
[ContextMenu("Get UI Position")]
public void Test()
{
healthBarDocument = GetComponent<UIDocument>();
healthBar = healthBarDocument.rootVisualElement.Q<ProgressBar>("HealthBar");
Debug.Log($"{healthBarTransform.position}");
MoveToWorldPosition(healthBar, healthBarTransform.position, Vector2.zero);
}
}
这段代码中
在 Awake 的时候，获取 UIDocument 里面的 HealthBar，然后把它移动到 HealthBarTransform 所在的位置
为了方便调试，我们增加了 Test 方法，这样可以在没有运行的时候，也能在 HealthBarController 组件上面右键选择 Get UI Position 来显示血条的位置
但是这个方法好像有问题，群里的小伙伴都说 Awake 时的血条位置和 Test 时的血条位置不一致。老师让我在 OnEnable 里试试，我发现把 Player Disable 再 Enable 之后，血条位置也是不一样的。暂时无解
