Cocos Creator 3.x 入门实战：从零构建点击得分游戏

1. 项目概述：为什么选择 Cocos-Game-Framework？

如果你正在寻找一个免费、开源且功能强大的游戏开发框架，特别是对2D和轻量级3D游戏感兴趣，那么 Cocos-Game-Framework（通常指 Cocos Creator 及其引擎家族）绝对是一个绕不开的名字。我接触 Cocos 系列引擎超过八年，从早期的 Cocos2d-x C++ 版本到如今以 TypeScript/JavaScript 为核心的 Cocos Creator，亲眼见证了它从一个纯粹的 2D 渲染引擎，成长为一个覆盖游戏开发全流程的完整解决方案。今天这篇教程，就是基于我最近一次从零开始、亲测可用的完整项目实践，带你快速上手这个框架，避开我当年踩过的那些坑。

简单来说，Cocos-Game-Framework 是一个集成了图形渲染引擎、场景编辑器、脚本系统、资源管理器和跨平台发布工具的游戏开发套件。它的核心优势在于“一体化工作流”——你可以在一个可视化的编辑器里拖拽组件、编辑场景，同时编写逻辑代码，最后直接打包发布到 Web、iOS、Android、Windows 乃至各类小游戏平台。对于独立开发者、小型团队或想快速验证玩法的策划来说，这种低门槛和高效率是极具吸引力的。本教程将聚焦于最核心的 Cocos Creator 3.x 版本，手把手带你完成第一个可交互游戏 demo 的创建、编码与发布。

2. 环境准备与项目创建

2.1 软件安装与版本选择

首先，你需要去 Cocos 官网下载 Cocos Dashboard，这是管理不同版本 Creator 和项目的启动器。我强烈建议新手直接安装Cocos Creator 3.8 LTS（长期支持版）。LTS 版本意味着更少的未知 Bug 和更稳定的 API，对于学习和中小型项目开发来说是最稳妥的选择。安装过程很简单，一路下一步即可，但请注意安装路径不要包含中文或特殊字符，这是很多开发工具的通用禁忌。

安装完成后启动 Cocos Dashboard，你会看到“项目”和“编辑器”两个主要标签。在“编辑器”标签里，确保你已经安装了 3.8 LTS 版本。然后切换到“项目”标签，点击“新建”按钮。

注意：网络上有些教程可能还在用 Cocos Creator 2.x 的界面，与 3.x 差异较大。请务必确认你使用的是 3.x 版本，本教程所有内容均基于此。

2.2 新建第一个项目：模板解析

点击新建后，你会看到多个项目模板。对于纯粹的新手，我建议选择“Empty 3D”模板。虽然名字叫 3D，但它同样完美支持 2D 游戏开发，并且这个模板最干净，没有预设的任何复杂系统，方便我们从最基础的概念学起。

在项目设置中，你需要填写“项目名称”和“项目路径”。名称用英文，例如“MyFirstCocosGame”。下方的“项目类型”保持默认的“游戏”。“初始场景类型”选择“3D”，即使你做2D游戏也选这个，因为 Cocos Creator 3.x 是 3D 优先的架构，2D 是其一个子集。点击“创建并打开”，等待编辑器初始化你的第一个项目。

编辑器打开后，界面可能略显复杂，别慌。我们主要关注以下几个面板：

• 场景编辑器 (Scene)：中央区域，可视化搭建游戏场景的地方。
• 层级管理器 (Hierarchy)：左上角，以树状结构展示场景中的所有节点。
• 资源管理器 (Assets)：左下角，管理项目中的所有资源（图片、脚本、音效等）。
• 属性检查器 (Inspector)：右侧，显示当前选中节点或资源的详细属性，可以在这里调整参数、添加组件。
• 控制台 (Console)：下方，查看日志、警告和错误信息，调试必备。

3. 核心概念与工作流解析

3.1 理解“节点-组件”架构

Cocos Creator 的核心设计模式是“实体-组件” (Entity-Component)，在这里具体表现为“节点 (Node) + 组件 (Component)”。

