Oops Framework 转职系统实战Cocos Creator 3.x Spine武器动画切换与属性联动完整指南【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架此项目为 Oops Framework 教程项目如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-frameworkOops Framework 是一个基于 Cocos Creator 3.x 开发的游戏框架本教程项目带你实战一套完整的角色转职系统点击按钮一键转职后Spine 骨骼角色自动切换武器动画刀、弓、匕首同时力量/敏捷等战斗属性随职业数据表自动重算业务层与视图层通过事件完全解耦。下面带你理清整条链路。 转职系统能做什么先看一下效果角色身上挂着一个 Spine 骨骼动画点击转职按钮后角色立即换装持新武器并刷新当前播放的动作待机/攻击/受击/死亡角色属性面板上的力量、敏捷数值也随之更新。整个系统由四个模块协作完成模块文件职责转职业务RoleChangeJob.ts接收转职指令驱动数据更新职业数据RoleModelJobComp.ts读取职业表联动战斗属性动画控制RoleViewAnimator.tsSpine 武器动画名拼接与切换视图入口RoleViewComp.ts监听转职事件刷新动画角色框架采用 ECS实体-组件-系统思路组织Role.ts 中Role实体把数据层 / 业务层 / 视图层的组件声明得清清楚楚这也是本框架模块化的体现⚙️ 一键转职用 ECS 组件触发业务逻辑转职的入口在 Role.ts 的changeJob(jobId)方法——它不直接做任何业务而是往实体上add一个RoleChangeJobComp组件把职业编号塞进去changeJob(jobId: number) { var rcj this.add(RoleChangeJobComp); rcj.jobId jobId; }这是 ECS 的精髓组件即输入参数。一旦RoleChangeJobComp被添加到实体上RoleChangeJobSystem 就立刻感知到filter匹配到该组件执行三步把新职业编号写入e.RoleModelJob.id触发属性联动见下一节通过oops.message.dispatchEvent(RoleEvent.ChangeJob)发出转职全局事件触发武器动画切换见下节e.remove(RoleChangeJobComp)移除自身完成这一次业务的生命周期。这种加组件触发、完事即移除的设计让转职逻辑天然可复用、可组合后续加转职条件校验转职特效只需追加新的 System 即可。️ Spine 武器动画切换的核心技巧角色动画由 RoleViewAnimator.ts 控制它继承框架自带的AnimatorSpine动画状态机真正换武器的魔法在两处① 武器名映射表。RoleEnum.ts 中定义了WeaponName把职业表的武器编号翻译成动画后缀var WeaponName: any { 0: Fist, 1: Katana, 2: CrossGun, 5: Arch, 9: Wakizashi, 11: Dagger, ... };② 动画名拼接播放。playAnimation里把动作名 武器名拼成完整 Spine 动画剪辑名RoleViewAnimator.tsthis.weaponAnimName this.getWeaponAnimName(); var name ${animName}_${this.weaponAnimName}; // 如 Attack_Katana this._spine.setAnimation(0, name, loop);也就是说美术只需要在 Spine 里按Idle_武器名、Attack_武器名的命名规范导出动画代码侧就实现了任意职业任意动作的自动匹配。关键还有一个refresh()方法RoleViewAnimator.ts状态机状态没变比如正处在 Idle时不会触发状态变化事件所以转职后手动再触发一次onStateChange让当前动作立刻按新武器名重播——这就是角色转职后原地换装的效果来源。 属性联动转职后数值自动重算武器换完了数值呢RoleModelJobComp.ts 的id是一个会做事的 setterset id(value: number) { this.table.init(value); // 从 RoleJob 表加载职业数据 this._id value; var attributes this.ent.get(RoleModelComp).attributes; attributes.get(RoleAttributeType.power).job this.power; // 力量 职业值 attributes.get(RoleAttributeType.agile).job this.agile; // 敏捷 职业值 }职业数据来自导表 TableRoleJob.ts背后是 Excel 表 RoleJob.xlsx——策划改表即可新增职业代码零改动。更妙的是底层数值容器 RoleNumeric.ts每个属性被拆成Base / Job / Level / Equip / Skill等多个模块分量的求和。你只需改其中一个分量这里是jobupdate()自动重算总和并回调onUpdate界面通过 MVVM 绑定跟着刷新。职业、等级、装备互不干扰这就是多模块叠加值设计的好处。 业务层与视图层事件驱动解耦注意 RoleChangeJobSystem 并不直接操作任何节点它只发了一条消息。视图侧的 RoleViewComp.ts 负责监听this.on(RoleEvent.ChangeJob, this.onHandler, this); // 收到事件后 this.animator.refresh(); // 刷新武器动画事件枚举定义在 RoleEvent.ts。这样一来业务层bll只改数据、发事件视图层view只监听事件、刷表现两层代码互不 import删除任何一层都不影响另一层编译。这套消息总线解耦是 Oops Framework 贯穿始终的设计哲学。 跑起来看看Demo 中的三个转职按钮打开主场景Demo.ts 里已经绑好了三个转职按钮各自调用role.changeJob(jobId)转职刀changeJob(1)→ 武器Katana转职弓changeJob(5)→ 武器Arch转职胁差changeJob(9)→ 武器Wakizashi点击后依次观察角色动画后缀变化 → 力量/敏捷数值跳变 → 属性面板自动刷新整条链路就完整走通了。 核心模块路径速查说明路径转职业务组件/系统assets/script/game/role/bll/RoleChangeJob.ts职业数据组件assets/script/game/role/model/RoleModelJobComp.ts武器名/动作名枚举assets/script/game/role/model/RoleEnum.tsSpine 动画控制assets/script/game/role/view/RoleViewAnimator.ts属性多模块叠加assets/script/game/role/model/attribute/RoleNumeric.ts职业数据表Excelexcel/RoleJob.xlsx官方使用文档doc/using.md✅ 小结ECS 组件触发业务add一个RoleChangeJobComp即完成转职System 感知后自动处理并移除组件Spine 动画命名规范动作名_武器名拼接一份代码适配 17 种武器动画属性自动联动RoleNumeric多模块求和 MVVM 绑定改职业表即可扩职业事件解耦oops.message消息总线让业务与视图互不依赖。想亲手把玩可以拉取本教程项目git clone https://gitcode.com/gh_mirrors/oo/oops-framework用 Cocos Creator 3.x 打开即可运行。若你要用它做正式项目框架方还提供了 oops-game-kit 游戏项目模板本教程项目正是理解它设计思想的绝佳起点。【免费下载链接】oops-framework基于 Cocos Creator 3.x 版本开发的游戏框架此项目为 Oops Framework 教程项目如果使用框架制作游戏项目可下载 oops-game-kit 游戏项目模板开发。项目地址: https://gitcode.com/gh_mirrors/oo/oops-framework创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考