Cocos Creator实战：从零开发经典打砖块游戏，掌握2D游戏开发核心

1. 项目概述与核心价值

最近在社区里看到不少朋友想入门游戏开发，尤其是想从一些经典的小游戏入手。提到经典，“打砖块”（Breakout）绝对是一个绕不开的名字。它规则简单，但麻雀虽小五脏俱全，涵盖了游戏开发中许多核心概念：场景管理、物理碰撞、用户输入、游戏逻辑和UI交互。如果你能用Cocos Creator把它完整地做出来，那么你对一个游戏引擎的基础工作流和核心模块就算真正入门了。

我选择Cocos Creator来讲解，是因为它对Web和小游戏平台的支持非常友好，可视化编辑器降低了美术和场景搭建的门槛，而TypeScript脚本又保证了逻辑的清晰和可维护性。对于新手来说，它比Unity或Unreal Engine更轻量，学习曲线更平缓；对于有经验的开发者，其高效的开发效率和跨平台发布能力也极具吸引力。这个教程的目标，就是带你从打开Cocos Creator空项目开始，一步步构建出一个功能完整、代码清晰、可以打包发布的“打砖块”游戏。过程中，我会穿插讲解为什么这么设计，以及我踩过哪些坑，让你不仅“抄”会代码，更能理解背后的思路。

2. 开发环境准备与项目初始化

2.1 Cocos Creator安装与版本选择

工欲善其事，必先利其器。首先你需要去Cocos官网下载Cocos Creator。目前主流稳定版本是3.x系列（如3.8.x）。我强烈建议新手直接使用最新的LTS（长期支持）版本，因为它修复了大多数已知问题，社区资源和插件生态也最丰富。安装过程就是标准的下一步下一步，注意安装路径不要有中文和空格，这是很多开发工具的通用避坑准则。

安装完成后首次启动，你会看到一个Dashboard（仪表盘）。这里是你管理所有项目的地方。对于新手，我建议先花10分钟浏览一下官方提供的“示例集合”和“新手教程”项目，不用深究代码，主要是感受一下编辑器的布局和基本操作，比如如何在场景中拖拽节点、如何查看和修改属性检查器（Inspector）里的参数。

2.2 创建你的第一个“打砖块”项目

回到Dashboard，点击醒目的“新建”按钮。在弹出的模板选择界面，我们选择“Empty（3D）”或“Empty（2D）”。对于“打砖块”这种纯2D游戏，选择2D空项目即可。项目名称我习惯用“BreakoutTutorial”，路径选择一个你容易找到的文件夹。点击“创建”后，Cocos Creator会为你生成一个最基础的项目结构。

创建成功后，主编辑器界面会自动打开。默认会有一个名为“scene”的场景和一个名为“Canvas”的根节点。在动手之前，我们先规划一下项目结构。一个好的习惯是在“资源管理器”面板中创建清晰的文件夹。我通常会创建以下文件夹：Scripts（存放所有TypeScript脚本）、Prefabs（存放预制体，即可复用的节点模板）、Textures（存放图片素材）、Sounds（存放音效）。你可以通过右键点击“assets”目录，选择“创建 -> 文件夹”来完成。这一步看似琐碎，但当你的项目有几十个脚本和上百个资源时，一个清晰的结构能节省你大量的查找时间。

3. 游戏场景与核心组件搭建

3.1 构建游戏世界的基本元素

我们的“打砖块”游戏需要几个核心视觉元素：挡板（Paddle）、小球（Ball）、砖块（Brick）以及四面墙壁。首先来处理最简单的墙壁。