• 节点 (Node)：可以理解为游戏世界中的一个空容器或一个坐标点。它本身没有形状和功能，但具有位置 (Position)、旋转 (Rotation)、缩放 (Scale) 等变换属性。节点可以形成父子层级关系，子节点会继承父节点的变换。
• 组件 (Component)：是赋予节点具体功能和特性的模块。比如：
  • Sprite组件让节点能显示一张图片（2D精灵）。
  • Label组件让节点能显示文字。
  • RigidBody组件让节点具备物理特性（如重力、碰撞）。
  • Camera组件让节点成为一个观察场景的摄像机。

你可以像搭积木一样，给一个节点添加多个组件，从而组合出复杂的行为。例如，一个“玩家”节点，可以添加Sprite（显示外观）、RigidBody（物理碰撞）、以及一个自定义的PlayerController脚本组件（控制逻辑）。

3.2 资源管理与导入

所有游戏素材（如图片、声音、字体、3D模型）都需要先导入到项目中。操作非常简单：直接从你的电脑文件夹里，把素材文件（如 .png, .jpg, .mp3）拖拽到资源管理器 (Assets)面板的某个文件夹下即可。编辑器会自动导入并生成对应的元数据文件 (.meta)。

实操心得：建议在 Assets 下建立清晰的文件夹结构，例如textures/,sounds/,scripts/,prefabs/。良好的资源管理习惯在项目变大后会让你受益匪浅，能极大避免资源引用丢失的问题。

导入的图片资源，在属性检查器中可以设置其“纹理类型”。如果是2D精灵图，就设为“sprite-frame”；如果是UI贴图，可以设为“texture”。这些设置会影响资源在组件下拉框中的可用性。

4. 实战：创建一个简单的点击得分游戏

接下来，我们通过一个经典示例——“点击屏幕上的物体得分”——来串联起核心操作。这个游戏将包含：一个可点击的物体、一个显示分数的UI、以及简单的交互逻辑。

4.1 搭建场景与UI

1. 创建可点击物体：

   • 在层级管理器中，选中默认的“Canvas”节点（这是UI的根节点，我们先借用它）。
   • 右键点击“Canvas” -> “创建” -> “创建渲染节点” -> “Sprite（2D）”。这会在Canvas下创建一个带有Sprite组件的2D节点。
   • 重命名这个节点为“Target”。
   • 在资源管理器中，将你的目标图片（比如一个圆形图标）拖到属性检查器中Sprite组件下的“Sprite Frame”属性框里。这时，场景中就会出现你的图片。
   • 调整“Target”节点的Position和Scale，把它放在屏幕中央合适的大小。

2. 创建分数显示UI：

   • 右键点击“Canvas” -> “创建” -> “创建UI节点” -> “Label”。重命名为“ScoreLabel”。
   • 在属性检查器中，找到Label组件，在“String”属性里输入“Score: 0”。你可以调整“Font Size”（字号）、“Color”（颜色）等属性，并拖动节点到屏幕左上角。

4.2 编写游戏逻辑脚本

现在我们来让游戏“活”起来。

1. 创建脚本：

   • 在资源管理器中，右键点击assets目录 -> “创建” -> “TypeScript”。命名为“GameManager”。
   • 双击这个脚本文件，它会用你系统默认的代码编辑器（如VSCode）打开。

