简介精选源码包来自【Cocos Creator 实战教程(2)】天天酷跑系列课程面向希望通过完整项目案例掌握 Cocos Creator 动画与动作系统的 2D 游戏开发者。资源以 cocos_creator2-cool_running_every_day 项目为核心涵盖角色动画资源、动画控制器、行为树、对象池与性能优化等实战内容适合中级开发者对照学习。压缩包共 46 个文件包含 meta/png/json/anim/js/fire/plist 等类型覆盖项目配置、动画帧、脚本逻辑与场景文件整体约 6.98MB结构紧凑可直接解压审阅。已有 132 人学习下载。通过项目源码和配套资源可了解从动画创建、动作控制到性能调优的完整开发流程对理解跑酷类游戏的设计实现具有直接参考价值。1. 用 Cocos Creator 复刻“天天酷跑”动画与动作系统的实战切入点做 2D 跑酷游戏技术难点从来不在“场景怎么拼”而在“角色动起来之后怎么收得住”。跑步、跳跃、滑铲、攻击这几个状态来回切任何一帧的过渡生硬玩家立刻能感觉到手感不对。这份 Cocos Creator 实战教程的源码包把“天天酷跑”的核心玩法拆成了一个可运行的完整工程重点就是动画与动作系统动画剪辑怎么拆、动画控制器怎么配状态切换、Action API 怎么驱动位移和跳跃以及对象池怎么处理频繁创建销毁的道具。适合两类人一是刚学完 Creator 基础、想做完整游戏但不知道动画怎么组织的新手二是已经在用 Creator 做项目、想看看别人怎么处理状态切换和性能优化的开发者。素材是原始工程文件不是成品游戏包需要你自己用 Creator 打开、跑起来、再改着玩。2. 先拆项目cocos_creator2-cool_running_every_day 的目录结构与运行准备2.1 从压缩包到可运行项目目录功能与 Creator 版本匹配拿到061477263016109784.zip解压之后先别急着双击打开先看目录结构。这个工程用的是 Cocos Creator 2.x 的标准项目布局顶层有assets、settings、project.json、creator.d.ts、.gitignore和README.md。其中assets是全部游戏资源所在目录脚本、场景、动画、图集、预制体都在里面settings存放编辑器级配置比如项目类型、模块设置project.json是项目配置文件Creator 在打开项目时会先读它。打开工程之前确认你的 Cocos Creator 版本是 2.x 系列最好是 2.4.x。我用 2.4.3 打开过这个工程没有任何迁移提示。如果你用的是 3.x会直接提示版本不兼容因为 3.x 改了底层渲染架构和资源管线2.x 的.anim和场景文件不能直接迁移。这一点在README.md里应该也有说明解开压缩包后第一件事就是看它。# 解压后建议先看 README再检查目录完整性 unzip 061477263016109784.zip -d cocos_creator2-cool_running_every_day cd cocos_creator2-cool_running_every_day ls -la # 确认 assets、settings、project.json 都在缺任何一个都打不开目录检查这一步很关键。常见的问题是解压工具把空目录漏了或者文件名为中文导致路径解析失败。Creator 对项目路径里的中文支持并不好如果解压路径带中文或空格编辑器经常报Failed to load project。我一般习惯把工程放在纯英文路径下比如D:\dev\cool_running避开这类玄学问题。打开 Creator 后选择“打开其他项目”定位到cocos_creator2-cool_running_every_day目录等待资源导入完成。第一次打开会构建library缓存耗时取决于机器性能通常几十秒到几分钟。如果长时间卡在Importing assets多半是资源里有损坏文件看编辑器底部的报错输出定位具体文件。2.2 场景与资源面板先搞清动画资源挂在哪资源导入完成后先看assets下的目录组织。跑酷类项目一般会分成scenes、scripts、animations、textures、prefabs几个子目录。角色相关的动画资源通常以.anim后缀存在每个文件对应一个动画剪辑角色预制体是.prefab上面挂了Animation或AnimationController组件。打开主场景在层级管理器中选中角色节点右侧检查器里能看到挂载的组件。如果看到Animation组件说明用的是传统动画剪辑播放方式如果看到AnimationController说明用了状态机来管理动画切换。这个工程里两种方式都有体现——角色跑步、跳跃这类单段动画用Animation直接播放状态之间的切换则在代码里通过playAnimation或crossFade实现。// assets/scripts/Player.js 中典型的动画播放写法 cc.Class({ extends: cc.Component, properties: { anim: { type: cc.Animation, default: null } }, playRun: function () { // 播放跑步动画loop 由动画资源自身的设置决定 this.anim.play(run); }, playJump: function () { // 播放跳跃动画如果配置了帧事件落地时会收到回调 this.anim.play(jump); } });代码里的anim属性需要在编辑器中手动把节点的Animation组件拖进去。很多新手在这里漏绑定运行时控制台报TypeError: Cannot read property play of null排查半天结果是属性没赋值。动画资源挂在预制体上还是挂在场景节点上决定了Animation组件的归属。如果是预制体那么所有通过该预制体实例化的角色都会自带动画组件这是跑酷游戏里比较合理的做法。3. 动画系统实战从动画剪辑到状态切换的完整链路3.1 动画剪辑的创建把跑、跳、攻击拆成独立 Clip在 Creator 里做动画第一步是把角色的不同状态拆成独立剪辑。跑、跳、攻击、滑铲各一个.anim文件每个文件里放对应的一套帧序列。打开动画编辑器左侧是节点树中间是时间轴右侧显示当前帧的属性。把角色的SpriteFrame拖到时间轴上每帧一个关键帧动画就形成了。帧间隔决定了动画播放速度。跑步动画一般每帧 0.05 秒也就是每秒 20 帧这样循环起来比较顺跳跃动画通常设计为 0.6 秒左右一共 12 帧包含起跳、腾空、落地三个阶段。关键不是帧数多少而是关键帧之间的过渡是否自然。我见过不少人把跑步动画做成每帧 0.1 秒结果角色跑起来像在太空漫步。// 动画编辑器生成的 .anim 文件结构片段 [ { __type__: cc.AnimationClip, name: run, duration: 0.5, sample: 20, speed: 1, wrapMode: 2, events: [], keys: [ { time: 0, props: [ { key: spriteFrame, values: [ { value: { __uuid__: a1b2c3d4... } } ] } ] } ] } ]wrapMode参数很关键2表示循环播放1表示播放一次后停在最后一帧4表示往返播放。跑步动作必须是循环wrapMode 2跳跃动作应该是播放一次wrapMode 1如果跳跃也设成循环角色会在空中无限扑腾。每次新建动画剪辑后第一件事就是检查右下角的循环属性这是最容易翻车的点。3.2 动画控制器的状态机跑步到跳跃的过渡怎么配动画拆好了接下来是状态管理。工程里用了动画控制器来实现跑步、跳跃、攻击之间的平滑切换。打开动画状态机面板能看到几个状态节点idle、run、jump、attack。节点之间用箭头连接每个箭头代表一个过渡条件可以配Transition Duration来控制过渡时间。跑步切跳跃的过渡时间建议设 0.05 到 0.1 秒太快会闪跳太慢会感觉角色“黏”在地上。跳跃落地回跑步过渡时间可以放宽到 0.15 秒给落地动画一个缓冲。条件参数用布尔值或触发器isJumping为 true 时切到跳跃落地后置 false 切回跑步。不要在 Update 里每秒设几十次参数只在状态切换瞬间改一次。// 状态切换的代码写法 onJump: function () { // 仅在非跳跃状态下触发跳跃避免空中二段跳 if (this.isJumping) return; this.isJumping true; this.animCtrl.setBool(isJumping, true); }, onLand: function () { this.isJumping false; this.animCtrl.setBool(isJumping, false); }setBool必须和状态机里定义的参数名完全一致。Creator 不会在运行时告诉你参数名写错了只会悄悄不触发过渡表现就是“角色不动”控制台没有报错这种静默失败最耗时间。检查方法是打开动画状态机面板逐个核对参数列表和代码里的字符串。3.3 帧事件与代码回调落地动作触发逻辑帧事件是动画系统里最实用的功能之一。在动画编辑器的时间轴上右键可以添加事件帧每个事件帧有一个事件名。播放到该帧时引擎会调用挂载组件上的同名方法。这个工程里典型的用法是跳跃动画在落地那帧触发onLand事件代码里恢复跑步状态并播放落地尘土特效。// 动画帧事件触发的回调方法 onLandFrame: function () { // 落地恢复跑步状态播放尘土粒子 this.isJumping false; this.animCtrl.setBool(isJumping, false); this.dustParticle.play(); }, onAttackFrame: function () { // 攻击判定帧生成攻击判定区域检测碰撞 this.spawnAttackBox(); }事件帧的时间点要反复调。跳得高落地帧就往后移跳得低落地帧就往前移。我习惯先在动画编辑器里把落地帧设在动画总时长的 80% 处然后在真机上跑几次根据手感微调。这里有个细节如果动画裁剪过比如原动画 0.6 秒但只截取了前 0.4 秒落地帧可能在裁剪区外事件永远不会触发。检查事件是否触发先在控制台打日志确认回调执行再调判定帧位置。4. 动作系统实战用 Action API 驱动位移、跳跃与对象池4.1 动作的基础组合moveBy、jumpBy、repeat 的逻辑关系动画负责“看起来在动”Action API 负责“实际在动”。在这个工程里角色的水平位移用的是cc.moveBy跳跃用的是cc.jumpBy金币旋转用的是cc.rotateBy再加上cc.repeat、cc.sequence、cc.spawn组合成完整行为。Action 和动画的区别在于动画改的是精灵帧或骨骼Action 改的是节点坐标、缩放、旋转这些变换属性。// 金币旋转与浮动效果 spinAndFloat: function (coinNode) { // 旋转 360 度循环 3 次 var rotate cc.repeat( cc.rotateBy(1.0, 360), 3 ); // 上下浮动 20 像素往返 2 次 var floatMove cc.repeat( cc.sequence( cc.moveBy(0.5, cc.v2(0, 20)), cc.moveBy(0.5, cc.v2(0, -20)) ), 2 ); // 旋转和浮动同时执行 coinNode.runAction(cc.spawn(rotate, floatMove)); }cc.spawn让多个动作同时执行cc.sequence让动作按顺序执行cc.repeat包住序列做循环。注意cc.moveBy是相对位移从当前位置移动cc.moveTo是绝对位移移动到指定坐标。跑酷游戏里障碍物移动、金币移动都应该用moveBy因为它们的起点不固定。用moveTo的话每个对象都得记录绝对坐标复用对象池时会乱套。跳跃动作推荐用cc.jumpBy而不是手工组合moveBy加rotate。jumpBy自动计算抛物线轨迹参数分别是时长、位移向量、跳高、跳跃次数。如果用moveBy模拟跳跃需要在 Update 里手动改 Y 轴速度容易和物理引擎冲突手感也难调。// 角色跳跃的 Action 实现 playerJump: function () { // 参数含义0.5 秒内向右移动 150 像素跳高 120 像素跳 1 次 var jump cc.jumpBy(0.5, cc.v2(150, 0), 120, 1); this.node.runAction(jump); }jumpBy的第二个参数是位移向量如果只想原地跳向量传cc.v2(0, 0)即可。这个工程里角色跳跃时水平位移由场景滚动速度决定跳跃动作本身只需要垂直方向效果所以这里向量只给垂直分量很合适。跑酷游戏的跳跃手感调教核心是跳高和滞空时间这两个参数跳高 100 到 150 像素、滞空 0.4 到 0.6 秒是相对舒适的范围。4.2 对象池子弹与道具的缓存复用实现跑酷游戏里金币、障碍物、特效粒子一直在创建和销毁如果直接用cc.instantiate和node.destroy()内存频繁分配回收低端机上会出现明显卡顿。这个工程用对象池来解决预先创建一批节点不使用时隐藏而不是销毁使用时从池里取出来重新布置。// 简单的对象池实现 var CoinPool cc.Class({ extends: cc.Component, properties: { prefab: cc.Prefab, poolSize: 20 }, onLoad: function () { this.pool []; for (var i 0; i this.poolSize; i) { var coin cc.instantiate(this.prefab); coin.active false; this.node.addChild(coin); this.pool.push(coin); } }, getCoin: function () { var coin this.pool.pop(); if (!coin) { // 池空了临时创建一个应急 coin cc.instantiate(this.prefab); this.node.addChild(coin); } coin.active true; return coin; }, recycleCoin: function (coin) { // 回收时停掉所有 Action重置位置防止复活时带着旧状态 coin.stopAllActions(); coin.active false; this.pool.push(coin); } });对象池的核心是回收时要重置状态。stopAllActions必须调用否则金币回收后再取出来上一次的旋转动作还在跑会出现“空中转体 720 度再落地”的诡异现象。active false让节点不参与渲染和碰撞检测但不销毁下次取出时重新激活。池大小设为 20 是因为同屏金币峰值大概在 15 到 18 个左右留两个余量。4.3 每次 Update 只做一件事跑酷游戏的帧循环写法Update 方法是跑酷游戏性能的分水岭。这个工程的GameManager脚本里Update 只做三件事推进场景滚动速度、检查角色状态、触发障碍物生成。金币旋转、特效粒子、UI 动画这些都不放在 Update 里而是用 Action 或动画系统自己驱动。// GameManager.js 的 Update 精简写法 update: function (dt) { // 1. 更新滚动速度用 lerp 平滑加速 this.scrollSpeed cc.misc.lerp(this.scrollSpeed, this.targetSpeed, dt * 0.01); // 2. 移动背景层和障碍物层 this.bgLayer.x - this.scrollSpeed * dt; this.obstacleLayer.x - this.scrollSpeed * dt; // 3. 检查该不该生成新障碍物 this.checkSpawn(); }cc.misc.lerp做速度平滑避免速度突变导致玩家反应不过来。背景层和障碍物层用不同速度移动产生视差效果这也是跑酷游戏常用的手法。注意这里没有写任何角色碰撞检测代码——碰撞检测由引擎的碰撞系统或物理系统承担Update 里不做getBoundingBox这种逐帧计算。一个常见误用是每个脚本都写自己的 Update比如金币脚本里转金币、障碍物脚本里移动障碍物。这个工程的正确组织方式是一个GameManager集中控制全局逻辑子节点只响应 Action 或事件。这样做的好处是可以随时暂停——游戏结束时只需要停掉 GameManager 的 Update所有滚动和生成逻辑一块停下来而不是到处找enabled false。5. 动画与打包避坑六个常见问题的排查记录5.1 动画显示不全或闪跳图集与纹理格式的排查现象角色跑步动画播放时某些帧显示空白或者画面闪烁。原因角色精灵帧引用了图集里的子图但图集没有被正确打入构建包。Creator 在构建时如果检测不到图集依赖就会输出空白帧。另一个原因是纹理格式不兼容比如用了 WebP 格式旧版 Android 设备不支持。解决打开项目设置里的“图集打包”配置确认角色的所有 SpriteFrame 都引用了同一个图集资源。构建时选择“包含所有图集”不要选“自动裁剪”。如果还是空白把纹理格式改成 PNG重新生成图集。5.2 打包后角色动作错乱资源 UUID 与脚本丢失现象在编辑器里一切正常构建成 APK 安装到手机上之后角色一直播放默认动画切换状态无效。原因构建时脚本没有被正确编译进去或者动画资源的 UUID 在构建过程中被重新分配。常见于手动复制资源文件改变了目录结构Creator 根据 UUID 索引资源路径变了但 UUID 没有同步更新构建产物里资源引用断裂。解决不要用系统文件管理器直接复制assets里的资源应该在 Creator 的资源面板里拖动复制这样引擎会自动处理 UUID 关联。构建前先执行一次“清理”操作删除library和temp目录再重新构建。5.3 帧事件不触发动画事件与代码挂载的时序现象跳跃动画播放正常但落地帧事件没有触发角色落地后保持跳跃状态或者重复跳跃。原因帧事件在动画编辑器中已经添加但挂载帧事件回调的组件没有在角色节点上或者组件脚本里有语法错误被禁用了。另一个可能是动画状态机的过渡截断了动画——事件帧还没来得及播放就被切到下一个状态。解决先确认事件名和代码方法名一致然后在组件脚本里加日志。如果日志不输出检查组件是否挂在角色节点的子节点上事件回调只会调用动画所在节点的组件方法。缩短状态过渡时间或者把事件帧放在动画的 50% 位置验证一次排除截断因素。5.4 对象池失效导致卡顿active 状态与回收时机现象游戏运行几分钟后开始掉帧内存占用持续增长。原因对象池的回收逻辑漏了某个分支。比如角色跳跃落地时生成尘土特效如果特效播放结束后没有回收池里的节点越来越少最终走cc.instantiate临时创建退化成无池模式。解决所有从对象池取出的节点必须保证有一个回收路径。特效类对象可以在 Action 的callFunc里自动回收碰撞类对象在碰撞回调里回收。回收时调用stopAllActions和removeFromParent(false)确保节点状态完全清空。5.5 构建 APK 时 SDK 版本不匹配现象构建报错minSdkVersion或targetSdkVersion相关错误或者 APK 安装后打不开。原因Creator 2.x 自带的 Android 构建模板比较旧和最新的 Android SDK 或 Gradle 版本不兼容。常见于开发机更新过 Android StudioSDK 版本升到了 34 或更高。解决在构建面板里指定 Android SDK 路径确认本地 SDK 安装了构建工具。修改project.json里的构建参数把minSdkVersion设为 21targetSdkVersion设为 30 左右。不要在最新 SDK 上硬跑旧构建模板。5.6 动画在“动画显示不全”与“重复播放”之间的隐患现象角色跑步动画在部分机型上显示第一帧后就静止另一部分机型上循环正常。原因帧动画的资源加载策略问题。精灵帧是异步加载的动画系统在第一帧播放时资源还没到位后续帧却已经按节奏推进导致画面卡在第一帧。循环正常与否取决于设备和资源缓存策略。解决在场景加载时提前加载角色的动画资源用cc.loader.loadRes预载或者把角色预制体放到场景的常驻节点上。这也是跑酷游戏必须做启动加载页的原因不能边跑边加载角色资源。6. 验证与进阶用性能分析器实测动画开销再从帧动画跨到骨骼动画打开 Creator 的 Profiler运行游戏模拟器重点观察动画更新耗时。选中角色节点看Animation组件的 update 耗时正常情况下应该在 1 毫秒以下。如果超过 2 毫秒要么是精灵帧数量太多导致图集采样压力大要么是动画状态机在每帧做重复计算。用 Profiler 的Spawn Count面板看节点创建频率如果金币节点的创建数一直涨说明对象池没有生效回去查回收路径。帧动画在角色动作数量少5 个以内时是最优解。如果后面想加连招、组合技、多方向攻击这些复杂动作在 Creator 里不要再硬拼帧动画了——精灵帧的数量会爆炸作业里我通常直接切成 Spine 或 DragonBones 骨骼动画。骨骼动画的优势是动画文件小几十 KB 对几 MB动作切换由骨骼混合驱动可以做到真正的 0.1 秒平滑过渡而不是帧之间的硬切。这个工程里没有接骨骼动画但节点结构是兼容的——把角色的Sprite组件换成sp.Skeleton在代码里skeleton.setAnimation(0, run, true)即可逻辑层不用大改。验证动画手感的习惯动作是把角色节点放在场景最左侧用cc.jumpBy连续跳三次每次看落地帧和角色 Y 轴最低点是否匹配。Y 轴最低点出现在跳跃动作总时长的 85% 左右如果差了 0.1 秒以上把落地帧事件往前挪。这里分享一个我常犯的错误一开始把跳跃动画剪辑总长设为 0.8 秒但jumpBy动作只给了 0.5 秒结果角色落到地面了动画还停在腾空那帧看起来像角色在地面下蹲了一下。从那以后我每次做跑酷项目都强制走一遍这个验证流程动画时长和 Action 时长必须一致差一秒都不行先对时长再调手感。后期要加下滑铲、二段跳之类的新动作也用同样的方式接入希望帮到你。本文还有配套的精品资源点击获取