在“层级管理器”中，右键点击“Canvas”，选择“创建 -> 2D对象 -> Sprite（单色）”。将其重命名为“Wall_Top”。在右侧的“属性检查器”中，找到“SpriteRenderer”组件下的“Color”属性，将其设置为深灰色以便区分。然后调整“Node”组件下的“Position”（位置）和“Scale”（缩放）。假设我们的游戏区域是960x640像素，我们可以将“Wall_Top”的Position.y设置为320（即画布顶部），Scale.x设置为960，Scale.y设置为20，这样我们就得到了一条横贯顶部的厚墙。用同样的方法，创建“Wall_Left”、“Wall_Right”和“Wall_Bottom”。注意，“Wall_Bottom”通常作为死亡区域，当小球掉落至此，游戏结束。

注意：这里我们使用缩放（Scale）来改变Sprite的大小，而不是直接修改其Size属性。因为对于由引擎渲染的Sprite组件，修改Scale是更通用和高效的方式。Size属性更多用于UI组件。

3.2 创建可交互的挡板（Paddle）

挡板是玩家控制的角色。我们再次创建一个Sprite，命名为“Paddle”。为其选择一个醒目的颜色，比如蓝色。调整其大小（例如Scale为 120x20）。将其Position设置在画布底部上方一点，比如(0, -250)。

接下来是关键：让挡板能跟随鼠标或触摸移动。我们需要为“Paddle”节点添加一个脚本组件。在“资源管理器”的Scripts文件夹上右键，选择“创建 -> TypeScript”，命名为PaddleController。双击这个脚本文件，它会在你的默认代码编辑器中打开（如VSCode）。

在PaddleController类中，我们需要做几件事：

1. 获取挡板节点在屏幕坐标系中的位置。
2. 监听鼠标或触摸的移动事件。
3. 将输入的位置映射到游戏世界坐标，并限制挡板在左右墙之间移动。

