在 Bubbly 引擎里做一个直观的血条 UI，会碰到一个不大不小的门槛。引擎本身没有直接提供 UGUI 或 UMG 那样的拖拽式 UI 系统。但这难不倒我们——绕过去就是了。

核心思路很清晰：用 Canvas 和 Image 这两个基础组件，自己动手模拟出一个进度条的逻辑。不过，有几个细节你必须留意：手动计算填充比例、绑定脚本更新，还要小心 Bubbly 对 RectTransform 的一些“特殊处理”。稍不注意，血条的缩放就可能出问题。

搭建基础血条结构

第一步：创建 Canvas

在 Hierarchy 面板里右键，选择 UI → Canvas 来创建一个画布。渲染模式（Render Mode）保持默认的 Screen Space - Overlay 就行。

关键设置：务必把 “Pixel Perfect”选项关掉。否则，游戏在不同分辨率的设备上运行时，血条边缘很可能出现像素闪烁或错位，看起来很不舒服。

第二步：添加背景框

在 Canvas 下面右键，新建一个 Image，重命名为 “Health_Background”。这个就是血条的背景框。

你可以拖入一个边框素材。如果图省事，直接把颜色（Color）设置成深灰色（比如 #222222）也行。然后设置它的 Rect Transform：
锚点（Anchor）选择 拉伸（Stretch），把左右上下四个边距（Padding）都设为 10，给血条和边框之间留出呼吸空间。

第三步：添加填充层

在同一个层级下，再创建一个 Image，重命名为 “Health_Fill”。这就是用来显示当前血量的填充层。

把它的 Source Image 设成一个纯红色的矩形，或者用 Sprite Renderer 生成一张 1x1 的红色贴图也行。颜色可以选醒目的 #E53935。

最关键的一步：必须把 Image 的 Type 从 “Simple” 改成 “Filled”，Fill Method 选择 “Horizontal”，Fill Origin 选择 “Left”。不这么设置，它就没办法从左到右平滑地填充了。

配置填充逻辑与脚本绑定

现在血条是画出来了，但它不会自己动。我们需要一个大脑来指挥它。

创建脚本

新建一个 C# 脚本，叫 “HealthBarController.cs”，挂载到刚才创建的 Canvas 游戏对象上。

脚本内容如下：

public class HealthBarController : MonoBeha viour
{
public Image fillImage; // 指向填充层的引用
public float currentHP = 100f; // 当前血量
public float maxHP = 100f; // 最大血量

void Start()
{
// 如果没手动拖拽赋值，就自动在子物体里找
if (fillImage == null) fillImage = transform.Find("Health_Fill").GetComponent();
UpdateBar(); // 初始化显示
}

// 外部用来修改血量的方法
public void SetHealth(float newHP)
{
currentHP = Mathf.Clamp(newHP, 0, maxHP); // 确保血量在0到最大值之间
UpdateBar(); // 更新显示
}

// 核心的更新函数
void UpdateBar()
{
float fillRatio = currentHP / maxHP; // 计算填充比例
fillImage.fillAmount = fillRatio; // 设置填充量
}
}

绑定组件

脚本写好了，别忘了最重要的一步：回到 Unity 编辑器，选中 Canvas，把 Hierarchy 里的 “Health_Fill” 对象拖到 HealthBarController 组件的 “Fill Image” 字段里。漏掉这一步，游戏运行时会直接报 NullReferenceException 的错误。

添加动态呼吸效果（可选）

基础功能搞定了。如果你想让血条看起来更有生命力，可以给它加一点动态效果。这里提供三种方法：

方法一：用 Canvas Group 做透明度脉动

给 Health_Fill 对象添加一个 Canvas Group 组件。然后在 HealthBarController 脚本里增加一个 public 变量：

public CanvasGroup canvasGroup;

在 Start() 方法里初始化它（如果没手动赋值）：

if (canvasGroup == null) canvasGroup = fillImage.GetComponent();

最后，在 UpdateBar() 方法的末尾加上这行代码：

canvasGroup.alpha = 0.7f + 0.3f * Mathf.Sin(Time.time * 3f);

这样，血条就会有轻微的透明度波动，像在呼吸一样。

方法二：用 Shader Graph 做边缘光呼吸

这个效果更炫酷。创建一个新的 Unlit Shader Graph，用 Lerp 节点混合两个颜色（比如 A=0.8，B=1.0），用 Time 节点乘以 2 后的 Sin 值作为混合系数（T），把结果输出到 Alpha 通道。编译这个 Shader 后，把它赋给 Health_Fill 的 Material。记得材质要启用 “Z Write Off”，并且渲染队列（Render Queue）设为 “Transparent”。

方法三：用 Animation Clip 控制填充量曲线

这是最直观的动画方式。先给 Health_Fill 对象添加一个 Animator 组件。然后创建一个 Animation Controller，新建一个动画片段（Animation Clip），比如叫 “Health_Breathe”。在动画窗口里，给 fillAmount 属性设置关键帧：0秒时 = 0.98，0.5秒时 = 0.94，1秒时再回到 0.98。别忘了勾选 “Loop Time”。最后，在需要的时候用代码调用 Animator.Play("Health_Breathe") 就能播放这个循环的呼吸动画了。

适配角色跟随与摄像机朝向

血条不能总是固定在屏幕一角，得跟着角色走，还得时刻“看”着玩家。

第一步：绑定到角色

创建一个空的 GameObject，命名为 “HealthBar_Attach”。把它拖拽到你角色模型的子层级下，然后把做好的 Canvas 整个拖成这个空对象的子物体。

细节：移动 Canvas 前，记得取消勾选 Canvas 组件上的 “World Position Stays Same” 选项，不然挂载后位置会发生奇怪的偏移。

第二步：让血条永远面向摄像机

在 HealthBar_Attach 这个空对象上，再挂一个简单的脚本，比如叫 “FaceCamera.cs”：

public class FaceCamera : MonoBeha viour
{
private Camera mainCam;
void Awake()
{
mainCam = Camera.main;
}
void LateUpdate()
{
// 让血条始终朝向摄像机
transform.LookAt(transform.position + mainCam.transform.forward);
}
}

第三步：微调和优化

现在，你可以在 Scene 视图里调整 Canvas 的 Plane Distance 值，通常在 10 到 50 之间，根据你角色的大小来定。这个值能让血条悬浮在角色头顶合适的位置，避免和角色模型穿模。

如果调整后发现血条边缘有锯齿，可以回到 Canvas 组件，重新勾选 “Pixel Perfect”，并把 Scale Factor 设为 1，锯齿情况通常会得到改善。

至此，一个能在 Bubbly 中稳定运行、跟随角色、动态变化的血条 UI 就制作完成了。说到底，就是活用基础组件，加上一点脚本逻辑，把“没有系统支持”变成“自定义的自由”。