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

FairyGUI 实现 Boss 双层血条动画

涉及到一个问题的话先去了解前因后果,涉及到的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 效果
    数据来源PlayerEvtPlayer从玩家/怪物对象中获取属性,如 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.dtcms.com/a/269868.html

    相关文章:

  • 3D 演示动画在汽车培训与教育领域中的应用
  • 从0开始学习R语言--Day41--Moran‘s I
  • 城乡社区服务体系建设-城乡商城:意义深远与前景广阔——仙盟创梦IDE
  • 把文件夹下所有的excle写入word文件中
  • 50天50个小项目 (Vue3 + Tailwindcss V4) ✨ | StickyNavbar(粘性导航栏)
  • Qwen视觉模型本地化部署,实现识别图片:Qwen2___5-VL-7B-Instruct
  • 分布式光纤传感:为储能安全保驾护航
  • 2025年7月:打cs1.5 600元装机台式电脑方案A
  • 学习软件测试的第十二天(接口测试)
  • Spring Security架构与实战全解析
  • 人工智能-基础篇-24-RAG和LLM到底怎么理解和区分?(LLM是深度训练的大语言生成模型,RAG是LLM更智能的补充技术)
  • 日语学习-日语知识点小记-构建基础-JLPT-N3阶段(1):新的开始-尊他开始
  • 【无标题】导出pdf
  • 数据库版本自动管理
  • MVP架构接口开发套路
  • TCP/IP协议基础
  • mybatis/mybatis-plus添加数据,自增id的值为负数
  • 第十四天,7月8日,八股
  • 《UE5_C++多人TPS完整教程》学习笔记42 ——《P43 瞄准(Aiming)》
  • 【音视频】HLS-m3u8协议介绍
  • Redis基础学习(五大值数据类型的常用操作命令)
  • 超低功耗CC2340R SimpleLink™ 系列 2.4GHz 无线 MCU支持BLE5.3/Zigbee/Thread/专有协议
  • 微软上线 Deep Research 预览版:o3+必应赋能研究自动化
  • css 面试题
  • 从零构建MCP服务器:FastMCP实战指南
  • 跨平台软件构建方法及工具介绍
  • 深度学习-多分类
  • Java 实现 Excel 文件对比与数据填充
  • 多线程(1)
  • Minmax 算法与 Alpha-Beta 剪枝小教学