2. 编写核心逻辑：将GameManager.ts的内容替换为以下代码。我会逐段解释：

   // GameManager.ts import { _decorator, Component, Node, Label, Sprite, input, Input, EventTouch } from 'cc'; // 从‘cc’模块导入所需的类。_decorator用于装饰器，Component是脚本基类，其他是功能类。 const { ccclass, property } = _decorator; // 解构出装饰器 @ccclass('GameManager') // 装饰器：将这个类声明为CC类，并注册为‘GameManager’ export class GameManager extends Component { // 继承自Component，使其可以挂载到节点上 @property(Label) // 装饰器：声明一个属性，并在编辑器面板中显示为Label组件类型的下拉框 scoreLabel: Label | null = null; // 用于显示分数的Label组件引用 @property(Sprite) // 装饰器：声明一个属性，类型为Sprite组件 targetSprite: Sprite | null = null; // 可点击的目标Sprite组件引用 private score: number = 0; // 内部私有变量，记录当前分数 // 生命周期函数：当脚本加载时执行 onLoad() { // 初始化分数显示 this.updateScoreLabel(); // 注册触摸开始事件监听 input.on(Input.EventType.TOUCH_START, this.onTouchStart, this); } // 生命周期函数：当组件或节点被销毁时执行 onDestroy() { // 务必在销毁时移除事件监听，防止内存泄漏 input.off(Input.EventType.TOUCH_START, this.onTouchStart, this); } // 触摸开始事件的回调函数 private onTouchStart(event: EventTouch) { // 如果没有设置目标Sprite，直接返回 if (!this.targetSprite || !this.targetSprite.node) { return; } // 获取触摸点在UI坐标系下的位置 const touchPos = event.getUILocation(); // 获取目标节点在世界坐标系下的矩形区域（AABB） const targetWorldRect = this.targetSprite.node.getComponent(Sprite)?.getWorldBounds(); if (targetWorldRect) { // 判断触摸点是否在目标矩形区域内 if (targetWorldRect.contains(touchPos)) { this.onTargetClicked(); } } } // 当目标被点击时调用的函数 private onTargetClicked() { this.score += 1; // 分数加1 this.updateScoreLabel(); // 更新UI显示 console.log(`Target clicked! Current score: ${this.score}`); // 在控制台输出日志 // 这里可以添加被点击后的反馈效果，比如缩放动画、音效等 // 例如：this.targetSprite.node.scale = 1.2; 然后通过缓动动画恢复 } // 更新分数显示文本 private updateScoreLabel() { if (this.scoreLabel) { this.scoreLabel.string = `Score: ${this.score}`; } } }

   代码解析：

   • @property装饰器是连接编辑器与代码的桥梁。它允许你在编辑器里直观地拖拽节点来赋值，而不是在代码里写死查找路径，这大大提升了开发效率和可维护性。
   • onLoad是初始化代码的好地方，比start更早执行。我们在这里初始化UI并注册全局触摸事件。
   • 事件监听 (input.on) 和移除 (input.off) 必须成对出现，这是防止内存泄漏的黄金法则。
   • 碰撞检测这里用了简单的矩形区域 (getWorldBounds) 判断，对于简单的2D点击游戏足够高效。更复杂的物理碰撞需要使用物理引擎组件。

3. 将脚本挂载到场景并关联节点：

   • 回到 Cocos Creator 编辑器。
   • 在层级管理器中，选中“Canvas”节点（或者你可以右键创建一个空的“GameManager”节点来挂载）。
   • 在属性检查器下方，点击“添加组件” -> “用户脚本组件” -> “GameManager”。这样脚本就挂载上去了。
   • 挂载后，你会看到脚本组件中出现了两个属性：“Score Label”和“Target Sprite”。
   • 从层级管理器中，分别将“ScoreLabel”节点拖到“Score Label”属性框，将“Target”节点拖到“Target Sprite”属性框。这一步就是完成@property声明的引用赋值。

4.3 运行与测试

点击编辑器顶部正中的三角形“播放”按钮。编辑器会启动一个游戏预览窗口。现在，尝试用鼠标点击场景中的“Target”图片，你会发现左上角的分数在不断增加，同时控制台也有日志输出。恭喜你，你的第一个可交互 Cocos 游戏已经跑通了！

5. 核心功能模块深度解析

5.1 动画系统：让游戏动起来

静态的游戏缺乏生气。Cocos Creator 提供了强大的动画编辑器，可以制作序列帧动画、属性渐变动画等。

1. 创建动画剪辑：

   • 在资源管理器中右键 -> “创建” -> “动画剪辑”，命名为“TargetClick.anim”。
   • 选中“Target”节点，在属性检查器最下方点击“添加组件” -> “动画” -> “Animation”。
   • 将刚刚创建的“TargetClick.anim”拖到Animation组件的“Clips”数组的0号位置。
   • 点击“TargetClick.anim”进入动画编辑模式。

2. 编辑缩放动画：

   • 在动画时间轴上，确保选中了“Target”节点。
   • 将红色时间线拖到第0帧，在属性检查器中修改Scale为 (1, 1, 1)，然后点击Scale属性旁边的钻石图标（添加关键帧）。
   • 将时间线拖到第10帧（约0.3秒），修改Scale为 (1.2, 1.2, 1)，再次添加关键帧。
   • 将时间线拖到第20帧，修改Scale回 (1, 1, 1)，添加关键帧。
   • 退出动画模式。现在你有了一个点击后放大缩回的动画剪辑。

