生命值血条实现

🎯本节学习目标

• 实现 UI 血条
• 实现头顶血条
• 血条平滑与颜色变化

🚀课程导读

血条是游戏 UI 的“门面”。本课实现两种：屏幕角落 UI 血条 + 敌人头顶血条。

◆屏幕角落血条

玩家血条。

1. 创建 UI：Image 作为血条背景（黑/灰），再加一个子 Image 作为填充（红色或绿色）。
2. 【填充】填充 Image 的 Image Type 选 Filled、Fill Method Horizontal。
3. 【Pivot】填充条的 Pivot.x 设为 0（从左往右扣，第 157 课）。
4. 【锚点】血条锚点设为“左上”，随屏幕固定。
5. 【代码】在玩家脚本里：
6. public Image hpFill; // 拖入填充条
7. public int maxHp = 100; public int hp = 100;
8. void UpdateFill() { hpFill.fillAmount = (float)hp / maxHp; }
9. 【说明】fillAmount 0-1：1=满血、0=空血。
10. 【颜色】血量低时变红：hpFill.color = hp > 50 ? Color.green : Color.red;
11. 【平滑】fillAmount 用 Lerp 平滑（白条延迟跟随）。
12. 【测试】按空格扣血，血条变化。

◆敌人头顶血条

World Space 血条。

1. 【方案】创建 Canvas，Render Mode 设为【World Space】（第 146 课）。
2. 【大小】把 Canvas 缩放调小（如 0.01），放在敌人头顶上方（如 (0, 2, 0)）。
3. 【背景】Canvas 下建 Image 背景 + Image 填充（同上面的结构）。
4. 【父子】把 Canvas 作为敌人的子物体：敌人移动血条跟着。
5. 【朝向】脚本让血条始终面向相机（不然从背面看是反的）：
6. void LateUpdate() { transform.LookAt(transform.position + Camera.main.transform.forward); }
7. 【代码】跟 UI 血条一样设 fillAmount。
8. 【显隐】血条在满血时不显示：hpFill.transform.parent.gameObject.SetActive(hp < maxHp);
9. 【注意】World Space Canvas 大小要调 Scale，不然字/条巨大。
10. 【性能】头顶血条多时注意合批（用图集）。
11. 【完成】敌人在头顶显示血条，掉血实时更新！

⚠常见错误与排查

★动手练习

✓本节小结

血条已实现。下一课做开始菜单。