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

Cocos Creator复刻Flappy Bird：从零掌握2D游戏开发核心模块

news 2026/8/5 4:06:49

1. 项目概述与核心价值

今天我们来聊聊一个经典到不能再经典的小游戏项目——用Cocos2d引擎复刻的Flappy Bird。如果你对游戏开发感兴趣，尤其是想入门Cocos Creator或者Cocos2d-x，这个项目绝对是一个宝藏级的起点。它麻雀虽小，五脏俱全，几乎涵盖了2D横版卷轴类游戏的所有核心模块：精灵控制、物理碰撞、随机地图生成、分数统计和游戏状态管理。我当年就是从剖析这类小游戏源码开始，一步步摸清了游戏循环、帧更新和事件响应的门道。

这个源码分享讲解，目的不是让你照抄一个游戏，而是通过拆解这个极简的案例，理解一个可运行的、有完整交互的游戏产品是如何被构建起来的。你会发现，那些让你抓狂的“虐心”体验，背后其实是一套清晰、严谨的逻辑在驱动。无论是想学习Cocos引擎的基础用法，还是想了解游戏开发的基本流程，这个项目都能给你带来远超预期的收获。接下来，我会带你深入源码，看看这只小鸟是怎么飞起来，又是怎么“啪”一下撞上管子的。

2. 源码结构与工程解析

拿到一个游戏源码，第一步不是急着运行，而是先看看它的“骨架”。一个良好的结构是项目可维护、可扩展的基础。典型的Cocos2d游戏项目（无论是Cocos Creator还是Cocos2d-x）通常包含以下几个核心部分：

资源目录（assets/res）：这里存放着游戏的所有“素材”，比如小鸟、管道、背景的图片（.png, .jpg），可能还有音效（.mp3, .wav）和字体文件。在Flappy Bird里，你至少会看到bird.png、pipe.png、bg.png这几个关键资源。
脚本目录（scripts/src）：这里是游戏逻辑的“大脑”。所有控制精灵行为、处理游戏规则的代码都放在这里。对于Flappy Bird，核心脚本通常包括：
- Game.js或GameScene.js：主游戏场景，负责游戏的整体流程控制，如开始、进行、结束状态的切换。
- Bird.js：小鸟角色类，封装了小鸟的跳跃物理逻辑（速度、重力加速度）、动画控制和碰撞体。
- Pipe.js或PipeManager.js：管道类或管道管理器，负责管道的生成、移动、回收以及随机高度计算。
- ScoreLabel.js：分数显示组件，用于更新和展示当前得分。
配置文件（project.json, settings.json等）：这些文件定义了项目的基本设置，比如画布大小、适配策略、物理引擎参数等。在Cocos Creator中，settings文件夹下的配置尤为重要。
场景文件（.fire或.scene）：在Cocos Creator中，场景文件可视化地保存了所有节点（Node）的层级关系、位置和属性。你可能会有一个MainMenu.scene（主菜单）和一个Game.scene（游戏场景）。

为什么这么组织？这是一种典型的基于组件的架构思想。将游戏中的每个功能实体（如小鸟、管道）都封装成独立的脚本组件（Component），然后挂载到场景中的节点上。这样做的好处是解耦，比如修改小鸟的跳跃力度不会影响到管道的生成逻辑，方便单独调试和复用代码。在查看源码时，顺着资源引用找到对应脚本，再理清脚本之间的通信（比如游戏场景如何获取小鸟的碰撞事件），你就能把握住整个项目的脉络。

注意：不同版本的Cocos引擎和不同开发者习惯可能导致目录结构略有差异。比如早期的Cocos2d-x C++项目可能资源直接放在根目录，而Cocos Creator项目结构更规范。关键是找到“资源”和“逻辑”这两大块的对应关系。

3. 核心模块深度拆解

3.1 小鸟控制与物理模拟

这是游戏手感的核心，直接决定了游戏是“虐心”还是“劝退”。我们来看看源码里是怎么实现的。

在Bird.js中，通常会定义一个Bird类，它继承自cc.Component。其核心属性包括：

jumpHeight：单次跳跃的初始速度或力度。这个值直接影响了小鸟能飞多高。
gravity：重力加速度。这是一个负值（因为在Cocos中，Y轴向上为正），它会让小鸟在非跳跃状态下持续下落。
velocity：当前在Y轴上的速度。每一帧，速度都会受到重力的影响而改变（velocity += gravity * dt），而位置则根据速度更新（this.node.y += velocity * dt）。