3. 在代码中触发动画：修改GameManager.ts中的onTargetClicked方法：

   import { Animation } from 'cc'; // 新增导入 private onTargetClicked() { this.score += 1; this.updateScoreLabel(); console.log(`Target clicked! Current score: ${this.score}`); // 播放动画 const anim = this.targetSprite?.node.getComponent(Animation); if (anim) { anim.stop(); // 先停止当前可能正在播放的动画 anim.play('TargetClick'); // 播放名为‘TargetClick’的剪辑 } }

   再次运行游戏，点击目标时就会有生动的缩放反馈了。

5.2 物理与碰撞检测

对于更复杂的交互（如物体下落、碰撞弹开），需要用到物理引擎。Cocos Creator 内置了基于 Bullet 的物理系统。

1. 为物体添加物理属性：

   • 选中“Target”节点，添加组件：“物理” -> “2D” -> “RigidBody2D”。在属性中，可以设置“Body Type”为“Dynamic”（动态，受重力影响）或“Static”（静态）。
   • 为了让物理引擎知道物体的形状，还需要添加一个碰撞体。添加组件：“物理” -> “2D” -> “BoxCollider2D”（假设你的目标是方形）。调整“Size”属性匹配你的图片大小。

2. 开启物理调试：

   • 在层级管理器中选中“Canvas”，在属性检查器中找到“PhysicsSystem2D”组件（如果没有就添加一个）。
   • 勾选“Debug Draw”下的“Enabled”。运行游戏，你会看到物体被一个绿色的线框包围，这代表了碰撞体的形状，方便调试。

