当前位置： 首页 > news >正文

FairyGUI 实现 Boss 双层血条动画

news 2025/7/9 19:27:30

涉及到一个问题的话先去了解前因后果，涉及到的UI框架，全部吃懂吃透。

一：理解血条系统的组成

1.boss血条一般包括：

  • 红色血条：表示当前血量，随伤害立即减少；

  • 白色血条（残影）：慢慢减少，产生一种“缓冲”的受伤视觉效果；

  • 血条分段（如 2 条血表示不同阶段）；

  • 血条消失/出现动画；

  • 血条附加信息：如 Boss 名字、阶段数、状态效果等。

二： 准备环境

Unity + FairyGUI

  • 准备血条 UI 元素：

    • 使用两张图层叠加实现红色与白色残影效果。

    • 可以用 GProgressBar 或者 GImage 手动设置宽度控制进度。

  • 数据结构设计：

    • 定义 Boss 最大血量 maxHp

    • 当前血量 currentHp

    • 白色缓冲血量 whiteHp（用于残影效果）

立即更新 Boss 血条，通常在第一次显示或需要立即更新时调用：

    • 从事件参数中获取当前血量和最大血量

    • 计算每条血条代表的血量值

    • 计算当前填充的血条数和部分填充比例

    • 使用 TweenValue 实现血条变化的动画效果

    • 更新阶段文本

    • 调用 UpdateBossHpWithEffect 实现后续动画效果

带延迟动画效果的血量更新，处理更复杂的动画效果：

  1. 计算血条分段和填充比例

  2. 处理跨阶段变化的特殊动画效果：

    • 如果血条阶段减少（如从 2 阶段到 1 阶段）

    • 先快速清空白条

    • 然后使用定时器延迟执行后续动画

  3. 同阶段内变化则直接缓慢更新白条

    三：血条动画

    红条（RedBar）

    • 用于立即体现 Boss 受伤

    • 执行 .TweenValue(…)，时间短（0.1s）

     白条（WhiteBar）

    • 用于体现“血量丢失动画”

    • 在延迟 0.6 秒后再 .TweenValue() 补位

    • 通过定时器分两次动画模拟先抖动再平滑拉回

    类似于下面这种血条：



    • 红色血条：快速变化（0.1 秒），立即反映当前血量

    • 白色血条：缓慢变化（0.8 秒），跟随红色血条但有延迟

    • 阶段转换特效：

      • 当血条阶段减少时（如从 2 阶段到 1 阶段）

      • 先快速清空白条（0.2 秒）

      • 延迟 0.3 秒后快速填充白条（0.2 秒）

      • 再延迟 0.6 秒后缓慢设置到目标值（0.8 秒）

    下面是大概的流程图： 




    总体框架：

    MVC架构 + FairyGUI +事件系统来构建Boss血条组件

    组件角色脚本作用
    控制器（逻辑）BossHpChangeCtrl.cs监听事件，控制何时显示、隐藏、更新血条
    视图（UI显示）BossHpChangeView.cs操作 FairyGUI 元素，实现具体 UI 效果
    数据来源PlayerEvt、Player从玩家/怪物对象中获取属性，如 HP、霸体等

    2.小血条与霸体条


    霸体条（BossbatiBar）单独绑定事件 BossBatiChange，从角色属性中计算百分比进度。

    3.血条阶段计算逻辑
    int currentHp;      // 当前血量值
int maxHp;          // 最大血量值
int m_BossHpNum;    // 血条分段数(默认为2)// 计算得到的临时值
float hpPerBar = (float)maxHp / m_BossHpNum;  // 每条血条代表的血量
float totalHpBars = currentHp / hpPerBar;      // 当前占用的血条数(含小数)
int filledBars = (int)totalHpBars;            // 完整填充的整数血条数
float partialBarRatio = totalHpBars - filledBars; // 当前血条的填充比例(0-1)

    • 该逻辑将当前血量转为 血条数量 + 当前血条进度。

    • 支持非整除（比如血量 3500，3 条血条，每条 1000 时，会有 X3 50% 效果）。


    4.延迟白条处理机制
    if (filledBars < lastFilledBars)
{bossHpBarWhite.TweenValue(0, 0.2f);// 添加单次定时器(延迟0.3秒执行)testAniTimer1 = TimerMgr.Inst.AddTimerOnce(0.3f, () => {bossHpBarWhite.TweenValue(100, 0.2f);});// 添加单次定时器(延迟0.6秒执行)testAniTimer2 = TimerMgr.Inst.AddTimerOnce(0.6f, () => {bossHpBarWhite.TweenValue(partialBarRatio, 0.8f);});
}

    • 红条立即变化

    • 白条先归零，再慢慢追上，模拟视觉残留

    • 用 TimerMgr 实现延迟回调逻辑，提升打击表现力

    5.Boss头像动态显示
    var gloader = bossHpComponent.GetChild("n6").asLoader.component.GetChild("n5").asLoader;