import { _decorator, Component, input, Input, EventMouse, Node, Vec3 } from 'cc'; const { ccclass, property } = _decorator; @ccclass('PaddleController') export class PaddleController extends Component { // 声明一个属性，用于在编辑器中方便地设置移动速度 @property public moveSpeed: number = 10; // 声明一个属性，用于在编辑器中链接左右墙节点，以计算移动边界 @property(Node) public leftWall: Node = null!; @property(Node) public rightWall: Node = null!; // 用于存储允许移动的X轴最小最大值 private _minX: number = 0; private _maxX: number = 0; start() { // 注册鼠标移动事件监听 input.on(Input.EventType.MOUSE_MOVE, this.onMouseMove, this); // 计算移动边界：挡板中心点到墙边的距离 if (this.leftWall && this.rightWall) { const paddleHalfWidth = this.node.scale.x / 2; this._minX = this.leftWall.position.x + paddleHalfWidth; this._maxX = this.rightWall.position.x - paddleHalfWidth; } } onMouseMove(event: EventMouse) { // 获取鼠标在屏幕上的位置（原点在左下角） const screenPos = event.getLocation(); // 将屏幕坐标转换为世界坐标（这里我们只关心X轴） // 注意：这是一个简化的转换，假设Canvas的适配模式是固定宽度，且锚点在中心。 // 更严谨的做法是使用Camera组件或UITransform进行坐标转换。 const worldPos = new Vec3(screenPos.x - 480, this.node.position.y, 0); // 假设画布宽度960，中心在(0,0) // 限制目标位置在边界内 let targetX = worldPos.x; targetX = Math.max(this._minX, Math.min(targetX, this._maxX)); // 使用线性插值让移动更平滑，而不是直接瞬移 const currentPos = this.node.position; const newX = currentPos.x + (targetX - currentPos.x) * this.moveSpeed * 0.01; this.node.setPosition(newX, currentPos.y, currentPos.z); } onDestroy() { // 组件销毁时，记得移除事件监听，防止内存泄漏 input.off(Input.EventType.MOUSE_MOVE, this.onMouseMove, this); } }

保存脚本后，回到Cocos Creator编辑器。选中“Paddle”节点，在“属性检查器”最下方点击“添加组件 -> 自定义脚本 -> PaddleController”。你会看到脚本组件被添加，并且出现了我们在代码中声明的moveSpeed、leftWall和rightWall属性。将层级管理器中的“Wall_Left”和“Wall_Right”节点分别拖拽到对应的属性框中。现在运行游戏（点击编辑器顶部的三角形播放按钮），你应该可以通过移动鼠标来控制挡板在左右墙之间滑动了。

3.3 赋予小球生命与物理属性

接下来创建小球。新建一个Sprite节点，命名为“Ball”，设置为红色圆形，大小例如Scale为 (20, 20)。初始位置可以放在挡板上方。

小球需要运动，并且需要与挡板、砖块、墙壁发生碰撞。在Cocos Creator中，物理碰撞通常由物理引擎（如内置的Box2D）来处理。我们需要为“Ball”节点添加两个关键组件：

1. RigidBody2D（刚体2D）：让物理引擎接管这个物体的运动。在“属性检查器”中点击“添加组件 -> 物理2D -> RigidBody2D”。将其Body Type设置为Dynamic（动态，受物理力影响），Gravity Scale设置为0，因为我们不希望小球受重力下落。Linear Damping（线性阻尼）可以设置为0.01，给运动一点点阻力，防止速度无限累积，但影响微乎其微。
2. CircleCollider2D（圆形碰撞体2D）：定义小球的碰撞形状。添加组件“物理2D -> CircleCollider2D”。半径（Radius）会自动匹配Sprite的大小，通常不需要修改。

现在小球有了物理属性，但它还不会动。我们需要一个脚本来给它一个初始速度。创建脚本BallController并挂载到“Ball”节点上。

import { _decorator, Component, RigidBody2D, Vec2, Input, input, KeyCode } from 'cc'; const { ccclass, property } = _decorator; @ccclass('BallController') export class BallController extends Component { // 声明小球初始速度 @property public initialSpeed: number = 500; // 引用刚体组件 private _rigidBody: RigidBody2D = null!; start() { // 获取刚体组件 this._rigidBody = this.getComponent(RigidBody2D)!; // 监听键盘空格键，用于发射小球 input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); } onKeyDown(event: any) { // 如果按下空格键，并且小球当前是静止的（速度接近0），则给小球一个初始速度 if (event.keyCode === KeyCode.SPACE) { const velocity = this._rigidBody.linearVelocity; if (velocity.length() < 1) { // 近似判断为静止 // 设置一个向上的初始速度，带一点随机水平分量让游戏更有趣 const randomX = (Math.random() - 0.5) * 100; // -50 到 50 之间的随机数 this._rigidBody.linearVelocity = new Vec2(randomX, this.initialSpeed); } } } update(deltaTime: number) { // 可选：为了防止小球速度因碰撞衰减，可以定期将其速度归一化，保持恒定速率 // 但这会改变物理模拟的真实性，根据游戏风格选择是否添加。 // const velocity = this._rigidBody.linearVelocity; // if (velocity.length() > 0) { // velocity.normalize().multiplyScalar(this.initialSpeed); // this._rigidBody.linearVelocity = velocity; // } } onDestroy() { input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this); } }

这个脚本让小球在按下空格键时，获得一个向上的初始速度。initialSpeed属性可以在编辑器中调整，控制小球飞行的快慢。

3.4 批量生成砖块墙

砖块是游戏中被击打的目标。我们首先创建一个砖块预制体（Prefab），这样就能方便地复制出一整面墙。

1. 创建一个Sprite节点，命名为“Brick”。设置一个好看的颜色和大小（例如Scale为 80x30）。
2. 为其添加**BoxCollider2D（矩形碰撞体2D）**组件，碰撞体会自动适配Sprite的大小。
3. 为了检测小球击中砖块，我们还需要一个脚本。创建BrickController脚本，先不写逻辑，只挂载上去。这一步是为了后续扩展。
4. 最关键的一步：在“资源管理器”中，将Prefabs文件夹拖到编辑器外（或右键点击该文件夹选择“创建 -> 预制体”），然后将“层级管理器”中的“Brick”节点拖拽到这个新建的预制体资源上。你会看到“Brick”节点的图标变成了蓝色，这表示它已经是一个预制体实例了。现在，你可以从“层级管理器”中删除这个原始的“Brick”节点。

有了预制体，我们可以用代码来生成一整排砖块。创建一个空节点，命名为“BrickManager”，并为其添加脚本BrickManager。

import { _decorator, Component, Prefab, instantiate, Node, Vec3 } from 'cc'; const { ccclass, property } = _decorator; @ccclass('BrickManager') export class BrickManager extends Component { // 在编辑器中关联砖块预制体 @property(Prefab) public brickPrefab: Prefab = null!; // 砖块行数、列数、间距 @property public rows: number = 5; @property public cols: number = 10; @property public spacingX: number = 85; @property public spacingY: number = 35; // 砖块墙的起始位置（左上角） @property(Vec3) public startPos: Vec3 = new Vec3(-400, 150, 0); start() { this.generateBricks(); } generateBricks() { if (!this.brickPrefab) { console.error('Brick prefab is not assigned!'); return; } for (let row = 0; row < this.rows; row++) { for (let col = 0; col < this.cols; col++) { // 实例化预制体 const brickNode = instantiate(this.brickPrefab); // 设置父节点为当前BrickManager节点，便于管理 brickNode.setParent(this.node); // 计算位置 const x = this.startPos.x + col * this.spacingX; const y = this.startPos.y - row * this.spacingY; brickNode.setPosition(x, y, 0); // 可以在这里为不同的行设置不同的颜色或生命值（通过获取BrickController组件） // const brickCtrl = brickNode.getComponent(BrickController); // if (brickCtrl) { // brickCtrl.setHp(row + 1); // 例如，第一行生命值1，第二行生命值2... // } } } } }

回到编辑器，选中“BrickManager”节点，将Prefabs文件夹下的“Brick”预制体拖拽到其Brick Prefab属性上。调整rows、cols、spacing和startPos参数，你就能在场景中看到自动生成的一面整齐的砖块墙了。运行游戏，小球发射后应该能撞击砖块并将其“撞飞”（因为物理引擎的作用）。

4. 游戏逻辑与交互实现

4.1 实现碰撞检测与砖块消除

目前，小球撞到砖块只会发生物理碰撞，砖块会被弹开，但不会消失。我们需要实现碰撞后的逻辑：小球反弹，砖块被销毁。

这需要用到Cocos Creator的物理碰撞回调。我们需要修改BallController脚本，监听碰撞事件。

首先，确保“Ball”节点上的RigidBody2D组件勾选了Enabled Contact Listener（启用接触监听器）。然后修改BallController.ts：

import { _decorator, Component, RigidBody2D, Vec2, Input, input, KeyCode, ICollisionEvent, Contact2DType, Collider2D } from 'cc'; const { ccclass, property } = _decorator; @ccclass('BallController') export class BallController extends Component { @property public initialSpeed: number = 500; private _rigidBody: RigidBody2D = null!; start() { this._rigidBody = this.getComponent(RigidBody2D)!; input.on(Input.EventType.KEY_DOWN, this.onKeyDown, this); // 获取碰撞体组件，并注册碰撞回调 const collider = this.getComponent(Collider2D); if (collider) { collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this); } } onKeyDown(event: any) { if (event.keyCode === KeyCode.SPACE) { const velocity = this._rigidBody.linearVelocity; if (velocity.length() < 1) { const randomX = (Math.random() - 0.5) * 100; this._rigidBody.linearVelocity = new Vec2(randomX, this.initialSpeed); } } } // 碰撞开始回调 onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: any) { // 判断碰撞到的物体是否是砖块（通过标签或组名，这里假设砖块节点名包含"Brick"） if (otherCollider.node.name.includes('Brick')) { // 销毁砖块节点 otherCollider.node.destroy(); // 这里可以添加得分、播放音效等逻辑 console.log('Hit a brick!'); } // 注意：与墙壁和挡板的碰撞由物理引擎自动处理反弹，我们不需要在这里写逻辑。 } onDestroy() { input.off(Input.EventType.KEY_DOWN, this.onKeyDown, this); const collider = this.getComponent(Collider2D); if (collider) { collider.off(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this); } } }

现在运行游戏，小球击中砖块后，砖块就会消失。但是你会发现一个问题：小球有时会卡在砖块堆里，或者反弹轨迹很奇怪。这是因为我们在一帧内可能同时触发多个碰撞，或者碰撞检测和物体销毁的时机问题。一个更稳健的做法是在砖块脚本里处理被击中的逻辑，并延迟一帧销毁。

我们来完善BrickController.ts：

import { _decorator, Component, ICollisionEvent, Contact2DType, Collider2D } from 'cc'; const { ccclass, property } = _decorator; @ccclass('BrickController') export class BrickController extends Component { // 砖块的生命值 @property public hp: number = 1; // 被击中时的效果（比如颜色变化） @property public hitColor: string = '#888888'; private _originalColor: string = ''; start() { // 保存原始颜色，假设Sprite组件的颜色是通过字符串设置的（示例，实际可能不同） // 更常见的做法是获取Sprite组件的Color属性 const sprite = this.getComponent('cc.Sprite') as any; if (sprite) { this._originalColor = sprite.color.toHEX(); } const collider = this.getComponent(Collider2D); if (collider) { collider.on(Contact2DType.BEGIN_CONTACT, this.onHit, this); } } onHit(selfCollider: Collider2D, otherCollider: Collider2D) { // 判断撞击物是否是球（可以通过分组或标签，这里简单判断节点名） if (otherCollider.node.name === 'Ball') { this.hp--; if (this.hp <= 0) { // 生命值为0，销毁砖块 this.scheduleOnce(() => { this.node.destroy(); }, 0); // scheduleOnce with 0 delay will execute in next frame } else { // 生命值大于0，改变颜色表示被击中 this.changeColor(this.hitColor); } } } changeColor(colorStr: string) { const sprite = this.getComponent('cc.Sprite') as any; if (sprite) { sprite.color.fromHEX(colorStr); } } onDestroy() { const collider = this.getComponent(Collider2D); if (collider) { collider.off(Contact2DType.BEGIN_CONTACT, this.onHit, this); } } }

同时，修改BallController的onBeginContact方法，移除其中销毁砖块的逻辑，让砖块自己处理被击中事件。这样职责更清晰。

4.2 游戏状态管理：生命、分数与胜负

一个完整的游戏需要有状态管理。我们创建一个GameManager脚本，作为游戏的大脑，管理分数、生命值、游戏开始/结束状态。

首先，创建UI来显示分数和生命值。在“层级管理器”中右键点击“Canvas”，选择“创建 -> UI -> Label”，创建两个Label节点，分别重命名为“ScoreLabel”和“LifeLabel”。调整它们的位置（如放在屏幕左上角和右上角），并在“属性检查器”的“Label”组件中设置初始文本（如“Score: 0”, “Life: 3”）和字体大小、颜色。

然后创建GameManager.ts脚本，挂载到“Canvas”或一个专门的空节点上。

import { _decorator, Component, Label, Node, director } from 'cc'; const { ccclass, property } = _decorator; @ccclass('GameManager') export class GameManager extends Component { // 单例模式，方便其他脚本访问 private static _instance: GameManager = null!; public static get instance(): GameManager { return GameManager._instance; } // 关联UI Label节点 @property(Label) public scoreLabel: Label = null!; @property(Label) public lifeLabel: Label = null!; // 关联小球和挡板节点（用于重置位置） @property(Node) public ballNode: Node = null!; @property(Node) public paddleNode: Node = null!; // 游戏状态变量 private _score: number = 0; private _life: number = 3; private _isGameOver: boolean = false; onLoad() { if (GameManager._instance && GameManager._instance !== this) { this.node.destroy(); return; } GameManager._instance = this; // 防止切换场景时被销毁 // director.addPersistRootNode(this.node); // 根据游戏设计决定是否常驻 } start() { this.resetGame(); } resetGame() { this._score = 0; this._life = 3; this._isGameOver = false; this.updateUI(); this.resetBallAndPaddle(); } resetBallAndPaddle() { // 重置小球位置和速度 if (this.ballNode) { const ballCtrl = this.ballNode.getComponent('BallController'); if (ballCtrl) { this.ballNode.setPosition(0, -200, 0); // 放回挡板上方 const rigidBody = this.ballNode.getComponent('cc.RigidBody2D'); if (rigidBody) { rigidBody.linearVelocity = new (Vec2 as any)(0, 0); // 速度归零 } } } // 重置挡板位置到中心 if (this.paddleNode) { this.paddleNode.setPosition(0, this.paddleNode.position.y, 0); } } // 增加分数 public addScore(points: number) { if (this._isGameOver) return; this._score += points; this.updateUI(); // 可以在这里检查是否所有砖块都被消除，触发胜利条件 } // 减少生命 public loseLife() { if (this._isGameOver) return; this._life--; this.updateUI(); if (this._life <= 0) { this.gameOver(false); // 游戏失败 } else { // 生命值还有，重置球和挡板 this.resetBallAndPaddle(); } } // 游戏胜利（当所有砖块被消除时由BrickManager调用） public winGame() { if (this._isGameOver) return; this.gameOver(true); } private gameOver(isWin: boolean) { this._isGameOver = true; console.log(isWin ? 'You Win!' : 'Game Over!'); // 这里可以显示一个游戏结束的UI面板，提供重新开始或返回菜单的按钮 // 例如：this.showGameOverPanel(isWin); } private updateUI() { if (this.scoreLabel) { this.scoreLabel.string = `Score: ${this._score}`; } if (this.lifeLabel) { this.lifeLabel.string = `Life: ${this._life}`; } } }

现在，我们需要在砖块被销毁时调用GameManager.instance.addScore()。修改BrickController的销毁部分：

// 在BrickController的onHit方法中，销毁砖块前 import { GameManager } from './GameManager'; // 需要正确引用路径 // ... 在hp <= 0的分支内 this.scheduleOnce(() => { // 通知GameManager加分 if (GameManager.instance) { GameManager.instance.addScore(100); // 假设每个砖块100分 } this.node.destroy(); }, 0);

接着，我们需要检测小球是否掉落到底部死亡区域。修改BallController的onBeginContact方法，或者为底部墙壁添加一个单独的脚本DeathZone。

创建一个DeathZoneController脚本，挂载到“Wall_Bottom”节点上：

import { _decorator, Component, ICollisionEvent, Contact2DType, Collider2D } from 'cc'; import { GameManager } from './GameManager'; // 正确路径 const { ccclass } = _decorator; @ccclass('DeathZoneController') export class DeathZoneController extends Component { start() { const collider = this.getComponent(Collider2D); if (collider) { collider.on(Contact2DType.BEGIN_CONTACT, this.onBallEnter, this); } } onBallEnter(selfCollider: Collider2D, otherCollider: Collider2D) { if (otherCollider.node.name === 'Ball') { // 小球进入死亡区域，通知GameManager减少生命 if (GameManager.instance) { GameManager.instance.loseLife(); } } } onDestroy() { const collider = this.getComponent(Collider2D); if (collider) { collider.off(Contact2DType.BEGIN_CONTACT, this.onBallEnter, this); } } }

最后，别忘了在编辑器中，将对应的节点（ScoreLabel, LifeLabel, Ball, Paddle）拖拽到GameManager组件的各个属性槽中。

4.3 增加游戏趣味性与细节打磨

基础功能完成后，我们可以添加一些细节让游戏更好玩。

1. 音效反馈：在Scripts目录下创建AudioManager脚本，管理游戏音效。为击中砖块、失去生命、游戏胜利/失败等事件添加简单的音效播放。Cocos Creator支持AudioSource组件。你可以将音效文件（如.mp3, .wav）导入到Sounds文件夹，然后在脚本中通过resources.load或直接拖拽引用进行播放。

2. 粒子特效：当砖块被击碎时，可以播放一个小的爆炸粒子效果。在Cocos Creator中创建粒子系统（ParticleSystem2D），调整其颜色、大小、发射速度等参数，将其制作成预制体。在BrickController销毁砖块前，实例化这个粒子预制体，并设置其位置为砖块中心。

3. 多种砖块类型：修改BrickManager的generateBricks方法，或者通过为砖块预制体添加不同的属性，来创建不同生命值、不同分数、甚至被击中后会分裂或产生特殊效果的砖块。这需要扩展BrickController脚本，增加更多的属性和状态。

4. 挡板碰撞角度影响反弹：经典的打砖块游戏中，小球击中挡板的不同位置，其反弹的水平方向会不同。我们可以在PaddleController中实现这个逻辑。在onMouseMove中记录挡板中心点，当小球与挡板碰撞时（需要在BallController中判断碰撞对象是挡板），根据碰撞点相对于挡板中心的偏移量，计算一个水平方向的速度分量。

// 在BallController的onBeginContact方法中添加对挡板的处理 if (otherCollider.node.name === 'Paddle') { const paddleNode = otherCollider.node; const paddleCtrl = paddleNode.getComponent('PaddleController'); if (paddleCtrl) { // 计算碰撞点相对于挡板中心的偏移比例（-0.5 到 0.5） const paddleWidth = paddleNode.scale.x; const ballPos = this.node.position; const paddlePos = paddleNode.position; const hitOffset = (ballPos.x - paddlePos.x) / (paddleWidth / 2); // 归一化到[-1, 1] // 根据偏移量调整反弹的水平速度分量 const maxBounceAngle = 60; // 最大反弹角度（度） const angle = hitOffset * (maxBounceAngle * Math.PI / 180); // 转换为弧度 const speed = this._rigidBody.linearVelocity.length(); // 保持原速度大小 const newVelX = Math.sin(angle) * speed; const newVelY = Math.cos(angle) * speed; // 确保Y方向始终向上 this._rigidBody.linearVelocity = new Vec2(newVelX, newVelY); } }

5. 项目构建、发布与优化

5.1 调试与性能预览

在开发过程中，要善用Cocos Creator提供的调试工具。预览功能（点击编辑器顶部的“预览”按钮）可以在浏览器中快速运行游戏，并可以使用浏览器的开发者工具（F12）进行调试，查看Console日志、设置断点等。

关注性能分析器（Profiler），特别是当砖块数量很多时，查看Draw Call（绘制调用）和帧率（FPS）是否稳定。对于2D游戏，一个常见的优化手段是使用自动图集（Auto Atlas）。将多个小的砖块、UI元素图片打包成一张大图，可以显著减少Draw Call。在“资源管理器”中右键点击，选择“创建 -> 自动图集配置”，然后将相关图片拖入即可。

5.2 构建为Web或小游戏平台

游戏开发完成后，我们需要将其发布出去。点击Cocos Creator编辑器顶部菜单的“项目 -> 构建发布”。

1. 发布平台：选择“Web Mobile”可以生成H5版本，在手机浏览器上运行。选择“微信小游戏”则需要先安装微信开发者工具，并配置好AppID。
2. 构建参数：
   • 主包压缩类型：建议选择Brotli或gzip，以减少加载体积。
   • 内联所有SpriteFrame：如果图片资源不多，可以勾选，将图片数据内联到脚本中，减少网络请求。
   • MD5 Cache：勾选后会给生成的文件名添加哈希值，有利于浏览器缓存更新。
   • 调试模式：发布时取消勾选，以减小包体并提升运行速度。
3. 点击“构建”。构建完成后，点击“发布路径”后面的文件夹图标，即可找到生成的游戏文件。对于Web版本，打开index.html即可在本地浏览器中运行。

5.3 常见问题与排查技巧实录

在实际操作中，你几乎一定会遇到下面这些问题：

问题1：小球运动卡顿或不流畅。

• 排查：首先在预览时打开浏览器的开发者工具，查看Console是否有报错（如Cannot read property 'xxx' of null）。然后查看Performance面板，看是否有长时间运行的脚本或频繁的垃圾回收。
• 解决：
  • 确保物理引擎的更新步长是合理的。在“项目设置 -> 物理”中，可以调整fixedTimeStep（固定时间步长），默认0.016667（即60FPS）通常没问题。
  • 检查BallController的update函数中是否有耗时操作。如果实现了速度归一化逻辑，确保计算不要太频繁。
  • 如果砖块数量非常多（比如上百个），每个砖块都有一个碰撞体和脚本，可能会造成性能压力。可以考虑使用对象池（Object Pool）来复用砖块节点，或者对远离屏幕的砖块进行休眠。

问题2：碰撞检测不准确，小球有时会穿过物体。

• 排查：这通常是由于物体速度过快，在一帧内穿越了另一个碰撞体，导致引擎没有检测到碰撞（称为“隧道效应”）。
• 解决：
  • 在RigidBody2D组件上，启用Bullet（子弹）模式。这个模式会对高速运动的物体进行连续碰撞检测（CCD），但会消耗更多性能。
  • 适当降低小球的速度（initialSpeed）。
  • 增加碰撞体的Size（尺寸）或物体的Scale（缩放），使它们的“感应范围”更大一些。

问题3：构建后，游戏在手机上运行白屏或报错。

• 排查：最常见的原因是资源加载路径错误或脚本引用丢失。
• 解决：
  • 检查构建日志（构建输出窗口），看是否有资源编译错误。
  • 确保所有脚本和资源都放在了assets目录下，并且引用路径正确。绝对不要使用编辑器内的绝对路径。
  • 如果是微信小游戏平台，需要检查小游戏的基础库版本是否支持Cocos Creator的引擎版本。
  • 在真机调试时，使用微信开发者工具或浏览器的远程调试功能，查看手机端的Console错误信息。

问题4：触摸控制不跟手，有延迟。

• 排查：可能是输入处理逻辑放在了update中，而update的调用频率受帧率影响。
• 解决：对于需要实时响应的输入（如拖拽），使用Cocos Creator输入系统的事件回调（如MOUSE_MOVE,TOUCH_MOVE），它们触发的时机更精确。就像我们在PaddleController中使用的那样。

问题5：游戏在不同分辨率屏幕下UI错位或显示不全。

• 排查：Canvas的适配模式设置不当。
• 解决：选中“Canvas”节点，在“属性检查器”中找到UITransform组件（或Canvas组件）。调整Design Resolution（设计分辨率）为你开发时使用的分辨率（如960x640）。然后设置Fit Height和Fit Width等适配策略。通常选择SHOW_ALL（保持宽高比缩放，可能留黑边）或FIXED_WIDTH（固定宽度，高度自适应）是比较安全的选择。需要对UI元素使用锚点（Anchor）和边距（Margin）来进行布局，而不是绝对坐标。

完成以上所有步骤，你的“打砖块”游戏就已经从一个空项目，成长为一个具备完整核心玩法、状态管理、基础反馈和可发布形态的作品了。这个过程几乎涵盖了2D游戏开发的所有基础环节。你可以在此基础上继续扩展，比如添加关卡系统、道具系统、更丰富的视觉效果和音效，甚至尝试发布到微信小游戏或其它平台。最重要的是，通过这个项目，你建立起了使用Cocos Creator进行游戏开发的完整认知和实践经验，这才是通往更复杂游戏开发的坚实第一步。