25. 制作血条的 UI Document

合集 - 王国之梦(42)

1.02. 创建房间的 Prefab2024-03-012.03. 设计地图配置表2024-03-013.04. 生成地图上的房间2024-03-014.07. 泛型事件框架2024-03-025.08. 场景加载2024-03-026.09. 保存地图场景2024-03-027.10. 房间进出逻辑2024-03-028.11. 制作卡牌 Prefab2024-03-039.12. 创建卡牌数据类2024-03-0410.13. 对象池2024-03-0411.14. 制作卡牌库实现抽卡2024-03-0512.15. 创建卡牌布局2024-03-0513.16. 抽卡动画2024-03-0514.17. 实现卡牌扇形布局2024-03-0515.18. 实现鼠标事件2024-03-0516.19. 卡牌拖拽2024-03-0517.20. 攻击牌的拖拽指针2024-03-0518.21. 实现洗牌逻辑2024-03-0519.22. 导入Spine人物素材2024-03-0520.23. 人物基类代码2024-03-0521.24. 执行卡牌效果2024-03-05

22.25. 制作血条的 UI Document2024-03-05

23.26. 绑定血条数据2024-03-0624.27. 创建USS血条样式2024-03-0625.28. 制作 Gameplay Panel2024-03-0626.29. 绑定 Gameplay Panel 数据2024-03-0627.30. 回合转换2024-03-0628.31. 出牌能量判断2024-03-0729.32. 防御牌及 UI2024-03-0730.33. 回血的苹果牌及特效2024-03-0731.34. 增加力量牌及 UI2024-03-0732.35. 更多卡牌2024-03-0733.36. 人物动画2024-03-0934.37. 敌人意图 AI 逻辑2024-03-1135.38. 敌人的动画执行逻辑2024-03-1136.39. 对战胜负逻辑2024-03-1237.40. 制作胜利和抽卡面板2024-03-1238.41. 抽卡面板的实际逻辑2024-03-1239.42. GameOver 及 Menu 面板2024-03-1340.43. 实现休息房间的逻辑2024-03-1341.44. Boss 制作和整体流程2024-03-1342.45. 淡入淡出及打包游戏2024-03-13

收起

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 之后，血条位置也是不一样的。暂时无解

项目相关代码

代码仓库：https://gitee.com/nbda1121440/DreamOfTheKingdom.git

标签：20240305_2244