gloader.url = _url;

    • 头像绑定在指定路径下，通过 URL 加载头像图片。

    • 动态根据角色 ID 从配置中取出头像路径。

    7.注意事项

    • 定时器管理很重要，避免页面关闭后回调仍在执行

    • 血条分段数 m_BossHpNum 应根据实际游戏设计调整

    • 动画时长参数可根据需求调整以获得最佳视觉效果

    • 当前实现中隐藏了小血条（miniHpLoader.visible = false），如需使用需要取消隐藏

    • 动画分层：红色血条(快速)和白色血条(慢速)的分层设计，增强视觉效果

    • 阶段检测：通过比较 lastTotalHpBars 和当前值，检测是否跨阶段

    • 资源清理：RemoveTimer() 确保视图关闭时清理所有定时器

    下面是树形结构
    BossHpChangeView (BaseView)
    └── m_Panel (GComponent)
    └──  (主容器 GComponent)
    ├── (红色血条背景 GLoader)
    │   ├── (白色血条 GProgressBar)
    │   └──  (红色血条 GProgressBar)
    ├── (小血条 GLoader)
    │   └── (小血条填充 GProgressBar)
    ├── (霸体条 GLoader)
    │   └── (霸体进度条 GProgressBar)
    ├── (描述文本 GTextField)
    └──  (头像容器 GComponent)
    └──  (头像 GLoader)

    事件和委托
    1 事件参数结构 (BaseEvent/PlayerEvt)

    public class BaseEvent
{// 基础事件类，可能包含事件类型等基础信息
}public class PlayerEvt : BaseEvent
{public Player m_Value;  // 包含玩家数据
}public class Player
{// 玩家类，包含角色属性public int GetProperty(RoleProperty property){// 获取角色属性(血量、霸体值等)}public int m_RoleId;  // 角色ID
}

    方法内部从事件参数提取玩家数据：

    var evt = obj as PlayerEvt;
var player = evt.m_Value;
currentHp = (int)player.GetProperty(RoleProperty.Hp);
maxHp = (int)player.GetProperty(RoleProperty.MaxHp);



    四：性能优化实践

    1.事件管理优化

    void Show() {EventMgr.Inst.Register(EventId.BossHpChange, OnBossHpChange);// 其他事件注册...
}void UnShow() {EventMgr.Inst.UnRegister(EventId.BossHpChange, OnBossHpChange);// 对称取消注册...
}

    1. 事件驱动最佳实践

      • 保持事件处理函数轻量

      • 严格对称注册/反注册

      • 使用强类型事件参数

    2.动画定时器管理

    void RemoveTimer() {if (testAniTimer1 != -1) TimerMgr.Inst.RemoveTimer(testAniTimer1);if (testAniTimer2 != -1) TimerMgr.Inst.RemoveTimer(testAniTimer2);
}


    3.血条更新算法：

    void UpdateBossHpImmediate(BaseEvent obj) {// 1. 计算血条分段float hpPerBar = (float)maxHp / m_BossHpNum;float totalHpBars = currentHp / hpPerBar;// 2. 应用动画效果bossHpBarRed.TweenValue(partialBarRatio * 100, 0.1f); // 红色快速变化bossHpBarWhite.TweenValue(partialBarRatio * 100, 0.8f);// 白色缓慢跟随// 3. 更新阶段文本hpBarPhaseLabel.text = filledBars > 1 ? $"X{filledBars}" : "";
}

    4.跨阶段动画算法

    void UpdateBossHpWithEffect() {// 检测阶段变化if (filledBars < lastFilledBars) {// 阶段减少特效bossHpBarWhite.TweenValue(0, 0.2f); // 快速清空TimerMgr.Inst.AddTimerOnce(0.3f, () => {bossHpBarWhite.TweenValue(100, 0.2f); // 快速填充});TimerMgr.Inst.AddTimerOnce(0.6f, () => {bossHpBarWhite.TweenValue(partialBarRatio, 0.8f); // 最终定位});}
}

    5.血条动画采用分层设计：

    • 红色血条：线性变化，duration=0.1s（即时反馈）

    • 白色血条：

      • 常规变化：duration=0.8s（平滑跟随）

      • 阶段变化：三段式动画（清空→全满→定位）

     

    http://www.lryc.cn/news/582989.html

    相关文章：

  • qt-C++语法笔记之Stretch与Spacer的关系分析
  • 分库分表之实战-sharding-JDBC水平分库+水平分表配置实战
  • LeetCode题解---＜三数之和＞
  • 自动化一次通过率
  • 深度学习环境配置:PyTorch、CUDA和Python版本选择
  • 深度剖析：向70岁老系统植入通信芯片——MCP注入构建未来级分布式通信
  • 模型训练篇 | 如何用YOLOv13训练自己的数据集（以明火烟雾检测举例）
  • HTML+JS+CSS制作一个数独游戏
  • 原生屏幕旋转算法（AccelSensor）
  • 力扣-31.下一个排列
  • Python打卡：Day47
  • 【排序】插入排序
  • 单调栈通关指南：从力扣 84 到力扣 42
  • eslint扁平化配置
  • IoTDB：专为物联网场景设计的高性能时序数据库
  • 深圳凭物联网软件开发构建智慧‘城市大脑‘
  • c语言学习_函数递归
  • 「Java案例」求n1-n2内的素数
  • 使用Node.js搭建Web应用有哪些注意事项？
  • 在 Vue2 与 Vue3 中，面对 **大数据量交互体验优化** 和 **ECharts 大数据渲染性能优化**
  • 萌新赛第（一）场
  • EfficientVMamba: Atrous Selective Scan for Light Weight Visual Mamba论文精读（逐段解析）
  • 华为泰山服务器重启后出现 XFS 文件系统磁盘“不识别”（无法挂载或访问），但挂载点目录仍在且无数据
  • Nginx完全指南 - 从入门到精通（加强版）
  • 【深度学习入门 鱼书学习笔记（1）感知机】
  • Java常用加密算法详解与实战代码 - 附可直接运行的测试示例
  • Spring Boot 多数据源切换：AbstractRoutingDataSource
  • 语言模型 RLHF 实践指南（一）：策略网络、价值网络与 PPO 损失函数
  • MySQL索引面试问题梳理
  • 【Android】组件及布局介绍