3. 编写碰撞响应脚本：

   • 创建一个新脚本“TargetCollider.ts”。

   import { _decorator, Component, Collider2D, ITriggerEvent } from 'cc'; const { ccclass } = _decorator; @ccclass('TargetCollider') export class TargetCollider extends Component { onLoad() { // 获取碰撞体组件 const collider = this.getComponent(Collider2D); if (collider) { // 监听触发事件（穿透）或接触事件（有物理反馈） collider.on('onTriggerEnter', this.onTrigger, this); // collider.on('onCollisionEnter', this.onCollision, this); } } private onTrigger(event: ITriggerEvent) { console.log('Something entered the trigger!', event.otherCollider.node.name); // 可以在这里处理得分、销毁自身等逻辑 // 例如：event.otherCollider.node.destroy(); // 销毁进入的物体 } }

   • 将此脚本挂载到“Target”节点上。当其他带有碰撞体的物体进入它的区域时，就会触发onTrigger函数。

5.3 UI 系统与事件交互

Cocos Creator 的 UI 系统基于节点和组件，与游戏对象无缝集成。我们之前已经用到了Label。

1. 按钮交互：

   • 创建一个按钮：右键“Canvas” -> “创建UI节点” -> “Button”。重命名为“RestartButton”。
   • 你可以看到按钮节点下自动生成了“Background”（背景）、“Label”（文字）子节点。选中“Label”节点，修改其Label组件中的“String”为“重新开始”。
   • 选中“RestartButton”节点，在属性检查器的Button组件底部，找到“Click Events”数组。点击“+”号添加一个事件。
   • 将“Target”节点（或挂载了GameManager的节点）拖到“Target”属性框。
   • 在“Component”下拉框中选择“GameManager”。
   • 在“Handler”下拉框中选择“onTargetClicked”（或者你自定义的另一个重置分数的方法）。这样，点击UI按钮就能直接调用脚本中的函数，无需手动写事件监听代码，非常便捷。

2. Widget 组件与多分辨率适配：

   • 选中“ScoreLabel”节点，添加组件：“UI” -> “Widget”（对齐挂件）。
   • 勾选“Top”和“Left”，并设置“Top”和“Left”的值为20。这会将标签的顶部和左侧边缘，始终锚定在父节点（Canvas）的顶部和左侧边缘20像素的位置。无论屏幕分辨率如何变化，它都会保持在左上角。

6. 项目构建与跨平台发布

游戏开发完成后，最终要打包成可发布的版本。

1. 构建配置：

   • 点击编辑器顶部菜单的“项目” -> “构建”。
   • 在构建面板中，选择目标平台，例如“Web Mobile”（H5手机端）或“Android”。
   • 关键设置：
     • 主包压缩类型：建议选择“合并所有JSON”。对于小游戏，可以选择“小游戏分包”。
     • MD5 Cache：勾选。这会给生成的文件名加上哈希值，有利于浏览器缓存更新。
     • 调试模式：开发阶段可以勾选，发布时取消。
     • 源码压缩：发布时勾选，可以减小包体。

2. 构建与运行：

   • 点击“构建”按钮。构建完成后，点击“运行”会在默认浏览器中打开游戏。
   • 构建生成的文件位于项目目录下的build文件夹中。对于 Web 平台，直接将build/web-mobile目录下的文件部署到你的服务器即可。

3. 发布到微信小游戏：

   • 构建面板选择“微信小游戏”平台。
   • 你需要填写“开放平台 AppID”（需要去微信公众平台注册小游戏账号获取）。
   • 构建完成后，使用微信开发者工具打开build/wechatgame目录，即可进行真机预览和上传。

7. 常见问题与排查技巧实录

在实际开发中，你一定会遇到各种问题。这里记录了几个最常见的问题和我的解决思路。

避坑技巧：善用控制台和调试器。Cocos Creator 的浏览器预览与 Chrome DevTools 无缝连接。你可以按 F12 打开开发者工具，在“Sources”面板找到你的 TypeScript 源码并设置断点，这是定位逻辑 Bug 最强大的手段。

8. 性能优化与项目结构建议

当项目内容增多时，性能和维护性就变得至关重要。

1. 资源优化：

   • 图集 (Auto Atlas)：将大量小图打包成一张大图，能显著减少 Draw Call（绘制调用）。在资源管理器中右键 -> “创建” -> “自动图集配置”，然后将小图所在的文件夹拖入配置中，构建后即可生成图集。
   • 音频压缩：使用 .mp3 或 .ogg 格式，并调整合适的比特率。避免使用未经压缩的 .wav 文件作为背景音乐。
   • 纹理压缩：针对不同平台（如 Android 的 ETC, iOS 的 PVRTC）在构建时启用纹理压缩，可以大幅减小包体。

2. 代码结构优化：

   • 使用预制体 (Prefab)：对于会重复使用的对象（如敌人、子弹、道具），不要直接复制场景节点。应该先将其做成预制体（将节点从层级管理器拖到资源管理器）。在代码中通过instantiate动态创建。这有利于管理和性能。
   • 模块化管理：不要把所有逻辑都写在GameManager里。按功能拆分脚本，如PlayerCtrl,EnemySpawner,UIManager,AudioManager等。
   • 对象池：对于频繁创建和销毁的对象（如子弹、特效），务必实现对象池。Cocos Creator 提供了NodePool类，可以极大减少内存分配和垃圾回收带来的卡顿。

3. 内存与泄漏防范：

   • 事件监听：反复强调，on和off必须配对。在节点的onDestroy生命周期中清理所有自定义事件和计时器 (this.unscheduleAllCallbacks())。
   • 资源释放：动态加载的资源 (resources.load)，在使用完毕后，如果确定不再需要，记得调用resources.release释放。否则，即使节点销毁了，纹理等资源仍驻留在内存中。

从点击一个简单的 Sprite 开始，到实现动画、物理、UI交互，再到最终打包发布，Cocos Creator 提供了一条相对平滑的学习曲线。它的优势在于将引擎、编辑器、工作流深度整合，让开发者能更专注于游戏玩法本身。我个人的体会是，初期按照官方文档和示例熟悉基本操作后，最重要的就是动手实践，从一个微小的想法开始，逐步添加功能，在遇到问题时去查阅文档、搜索社区（Cocos 官方论坛和社区非常活跃）。过程中积累的每一个“坑”和解决方案，都会让你对这个框架的理解更深一层。最后，别忘了享受创造游戏的乐趣，这才是驱动你持续学习的根本动力。