Bubbly怎么制作血条UI界面

在Bubbly中需用Canvas+Image手动实现血条UI：创建Canvas（Pixel Perfect关闭），添加Health_Background与Health_Fill（Fill Method设为Horizontal、Origin为Left），绑定HealthBarController脚本更新fillAmount，并通过FaceCamera使血条朝向摄像机。

在Bubbly中制作血条UI界面，需绕过其无原生UGUI/UMG的限制，直接用Canvas+Image组合模拟进度条行为——这要求你手动计算填充比例、绑定脚本更新逻辑，并规避Bubbly对RectTransform的非标准封装带来的缩放错位问题。

搭建基础血条结构

在Hierarchy中右键→UI→Canvas创建画布，确保Render Mode为Screen Space - Overlay；【Canvas的Pixel Perfect必须关闭】，否则血条在不同分辨率下会像素错乱。

在Canvas下右键→UI→Image，重命名为Health_Background，拖入边框素材或设Color为深灰（#222222）；设置Rect Transform锚点为Stretch→Stretch，Left/Right/Top/Bottom Padding均设为10，留出呼吸边距。

在同一级再建一个Image，重命名为Health_Fill，作为血量填充层；将它的Source Image设为纯红矩形图（或用Sprite Renderer生成的1×1红色贴图），Color设为#E53935；【必须把Fill Method设为Filled，Fill Origin设为Left，否则无法水平填充】。

配置填充逻辑与脚本绑定

选中Health_Fill，在Inspector中将Image Type从Simple改为Filled；Fill Method选Horizontal，Fill Origin选Left；Max Fill Amount保持1；此时手动拖动Fill Amount滑块可验证填充效果是否从左向右伸展。

新建C#脚本HealthBarController.cs，挂载到Canvas上：

public class HealthBarController : MonoBehaviour
{
    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);
        UpdateBar();
    }

    void UpdateBar()
    {
        float fillRatio = currentHP / maxHP;
        fillImage.fillAmount = fillRatio;
    }
}

回到Unity编辑器，把Health_Fill拖进HealthBarController的fillImage字段；这一步漏掉会导致运行时NullReferenceException。

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

方法一：用Canvas Group做透明度脉动
给Health_Fill添加Canvas Group组件；在HealthBarController中新增变量：
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, T=Sin(Time*2))输出到Alpha；编译后赋给Health_Fill的Material；注意材质必须启用Z Write Off且Render Queue=Transparent。

方法三：用Animation Clip控制Fill Amount曲线
在Health_Fill上Add Component→Animator；创建新Animation Controller，新建Clip命名为Health_Breathe；关键帧设0s→fillAmount=0.98，0.5s→0.94，1s→0.98；勾选Loop Time；播放时用Animator.Play("Health_Breathe")触发。

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

第一步：创建空GameObject命名为HealthBar_Attach，拖拽到角色模型子层级下；把Canvas拖为它的子物体；【Canvas的World Position Stays Same必须取消勾选】，否则挂载后位置偏移。

第二步：在HealthBar_Attach上挂载脚本FaceCamera.cs：

public class FaceCamera : MonoBehaviour
{
    private Camera mainCam;
    void Awake()
    {
        mainCam = Camera.main;
    }
    void LateUpdate()
    {
        transform.LookAt(transform.position + mainCam.transform.forward);
    }
}

第三步：调整Canvas的Plane Distance为10–50之间（视角色大小而定），避免UI被角色模型穿插遮挡；若出现锯齿，选中Canvas→Pixel Perfect打钩并设Scale Factor为1。

以上就是98游戏小编为大家带来的全部内容，想了解更多精彩请持续关注本站。