CocosCreator 3.x 实战：用碰撞组件做个‘切水果’小游戏（附完整源码）

CocosCreator 3.x 实战用碰撞组件打造切水果游戏全流程想象一下当你用手指划过屏幕水果应声而裂汁水四溅分数随之飙升——这就是我们要用CocosCreator 3.x实现的切水果游戏。不同于枯燥的理论讲解我们将通过这个充满乐趣的小项目带你深入掌握碰撞组件的实战应用。无论你是想提升游戏开发技能还是单纯想创造一款让人上瘾的小游戏这篇教程都将成为你的实用指南。1. 项目准备与场景搭建在开始编码之前我们需要先搭建好游戏的基础场景。打开CocosCreator 3.x创建一个新项目选择2D游戏模板。我们将从零开始构建这个切水果游戏的所有元素。首先创建几个关键节点背景节点添加一个Sprite组件设置为全屏背景图水果生成区域创建一个空节点作为所有水果的父节点刀光效果用于显示玩家划过的轨迹UI节点包含分数显示和游戏控制按钮// GameManager.ts - 基础场景结构 ccclass(GameManager) export class GameManager extends Component { property(Node) fruitContainer: Node null; // 水果容器 property(Prefab) fruitPrefab: Prefab null; // 水果预制体 property(Label) scoreLabel: Label null; // 分数显示 private score: number 0; }接下来我们需要准备游戏素材水果精灵图西瓜、橙子、香蕉等切水果的音效果汁飞溅的粒子效果刀光划过特效提示可以在资源商店找到免费的切水果游戏素材包或者自己绘制简单的矢量图形2. 碰撞系统配置与分组管理切水果游戏的核心在于碰撞检测——判断刀光是否碰到了水果。CocosCreator的碰撞系统提供了灵活的分组管理机制让我们能够精确控制哪些物体之间应该发生碰撞。首先打开项目设置→分组管理设置以下碰撞分组分组名称说明Default默认分组Fruits所有水果Blade刀光轨迹然后配置碰撞矩阵确保只有刀光和水果之间会产生碰撞检测DefaultFruitsBladeDefault✓Fruits✓Blade✓在代码中启用碰撞系统并设置分组// 启用碰撞系统 const manager director.getCollisionManager(); manager.enabled true; // manager.enabledDebugDraw true; // 调试时可开启 // 设置节点碰撞分组 fruitNode.getComponent(Collider2D).group Fruits; bladeNode.getComponent(Collider2D).group Blade;3. 水果与刀光的碰撞体设置不同类型的物体需要不同的碰撞体组件。在切水果游戏中我们需要处理三种主要碰撞体圆形碰撞体(CircleCollider)适合圆形水果如橙子、苹果多边形碰撞体(PolygonCollider)适合不规则形状水果如香蕉、西瓜切片矩形碰撞体(BoxCollider)用于刀光轨迹水果碰撞体设置步骤为水果节点添加Sprite组件并设置对应图片根据水果形状添加合适的Collider组件调整碰撞体大小和位置确保与视觉表现匹配// Fruit.ts - 水果初始化 ccclass(Fruit) export class Fruit extends Component { property(Collider2D) collider: Collider2D null; start() { // 随机给水果一个向上的初速度 const rigidBody this.getComponent(RigidBody2D); rigidBody.linearVelocity new Vec2(randomRange(-100, 100), randomRange(300, 500)); } }刀光碰撞体实现技巧刀光由多个小矩形碰撞体组成形成连续的轨迹每个碰撞体生命周期很短只存在几帧使用对象池管理刀光碰撞体提高性能// BladeManager.ts - 刀光轨迹生成 export class BladeManager extends Component { private bladeSegments: Node[] []; onTouchMove(event: EventTouch) { const newSegment instantiate(this.bladeSegmentPrefab); newSegment.position this.node.convertToNodeSpaceAR(event.getLocation()); this.bladeSegments.push(newSegment); // 2帧后移除旧碰撞体 setTimeout(() { if (this.bladeSegments.length 5) { const old this.bladeSegments.shift(); old.destroy(); } }, 2); } }4. 碰撞检测与游戏逻辑实现当刀光碰到水果时我们需要执行一系列游戏逻辑播放音效、生成粒子效果、增加分数等。这通过实现碰撞回调函数来完成。核心碰撞回调函数// Fruit.ts - 碰撞处理 onCollisionEnter(other: Collider2D, self: Collider2D) { if (other.group Blade) { this.onCut(); } } private onCut() { // 播放切水果音效 this.playCutSound(); // 生成果汁粒子效果 this.spawnJuiceEffect(); // 增加分数 GameManager.instance.addScore(10); // 水果分成两半 this.splitFruit(); // 销毁当前水果 this.node.destroy(); }水果切割效果实现根据切割方向计算分割线创建两个新的水果半体为每个半体添加适当的物理力和旋转设置半体的自动销毁时间private splitFruit() { // 创建左半部分 const leftHalf instantiate(this.halfPrefab); leftHalf.getComponent(RigidBody2D).angularVelocity -360; leftHalf.getComponent(RigidBody2D).linearVelocity new Vec2(-100, 200); // 创建右半部分 const rightHalf instantiate(this.halfPrefab); rightHalf.getComponent(RigidBody2D).angularVelocity 360; rightHalf.getComponent(RigidBody2D).linearVelocity new Vec2(100, 200); // 3秒后自动销毁 setTimeout(() { leftHalf.destroy(); rightHalf.destroy(); }, 3000); }5. 性能优化与高级技巧随着游戏进行同时存在的水果和刀光碰撞体会越来越多合理的性能优化至关重要。以下是几个关键优化点碰撞检测优化策略使用对象池管理水果和刀光碰撞体限制同时存在的水果数量对离开屏幕的水果进行回收禁用不可见水果的碰撞检测// 对象池实现示例 const fruitPool new NodePool(); for (let i 0; i 20; i) { fruitPool.put(instantiate(fruitPrefab)); } // 获取水果 const getFruit () { return fruitPool.size() 0 ? fruitPool.get() : instantiate(fruitPrefab); }; // 回收水果 const recycleFruit (fruit: Node) { fruitPool.put(fruit); };高级碰撞处理技巧碰撞点检测通过world.points获取精确碰撞位置用于生成粒子效果切割方向计算根据刀光轨迹计算切割角度影响水果半体的飞散方向连击系统短时间内连续切中水果可获得额外分数加成// 连击系统实现 class ComboSystem { private comboCount: number 0; private lastCutTime: number 0; public onCutFruit() { const now Date.now(); if (now - this.lastCutTime 1000) { // 1秒内 this.comboCount; } else { this.comboCount 1; } this.lastCutTime now; // 根据连击数计算额外分数 const extraScore Math.min(5, Math.floor(this.comboCount / 3)); GameManager.instance.addScore(10 extraScore); } }6. 游戏完善与发布完成核心玩法后我们需要添加一些润色元素让游戏更加完整必备游戏功能开始/结束游戏界面最高分记录多种水果类型普通水果、炸弹等游戏难度随时间递增发布前的检查清单测试不同屏幕尺寸下的表现优化移动端触摸控制压缩资源大小添加加载进度条设置适当的游戏图标和启动画面// 游戏难度控制 class DifficultyManager { private gameTime: number 0; update(dt: number) { this.gameTime dt; // 每30秒增加难度 if (this.gameTime 30) { FruitManager.instance.spawnInterval * 0.9; // 加快生成速度 FruitManager.instance.fruitSpeed * 1.1; // 提高水果初速度 this.gameTime 0; } } }在实现切水果游戏的过程中最让我印象深刻的是碰撞回调的精确控制。最初版本中快速滑动会导致同一水果被多次计分通过添加碰撞标记如isCut布尔值解决了这个问题。另一个实用技巧是使用Vec2.angle计算刀光方向使水果半体总是沿着切割方向飞散这让物理效果看起来更加自然。