用Cocos Creator实现抓娃娃机：核心逻辑与打包实践

简介这是一份基于Cocos Creator与TypeScript编写的抓娃娃小游戏完整工程面向希望快速上手2D游戏开发、掌握物理模拟与UI交互的初中级开发者也可作为课堂教学或毕业设计的参考项目。工程共992个文件压缩包仅7.72MB涵盖PNG素材、JSON配置、Prefab预制体、Anim动画、fire场景、JS/TS脚本、MP3音效及plist图集等类型并包含Cocos编辑器所需的meta文件导入后即可直接运行调试。示例重点实现了爪子的移动、抓取、释放等机械动作利用Cocos Creator物理引擎模拟爪与娃娃的碰撞同时设计了积分系统和胜率概率增强游戏真实感界面层通过按钮监听触摸事件驱动操作代码注释清晰适合逐行拆解。作者还预留了HTTP或WebSocket后端接口单机数据可平滑升级为网络同步版本便于扩展排行或多人在线功能。目前已有1119人学习浏览阅读源码可深入理解Cocos Creator的动画系统、资源管理、性能优化、组件通信及Android/iOS/Web多端打包发布流程是一份兼具完整性与可运行性的实战入门资源。 做游戏开发这些年我见过不少想练手的人卡在最开始那一步。找项目练手要么太简单没挑战要么上来就是完整商业项目代码量大到根本啃不动。今天分享的这个cocos creator写的抓娃娃小示例属于一个特别适合入门到进阶的中间态项目——玩法大家都很熟实现起来又不算复杂但能把场景搭建、物理模拟、UI交互、状态管理、甚至Android打包这些关键环节全部串起来。这个示例能让你在一两天内跑起来一个能玩的抓娃娃机而且代码结构清晰可以当作你自己的小游戏项目底座。无论你是刚开始学Cocos Creator的新手还是想做点小游戏练手的老开发都值得花点时间过一遍。这篇文章我会把它背后的设计思路、核心代码、参数选型和打包踩坑全部拆开讲按我这个思路走你不仅能复现还能顺手改成自己想要的样子。1. 项目整体设计与思路拆解抓娃娃机的玩法再怎么包装核心循环还是那么几步夹子移动到目标上方、下探、闭合、上提、移动到出口、释放娃娃。想清楚这一串状态代码结构就清晰了一大半。别一上来就想着怎么把物理做得多真实而是先把状态流转理清楚再往里填具体实现。1.1 玩法循环与场景规划抓娃娃机的抓取体验其实由三个区域组成娃娃池堆满娃娃的箱底、夹取空间夹子移动和上下运动的范围、出口通道判断是否夹到的落点。在Cocos Creator里这三个区域分别对应不同职责的节点组物理边界、生成位置、检测逻辑都围绕它们来设计。我把整个场景的节点树大致列一下CanvasBoard箱体区域包含四面Retainer边界墙DollPool娃娃生成父节点ClawSystem夹子系统Claw夹子主体控制上下左右LeftArm左夹臂RightArm右夹臂ClawRope钢丝绳只是个拉伸动画不参与物理ExitZone出口检测UI按钮、局数、得分这棵树就是整个项目的骨架后面所有逻辑都是在往这棵树上挂脚本。你在编辑器里照着这个结构把节点建出来就等于完成了60%的工作量。我见过不少人一上来就写逻辑结果节点层级乱成一锅粥增删功能时改都改不动最后只能重开工程。1.2 为什么拿Cocos Creator做这个示例其实做抓娃娃这个项目用什么引擎都行但我自己更推荐Cocos Creator原因主要有四条。第一Cocos Creator的场景编辑器非常适合摆这种有明确空间感的小游戏娃娃池、夹子、UI拖一拖就能搭出来不像纯代码方式那样全靠脑补坐标。第二它内置了2D物理模块娃娃堆叠这种效果不需要自己手写碰撞检测给每个娃娃挂一个刚体组件重力、摩擦、碰撞全交给物理引擎处理省下大量物理公式的计算量。第三组件化脚本模式把夹子控制、娃娃生成、流程管理拆成独立组件每个脚本文件只负责一件事非常适合当学习项目拆着看。后续想加功能比如加个投币动画也是新挂一个组件的事不会污染原有逻辑。第四对Android打包支持很成熟写完代码直接build出APK装到手机上示例项目虽然小但整个发布链路可以被完整走一遍。很多新手做完Demo只会电脑上跑这一步能帮你补齐真机开发的完整认知。有人可能会问2D物理够用吗抓娃娃机从正面看确实是一个2D视角夹子的左右和上下运动也都在一个平面里2D物理完全足够而且比3D好调出问题的概率低很多。别被娃娃这个词骗了这里的娃娃在物理上就是一堆2D圆形或矩形刚体。2. 核心功能拆解与实现方案这个示例整体上我拆成三块来做娃娃生成、夹子控制、流程UI。每一块都可以独立测试合成一个完整可玩的小游戏。2.1 娃娃池搭建与娃娃生成娃娃池的核心是边界。箱子四边如果不做碰撞娃娃刚体一出生就会掉出屏幕外所以四面墙必须处理到位。给每个墙面挂一个静态刚体类型设置为Static再加上一个矩形碰撞体把箱底也放一个静态刚体当托盘这样娃娃就能在池子里堆起来了。娃娃预制体我给每个都挂上RigidBody2D和Collider2D。刚体启用重力线性阻尼设成1左右防止娃娃像乒乓球一样弹个不停碰撞体我用圆形原因是圆形碰撞计算简单、堆叠时不容易卡边把摩擦力调大一点娃娃之间才能压住否则夹子一碰就全散开。生成时用Prefab随机化位置和缩放让娃娃群看起来更自然。需要注意的是生成数量我建议控制在10到15个太少看起来不饱满太多会影响物理性能而且娃娃堆得过高夹子够不到就没意义了。import { _decorator, Component, instantiate, Node, Prefab, Vec3 } from cc; const { ccclass, property } _decorator; ccclass(DollGenerator) export class DollGenerator extends Component { property(Prefab) dollPrefab: Prefab null!; property(Node) dollParent: Node null!; property count 12; start() { for (let i 0; i this.count; i) { const doll instantiate(this.dollPrefab); const x Math.random() * 280 - 140; const y Math.random() * 100 60; doll.setPosition(new Vec3(x, y, 0)); this.dollParent.addChild(doll); } } }这里的坐标范围要和你的箱子尺寸匹配不能拍脑袋乱写。我建议在编辑器里把Box墙的尺寸记下来生成坐标按箱子尺寸的70%到80%算这样既不会压到墙边也不会因为太靠边导致最初几帧发生诡异的弹跳。另外随机数生成时的种子不固定没问题但如果你想让每次打开都是同一套布局方便调试可以自己写一个伪随机函数传入固定种子。2.2 夹子控制与抓取判定夹子的控制我用了一个非常简单的状态机总共四个状态idle待机、descending下探、ascending上提、releasing释放。状态切换的触发条件是整个项目的主线逻辑也是最容易出bug的地方。idle状态下夹子可以左右移动但不能上下动玩家确认位置后点击抓取按钮状态切到descending夹子开始向下运动到达预设的最低点后夹子做短停顿并执行闭合动画同时检测是否夹住娃娃然后状态切到ascending夹子上提到达最高点之后横向移动到出口区切到releasing松开娃娃。在下探过程中夹子会实时检测左右两个夹臂各自碰到了哪些娃娃。等夹子到达底部并回弹一小段后如果两个夹臂都碰到了同一个娃娃就认为夹住了否则就是空抓。这样比单纯依赖物理关节稳定得多也不会出现夹子把娃娃推飞却还判定成功的诡异情况。我建议你在调试阶段把状态变化用log打出来因为抓娃娃失败的原因大多出在状态没切对上——比如夹子还没完全到底就开始闭合或者上提前没有关闭娃娃物理导致娃娃在夹子上晃来晃去挂都挂不住。2.3 UI流程与次数限制这部分比较简单但容易被忽略。真实街机玩抓娃娃是要投币的咱们的示例没必要做那么复杂但至少要有剩余次数、当前得分、操作按钮的状态切换。比如每次抓取流程结束后把抓取按钮禁用等夹子回到初始位置再重新启用。这个流程结束再解锁的细节正是判断一个抓娃娃Demo能不能像游戏的关键。很多新手写出来的Demo按钮在任何时候都能点夹子还没归位就又下探整个状态机直接乱套。我用一个简单的GameManager组件来管理这些它负责记录剩余次数监听夹子状态机的状态变更事件状态变成idle时恢复按钮可用统计得分时用事件回调通知UI更新。按钮本身只发一个requestClawStart消息真正决定能不能开始抓取的是GameManager这样权限清晰后续加广告、加付费、加每日免费次数都很好扩展。3. 核心代码解析与关键配置这一章我把实现里最关键的两段代码和一个调参清单放出来照着写基本就能跑通。3.1 夹子移动与下探左右移动的逻辑很简单就是监听键盘左右键或者触摸按钮修改节点的position。不过要注意移动时把夹子的x限制在箱子两侧之间别跑出边界。这个限制范围我也做成了可配置属性因为不同手机分辨率下同样的像素值表现完全不一样。下探我不用物理驱动直接按固定速度改y坐标。因为真实夹子的运动是钢丝绳控制本身是线性的用物理反而容易抖动。下探速度我这里建议给一个适中值太快会像砸进娃娃堆太慢玩起来着急。// 下探过程每帧按速度修改y if (this.state State.Descending) { this.claw.y - this.downSpeed * dt; if (this.claw.y this.minY) { this.claw.y this.minY; this.onReachBottom(); } }minY的值要跟娃娃池的最高点对应最好做成可在编辑器里拖调的属性方便反复试。我自己的习惯是把minY调成略高于池底娃娃堆最高点的位置这样夹子刚好能接触到堆积较高区域的娃娃但又不会插得太深导致大量娃娃被推散。3.2 抓取检测与吸附实现下探到最底部后夹子会做一个闭合的动画把两个夹臂的rotation同时朝内侧转一个角度同时读取碰撞回调中记录到的娃娃。具体做法是给左右两个夹臂各挂一个碰撞体然后在夹子脚本的onEnable里给这两个碰撞体注册onContactBegin回调通过回调参数拿到另一个碰撞体所在的节点判断是不是娃娃池里的娃娃如果是就记录到一个集合里。闭合动画结束后从集合里找出在两个夹臂里都出现过的娃娃节点这就是判定成功的娃娃。如果找到了就执行吸附我这里用的是关闭物理加节点挂载的方式// 吸附把娃娃挂到夹子系统下并关闭物理 const dollRigid doll.getComponent(RigidBody2D); if (dollRigid) dollRigid.enabled false; this.clawSystem.addChild(doll); doll.setPosition(this.clawSystem.convertToNodeSpaceAR(doll.worldPosition));这个用关物理再挂载的方式是抓娃娃类小游戏里最省事、最稳定的假关节方案。真要用物理关节去模拟夹持你会在调试抖动上耗掉大量时间这类Demo真的没必要。娃娃被挂到夹子系统下后位置会跟着夹子一起走视觉上就是夹子带着娃娃上升非常自然。3.3 物理参数调优参考我整理了一张参数表可以当初始值直接用基本能复现出娃娃堆在箱子里的效果参数建议值说明重力Scale1标准重力太陡娃娃容易全挤成一团线性阻尼0.5~1.5娃娃之间碰撞后衰减速度防弹跳角速度阻尼1~3防止娃娃转个不停摩擦系数0.6~1摩擦太小娃娃会滑出夹臂恢复系数0~0.1几乎不要弹性娃娃刚体的Mass统一质量即可示例里重量差反而容易把其他娃娃带飞调参的时候不要同时改多个值一次只改一个参数然后跑起来观察堆叠效果和夹取手感改多了根本不知道是哪项引起的。拿摩擦系数来说默认0.2和0.8的手感差距巨大前者夹起来娃娃像泥鳅后者才能稳当卡在夹臂之间。4. 常见问题与排查技巧这个示例写完之后我踩了不少坑也帮几个朋友看过类似问题基本集中在抓取不稳和Android打包这两块。4.1 抓取不稳、穿模、娃娃乱飞这几个问题在抓娃娃示例里见得最多我分别说下排查路径。穿模先检查夹臂上的碰撞体大小是否和娃娃碰撞体大小匹配。如果你的夹臂碰撞体比娃娃小太多闭合动画看着是碰到了物理引擎却判定没接触自然抓不到。另外把夹子系统所在层的碰撞矩阵检查一下避免夹臂和四壁发生碰撞否则夹子还没到娃娃层就被墙弹开了。娃娃乱飞最常见原因是夹子速度太快撞进娃娃堆里时给了太大冲量。下探速度别给太猛我实测150左右比较稳超过200就容易把整堆娃娃撞散。娃娃之间的碰撞体还会互相挤压冲量一大边上没被撞到的娃娃也会被弹飞。夹得住但上提时掉落就是吸附环节没处理好。你需要在闭合动画完成后立刻禁用娃娃物理并把娃娃和夹子的层级关系理顺。上提时夹子会有轻微速度变化可以用Tween或者Lerp来做平滑移动减少视觉抖动。还有一个很多人都不知道的点上提过程中要把娃娃的位置重新对齐到夹臂中心否则娃娃会偏着挂看着特别假。4.2 从编辑器跑到真机Android APK打包拿Cocos Creator 3.8构建Android项目时环境配置这一步最简单也最容易劝退新人。进项目-构建发布平台选Android包名、应用名称填好然后点构建。第一次构建会下载Gradle依赖网络不好的话建议手动下载对应Gradle版本放到用户目录否则等半天卡在下载心态直接崩。构建时最容易报错的几个点我列出来Android SDK、NDK路径没配置去偏好设置-外部程序里指定NDK版本别乱用太高Cocos内置脚本对特定版本兼容最好。Gradle版本和SDK build-tools版本对不上看报错信息里提示的版本号缺哪个补哪个。包名如果用默认的部分机型安装时会和别的应用冲突建议从项目一开始就改成你自己的域名反写。构建完成后在build目录下会生成一个Android Studio工程直接用AS打开等Gradle同步完就能点击Run安装到手机上。如果你不熟AS也可以在Cocos Creator构建面板里直接勾选生成APK它会自动走完Gradle流程不过首次编译时间会比较长。真机调试时有个强烈建议打开调试模式用Chrome的DevTools远程调试Cocos页面这样可以在抓不到娃娃时远程看日志直接定位是状态机没切换还是碰撞回调没触发不用一遍遍隔空喊再试一次。屏幕适配方面Cocos的默认适配方案在竖屏下基本够用但不同分辨率的刘海屏还需要在构建选项里勾选适配屏幕安全区否则UI会被摄像头挖孔挡住。这个项目做完之后我自己最大的体会是小游戏Demo最怕的不是功能不会写而是看着会了、一动手就乱。抓娃娃这个玩法虽然简单但它恰好把场景搭建、物理碰撞、状态控制、交互UI、打包发布串成了一条完整的链路特别适合用来检验自己是不是真的理解了游戏开发的基本流程。最后再分享一个小技巧把抓取判定做成可配置的比如夹子到达底部后延迟0.2秒再闭合这个延迟直接决定了游戏的难度。调大一点就是新人友好调小一点就是街机噩梦拿来当控制难度的开关非常合适。另外建议给夹子加一个概率判定开关比如90%概率按照真实碰撞结果判定这是商业抓娃娃机的通用做法能让你后续想调数值时不用动物理代码。本文还有配套的精品资源点击获取