跳跃的触发通常绑定在触摸或鼠标事件上。在onLoad或start方法中，会监听触摸事件：

this.node.on(cc.Node.EventType.TOUCH_START, this._onTouch, this);

在_onTouch方法里，最关键的一行代码就是重置小鸟的垂直速度：

this.velocity = this.jumpHeight;

这就模拟了一个向上的瞬时冲量。接下来，在update(dt)函数中，物理模拟开始工作：

update(dt) { // 应用重力 this.velocity += this.gravity * dt; // 更新位置 this.node.y += this.velocity * dt; // 可选：限制小鸟不会飞出屏幕顶部 if (this.node.y > this.maxHeight) { this.node.y = this.maxHeight; this.velocity = 0; } }

参数调优心得：jumpHeight和gravity的平衡是门艺术。原版Flappy Bird的手感之所以“魔性”，是因为它的重力感很强（gravity值较大），而跳跃力度（jumpHeight）相对适中，导致上升快下降也快，操作需要非常精准。如果你觉得游戏太难，可以适当调小gravity，让下落更慢一些；如果觉得小鸟太“飘”，就增大gravity。我的经验是，先设定一个合理的gravity（比如-1200像素/秒²），然后反复测试jumpHeight，直到找到一个点击节奏舒服的值（比如300像素/秒）。这个过程没有捷径，就是不停地玩、不停地调。

3.2 管道生成与无限循环

管道的动态生成是创造无尽游戏体验的关键。这里面的核心思想是对象池（Object Pool）。因为管道会源源不断地从右侧出现，向左移动，移出屏幕左侧后又会重新被利用。如果不停地创建和销毁对象，会对性能造成很大压力。

在PipeManager.js中，通常会做以下几件事：

初始化对象池：在onLoad时，预实例化一定数量（比如4对）的管道节点，并放入一个数组或cc.NodePool中。
生成逻辑：设置一个定时器或根据距离在update中判断是否需要生成新管道。生成时，从对象池中取出一对（上下）管道，如果池为空，则动态创建一个。
设置属性：为取出的管道设置初始位置（通常在屏幕右侧之外），并随机计算上下管道之间的空隙（即小鸟能通过的空间）的Y轴坐标。这个随机数范围需要精心设计，既要保证空隙不会出现在屏幕外，又要保证游戏有变化性。
```
let gapY = cc.randomMinus1To1() * this.gapRange + this.baseGapY; // 在基准值上下浮动
```
移动与回收：在update中，让所有活跃的管道以恒定速度向左移动（pipe.x -= this.speed * dt）。当某对管道完全移出屏幕左侧时，将其放回对象池，等待下次被取出使用。

无限循环的奥秘：通过“生成 -> 移动 -> 回收 -> 再生成”的循环，只需要有限的几个管道节点，就能营造出无穷无尽的关卡错觉。这里的性能关键在于避免在每帧进行频繁的节点创建和销毁。对象池技术是游戏开发中优化性能的必备技能。

实操技巧：在调试管道生成时，可以暂时将管道速度调慢，或者画出空隙位置的参考线，确保随机算法不会产生“不可能通过”的管道组合（比如空隙紧贴屏幕边缘）。另外，管道移动的速度最好与背景滚动速度协调，否则会显得很突兀。

3.3 碰撞检测与游戏逻辑

碰撞决定了游戏的成败。Flappy Bird的碰撞分为两部分：小鸟与管道的碰撞（游戏失败），以及小鸟通过管道空隙的碰撞（得分）。

物理碰撞（失败条件）：
- 在Cocos Creator中，通常会给小鸟和管道添加碰撞组件（如cc.BoxCollider）。
- 在物理引擎（内置的或Box2D）启用的情况下，当两个碰撞体相交时，会触发碰撞回调函数。
- 在Bird.js的onCollisionEnter方法中，一旦检测到与管道（或地面）发生碰撞，就触发游戏结束逻辑，比如播放撞击音效、让小鸟旋转下落、弹出游戏结束界面。
触发检测（得分条件）：
- 在管道空隙中间，通常会放置一个无形的、比空隙稍宽的“触发器（Trigger）”节点，并为其添加cc.BoxCollider且设置为sensor: true。
- 当小鸟的碰撞体与这个传感器接触时，同样会触发onTriggerEnter事件，但不会发生物理阻挡。在这个事件里，进行分数增加（例如GameManager.instance.addScore()），并播放“叮”的音效。

为什么分开？物理碰撞需要精确的形体匹配和物理反馈（虽然这里反馈很简单），而得分检测只是一个“经过”的事件，用传感器更高效且符合逻辑。在源码中，你需要关注GameManager或主场景如何监听这些碰撞事件，并更新游戏状态。一个清晰的逻辑是：碰撞事件发生在Bird或Pipe上，但它们会将事件“上报”给一个全局的游戏管理器，由管理器来决定是扣生命值、加分还是结束游戏。这种事件驱动的架构让代码更清晰。

常见坑点：刚接触时容易混淆onCollisionEnter和onTriggerEnter。记住，需要物理阻挡和反弹的用Collision，只需要知道两者接触了就用Trigger（传感器）。另外，确保碰撞组（Group）设置正确，比如小鸟应该只与管道、地面和得分触发器发生碰撞，而不与UI元素碰撞。

4. 从零开始的实现步骤与核心代码

假设我们使用Cocos Creator 3.x版本（思路与2.x相通）来从头实现。这里不会贴出全部代码，但会勾勒出关键步骤和代码片段，你可以依此填充。

4.1 环境准备与项目搭建

安装Cocos Dashboard：从Cocos官网下载并安装Dashboard，这是管理引擎版本和项目的中心。
创建新项目：在Dashboard中，选择Cocos Creator 3.x版本，新建一个“空项目”或“2D游戏项目”。项目名称就叫FlappyBird。
导入资源：将准备好的小鸟、管道（上下两部分）、背景、地面等图片素材，直接拖拽到编辑器的“资源管理器”面板的assets目录下。Cocos Creator会自动将它们识别为精灵（Sprite）资源。
基础场景设置：打开默认的scene文件。在“层级管理器”中，将画布（Canvas）的尺寸设置为适合手机竖屏的比例，例如720 * 1280。设计分辨率策略可以选择FIXED_HEIGHT（固定高度），这样在不同宽高比的屏幕上，游戏内容都能完整显示。

4.2 构建游戏场景节点

在“层级管理器”中，从零开始搭建节点树：

Background（背景）：创建一个Sprite节点，将背景图拖给它。通常设置为铺满全屏。
Ground（地面）：同样创建一个Sprite节点作为地面。它的位置在屏幕底部。关键技巧：为了实现地面的无限滚动，你需要两个地面精灵首尾相接，一起向左移动，当一个完全移出屏幕左侧时，立即将其位置重置到另一个的右侧，形成循环。这个逻辑可以写在一个Ground.js组件里。
Bird（小鸟）：创建一个空节点，命名为Bird。然后为其添加一个子节点，作为Sprite显示小鸟图片。再给Bird节点添加刚体（cc.RigidBody2D，类型设为Kinematic，这样它不受物理力影响，完全由代码控制）和碰撞体（cc.BoxCollider2D）。最后，挂载我们即将编写的Bird.js脚本。
PipeManager（管道管理器）：创建一个空节点，挂载PipeManager.js脚本。它不负责显示，只负责逻辑。在它的属性检查器中，可以配置管道预制体、生成间隔、移动速度、空隙大小和范围等参数。
UI节点：创建用于显示分数的Label节点，以及游戏开始和结束的按钮、面板等。

4.3 编写核心脚本组件

Bird.js 核心片段：

cc.Class({ extends: cc.Component, properties: { jumpHeight: 300, // 跳跃力度 gravity: -1200, // 重力加速度 maxHeight: 450, // 飞行最高限制 }, onLoad() { this.velocity = 0; this.isAlive = true; // 监听触摸 this.node.on(cc.Node.EventType.TOUCH_START, this.jump, this); // 获取游戏管理器引用（假设通过全局变量或查找） this.game = cc.find("Canvas/GameManager").getComponent("GameManager"); }, jump() { if (!this.isAlive) return; this.velocity = this.jumpHeight; // 播放跳跃音效或动画 }, update(dt) { if (!this.isAlive) return; this.velocity += this.gravity * dt; this.node.y += this.velocity * dt; // 限制高度 if (this.node.y > this.maxHeight) { this.node.y = this.maxHeight; this.velocity = 0; } // 简单的地面碰撞检测（如果没用物理引擎） if (this.node.y < this.groundY) { this.die(); } }, onCollisionEnter(other) { // 与管道或地面碰撞 this.die(); }, onTriggerEnter(other) { // 与得分触发器碰撞 if (other.node.group === 'score') { this.game.addScore(); } }, die() { this.isAlive = false; this.game.gameOver(); // 停止更新，播放死亡动画等 } });

PipeManager.js 核心片段（对象池简化版）：

cc.Class({ extends: cc.Component, properties: { pipePrefab: cc.Prefab, // 管道预制体（包含上下管道和中间的触发器） spawnInterval: 2.0, // 生成间隔（秒） pipeSpeed: 200, // 管道移动速度（像素/秒） gapRange: 100, // 空隙位置随机范围 baseGapY: 0, // 空隙基准位置 }, onLoad() { this.pipePool = []; // 简易对象池数组 this.activePipes = []; this.timer = 0; // 预创建4对管道 for (let i = 0; i < 4; i++) { let pipe = cc.instantiate(this.pipePrefab); pipe.active = false; this.pipePool.push(pipe); } }, update(dt) { if (!this.game.isPlaying) return; // 计时生成 this.timer += dt; if (this.timer >= this.spawnInterval) { this.timer = 0; this.spawnPipe(); } // 移动所有活跃管道 for (let i = this.activePipes.length - 1; i >= 0; i--) { let pipe = this.activePipes[i]; pipe.x -= this.pipeSpeed * dt; // 回收移出屏幕的管道 if (pipe.x < -pipe.width / 2 - 100) { pipe.active = false; this.activePipes.splice(i, 1); this.pipePool.push(pipe); } } }, spawnPipe() { let pipe = null; if (this.pipePool.length > 0) { pipe = this.pipePool.pop(); } else { pipe = cc.instantiate(this.pipePrefab); } pipe.active = true; // 设置初始位置（屏幕右侧外） pipe.x = this.node.parent.width / 2 + pipe.width / 2; // 随机设置空隙位置 let gapY = this.baseGapY + (Math.random() * 2 - 1) * this.gapRange; // 这里需要根据gapY调整pipe内部上下管道的位置 // 假设pipe预制体根节点下有两个子节点：pipeTop, pipeBottom pipe.getChildByName('pipeTop').y = gapY + this.gapHeight / 2; pipe.getChildByName('pipeBottom').y = gapY - this.gapHeight / 2; // 将得分触发器放在空隙中间 pipe.getChildByName('scoreTrigger').y = gapY; this.node.addChild(pipe); this.activePipes.push(pipe); } });

GameManager.js 核心职责：这个脚本是游戏的大脑，通常挂载在场景根节点或一个独立的管理器节点上。它负责：

管理游戏状态（开始、进行中、结束）。
提供addScore()、gameOver()、restart()等公共方法，供其他组件调用。
控制UI的显示与隐藏（如开始按钮、分数标签、结束面板）。
播放背景音乐和全局音效。

4.4 整合与调试

将编写好的脚本挂载到对应的节点上，并在属性检查器中配置好公开的属性（如预制体引用、速度值等）。然后，将做好的管道节点（包含上下管道精灵和中间的触发器碰撞体）拖到资源管理器，生成一个预制体（Prefab），再将这个预制体拖给PipeManager脚本的pipePrefab属性。

点击编辑器上方的“运行”按钮，在浏览器或模拟器中测试游戏。重点关注：

小鸟的跳跃手感是否舒适？调整jumpHeight和gravity。
管道生成是否流畅？间隔和速度是否合理？
碰撞检测是否准确？确保小鸟碰到管道会死，通过空隙会加分。
分数更新和游戏状态切换是否正常？

5. 常见问题排查与性能优化

即使照着源码和教程做，也难免会遇到各种问题。这里我总结了一些高频坑点和解决方案。

5.1 游戏运行黑屏或白屏

这是新手最常遇到的问题，原因多种多样：

资源加载失败：检查所有图片、预制体、音效的路径是否正确，文件名是否有拼写错误。在Cocos Creator中，资源引用是相对路径，如果移动了资源位置，需要在属性检查器中重新拖拽赋值。
场景中没有激活的摄像机（Camera）：尤其是在3.x版本，2D场景也需要一个摄像机。确保场景根节点下有一个Camera组件，并且其ClearFlags设置为Solid Color，Visibility包含了需要渲染的图层。
脚本报错导致引擎初始化失败：打开浏览器的开发者工具（F12），查看“控制台（Console）”选项卡。任何红色的JavaScript错误都会导致游戏无法启动。根据错误信息定位到具体的脚本和行号进行修复。常见错误包括：访问未定义的变量、函数名拼写错误、组件属性未正确声明等。
画布（Canvas）尺寸或适配问题：确保Canvas节点的设计分辨率设置合理，并且Fit Height或Fit Width选项根据你的需求勾选。有时候内容跑到屏幕外也会看起来像黑屏。

5.2 碰撞检测不生效

碰撞系统是另一个容易出错的模块：

碰撞组件未启用：在属性检查器中，确保cc.BoxCollider或cc.CircleCollider的enabled属性是勾选的。
物理系统未开启或未更新：在Cocos Creator中，需要在项目设置里启用物理引擎（2D物理）。同时，确保有一个节点（通常是游戏管理器或场景根节点）在update中调用了物理步进（对于Cocos2d-x C++是scene->getPhysicsWorld()->update()，对于Creator的Collider系统，引擎通常会自动处理，但需要检查设置）。
碰撞分组（Group）不匹配：在“项目设置 -> 物理 -> 碰撞矩阵”中，确保小鸟所在的层和管道、地面所在的层是勾选了“碰撞”的。例如，小鸟在Default组，管道在Pipe组，你需要在矩阵中让Default和Pipe相交。
碰撞体大小或位置不对：使用编辑器中的碰撞体调试绘制（通常可以在场景编辑器的工具栏找到一个小图标）来可视化碰撞体。确保碰撞体的形状和位置完全覆盖了你的精灵图像。
传感器（Trigger）与普通碰撞体混淆：用于得分的触发器，其碰撞体必须勾选isSensor。用于物理阻挡的碰撞体则不要勾选。

5.3 性能优化要点

虽然Flappy Bird很简单，但养成好习惯对开发复杂游戏至关重要：

使用对象池：如前所述，对于频繁创建和销毁的对象（如子弹、敌人、管道），务必使用对象池。Cocos Creator提供了cc.NodePool类，比手动管理数组更方便。
减少每帧的查找和计算：避免在update函数中频繁使用cc.find或getChildByName来查找节点。应该在onLoad或start中将需要的节点引用缓存到变量中。
合图（Auto Atlas）：将多个小图片打包成一张大图，可以减少Draw Call，显著提升渲染性能。在Cocos Creator的“资源管理器”中，可以右键创建“自动图集资源”，然后将相关精灵帧拖进去。
禁用不可见节点：对于移出屏幕的管道，及时将其active设为false，这样引擎就不会再更新和渲染它。
慎用console.log：在调试完成后，移除或注释掉大量的console.log语句，它在移动端可能有一定性能开销。

5.4 手感调优与数值设计

游戏好不好玩，手感是关键。除了调整跳跃参数，还可以考虑：

加入微小的视觉反馈：小鸟跳跃时，可以瞬间放大一点再缩回，或者播放一个帧动画，增强操作反馈。
相机抖动：小鸟死亡时，让摄像机轻微震动一下，能强化失败的情绪。
分数递增动画：得分时，分数不是直接跳变，而是有一个快速滚动的动画，增加成就感。
难度曲线：可以让管道移动速度随着分数增加而略微加快，或者管道空隙的高度范围逐渐缩小，让游戏后期更具挑战性。这些逻辑可以在GameManager中根据当前分数来动态调整PipeManager的属性。

6. 源码学习的进阶思考

当你成功复现了这个游戏后，源码学习的价值才真正开始。不要停留在“能跑通”，要尝试去修改、去破坏、去扩展它。

尝试修改：

把小鸟换成你自己的角色图片，把管道换成不同的障碍物。
改变游戏规则，比如让小鸟不是点击上升，而是点击下降（类似“直升机”游戏）。
增加新的元素，比如随机出现的金币，吃到可以加分。

思考架构：

目前的GameManager是不是承担了太多职责？能否将分数管理、音效管理、UI管理拆分成独立的单例模块？
事件通信全部通过直接调用GameManager.instance的方法好吗？是否可以引入一个全局的事件系统（EventTarget），让Bird、PipeManager通过发射（emit）事件来通信，GameManager监听这些事件？这样耦合度会更低。
如何让这个游戏更容易适配到不同的分辨率？你的UI布局方案是否足够灵活？

探索引擎更多功能：