全栈攻城狮

Appearance

Cocos Creator 入门 ​

概述 ​

Cocos Creator 是触控科技旗下 Cocos 品牌推出的游戏开发引擎，也是目前国内使用最广泛的游戏开发工具之一。它以组件化开发为核心，支持 2D/3D 混合渲染，提供可视化编辑器与代码开发相结合的工作流，能够一键发布到 Web、微信小游戏、iOS、Android、Desktop 等多个平台。

Cocos Creator 的前身是 Cocos2d-x，一个基于 C++ 的 2D 游戏引擎。Cocos Creator 在继承其 2D 渲染优势的基础上，引入了 3D 渲染能力和现代化的编辑器工作流，成为移动游戏开发的首选引擎之一。

编辑器基础 ​

Cocos Creator 的编辑器界面由几个核心面板组成，理解这些面板是使用引擎的第一步。

场景编辑器 ​

场景编辑器（Scene Editor）是游戏世界的可视化编辑窗口。在这里，开发者可以直接拖拽、旋转、缩放游戏对象，实时查看场景布局。场景编辑器支持 2D 和 3D 两种视图模式：

  • 2D 模式：适用于 UI 界面、2D 游戏场景，编辑器以正交投影显示
  • 3D 模式：适用于 3D 游戏场景，支持透视投影，可以用鼠标中键旋转视角

在场景编辑器中，可以使用 Gizmo（操控器）工具对节点进行精确变换。编辑器提供了四种 Gizmo 模式：平移（W）、旋转（E）、缩放（R）和矩形变换（T），快捷键与 Unity 等主流引擎保持一致。

层级管理器 ​

层级管理器（Hierarchy Manager）以树状结构显示当前场景中所有节点的组织关系。节点之间的父子关系直接影响变换属性的继承——子节点会继承父节点的位置、旋转和缩放。

合理的层级结构是游戏开发的重要基础。例如，一个"角色"节点下包含"身体"、"武器"、"特效"等子节点，移动父节点时所有子节点跟随移动。层级管理器还支持节点的显示/隐藏、锁定、搜索等功能。

资源管理器 ​

资源管理器（Assets Panel）管理项目中所有资源文件，包括：

  • 脚本：TypeScript/JavaScript 编写的组件脚本
  • 预制体（Prefab）：可复用的游戏对象模板
  • 材质：控制渲染外观的材质资源
  • 纹理：图片、精灵图等
  • 模型：FBX、GLTF 等 3D 模型文件
  • 音频：音效和背景音乐
  • 场景：独立的场景文件

资源管理器支持资源的拖拽引用、批量导入、文件夹组织和搜索过滤。资源的导入会自动触发引擎的预处理流程，例如纹理的压缩格式转换、模型的网格优化等。

组件化开发模式 ​

Cocos Creator 采用 Entity-Component 架构，这是现代游戏引擎的主流设计模式。

Component 脚本 ​

游戏中的每个功能模块都被封装为组件（Component），挂载到节点（Node）上。开发者通过编写 TypeScript 脚本创建自定义组件：

typescript
import { _decorator, Component, Node } from 'cc'
const { ccclass, property } = _decorator

@ccclass('PlayerController')
export class PlayerController extends Component {
  @property({ type: Number })
  private speed: number = 200

  @property({ type: Node })
  private bulletPrefab: Node = null

  start() {
    // 初始化逻辑
    console.log('Player spawned!')
  }

  update(deltaTime: number) {
    // 每帧更新逻辑
    this.handleMovement(deltaTime)
  }

  private handleMovement(deltaTime: number) {
    // 处理玩家移动
  }
}

组件生命周期方法包括：

  • onLoad：组件初始化时调用，此时所有组件已加载完成
  • start：第一次激活时调用，用于初始化逻辑
  • update(deltaTime)：每帧调用，参数为帧间隔时间
  • lateUpdate(deltaTime)：在所有 update 之后调用
  • onEnable/onDisable：组件启用/禁用时调用
  • onDestroy：组件销毁时调用

属性面板 ​

属性面板（Inspector）显示选中节点的所有组件及其可编辑属性。通过 @property 装饰器声明属性后，属性会自动出现在面板中，支持类型包括数字、字符串、布尔值、Vec3、Color、Node 引用等。

属性面板的可视化编辑能力大大降低了游戏参数调整的门槛。设计人员无需接触代码即可调整角色速度、弹幕数量、颜色渐变等参数，实现了开发与设计的职责分离。

节点与组件的关系 ​

一个节点可以挂载多个组件，共同决定节点的行为：

Player (Node)
├── Transform (固有组件) — 位置、旋转、缩放
├── Sprite (渲染组件) — 显示精灵图
├── BoxCollider (碰撞组件) — 碰撞检测
├── RigidBody (物理组件) — 物理模拟
└── PlayerController (自定义脚本) — 玩家控制逻辑

这种架构的优势在于高内聚、低耦合。每个组件只负责单一功能，通过组合实现复杂行为，方便复用和测试。

2D/3D 混合渲染 ​

Cocos Creator 的一大特色是支持 2D 和 3D 内容的混合渲染，这在移动游戏开发中非常实用。

渲染管线 ​

Cocos Creator 使用基于 Forward+ 的渲染管线，支持：

  • 2D 渲染：Sprite、Label、Mask、Graphics 等 2D 组件使用正交投影渲染
  • 3D 渲染：MeshRenderer、SkinnedMeshRenderer 等 3D 组件使用透视投影渲染
  • 混合排序：通过设置节点的 Layer 和 Priority 控制 2D/3D 内容的渲染顺序

2D 系统 ​

Cocos Creator 的 2D 渲染能力继承了 Cocos2d-x 的成熟方案：

  • Sprite：支持单图、九宫格、精灵表等多种渲染模式
  • Label：支持系统字体、位图字体、BMFont
  • Mask：矩形、圆形、图片遮罩
  • Graphics：矢量图形绘制 API
  • UI 系统：Widget、Layout、ScrollView、Button 等完整的 UI 组件库

3D 系统 ​

Cocos Creator 的 3D 能力在 3.x 版本中得到大幅增强：

  • 模型渲染：支持 FBX/GLTF 模型导入和 Skinned Mesh 动画
  • 光照系统：环境光、方向光、点光源、聚光灯
  • 阴影：支持 PCF 软阴影
  • 后处理：辉光、泛光、景深等后期特效
  • 粒子系统：支持 GPU 粒子，可模拟火焰、烟雾、魔法效果

混合使用场景 ​

实际游戏中常常需要 2D/3D 混合。例如，一个 3D 角色在 2D 背景上的横版过关游戏，或者 3D 场景中的 2D UI 界面。Cocos Creator 通过渲染层的排序机制和相机分层来解决这些问题：

// 设置 2D UI 相机始终渲染在最上层
const uiCamera = this.getComponent(Camera)
uiCamera.clearFlags = CameraClearFlags.DEPTH_ONLY
uiCamera.depth = 10

多端发布流程 ​

Cocos Creator 最强大的特性之一是其跨平台发布能力。

Web 平台发布 ​

Web 发布是最直接的发布方式，生成标准的 HTML5 页面：

  1. 选择「项目」→「构建发布」
  2. 发布平台选择「Web 桌面端」或「Web 移动端」
  3. 配置构建参数（包名、模板、CDN 路径等）
  4. 点击构建，生成 dist 目录
  5. 将构建产物部署到 Web 服务器

微信小游戏发布 ​

微信小游戏是目前国内最火的游戏分发渠道之一，Cocos Creator 提供了深度集成：

  1. 发布平台选择「微信小游戏」
  2. 配置 appid、构建参数
  3. 构建后自动生成微信小游戏项目目录
  4. 使用微信开发者工具打开生成的项目进行调试和上传

引擎会自动处理微信小游戏环境的差异，包括：

  • 禁用 eval 和 new Function（微信小游戏不支持）
  • 使用微信的音频/文件系统 API
  • 分包加载优化首包体积
  • 自动适配屏幕旋转和分辨率

Native 平台发布 ​

对于 iOS 和 Android 平台，Cocos Creator 使用 JSB（JavaScript Binding）技术将脚本引擎和原生平台桥接：

  1. 发布平台选择「Android」或「iOS」
  2. 配置应用签名、版本号、权限等
  3. 构建生成原生工程（Android Studio / Xcode 项目）
  4. 在原生 IDE 中完成最终编译和签名

Native 发布的性能是最优的，因为脚本引擎与原生代码直接交互，没有 WebView 的开销。引擎还支持通过 SDKBox 等工具集成广告、支付、统计等第三方 SDK。

构建优化策略 ​

多端发布时需要注意平台差异和优化策略：

平台包体积限制性能瓶颈优化重点
Web无严格限制网络加载资源压缩、CDN 分发
微信小游戏主包 4MB首屏加载分包加载、预加载
iOS无严格限制GPU 性能纹理压缩、Draw Call 优化
Android无严格限制碎片化适配多分辨率适配、兼容性测试

纹理压缩是跨平台优化的重要环节。Cocos Creator 支持自动为不同平台选择最优纹理格式：iOS 使用 PVRTC 或 ASTC，Android 使用 ETC2 或 ASTC，Web 使用 WebP 或 PNG。

实战案例：消灭星星风格游戏 ​

以下 Demo 实现了一个类似"消灭星星"的消除游戏，展示了 Cocos Creator 所代表的组件化开发和游戏逻辑的核心概念：

  • 8x8 彩色方块网格：使用网格布局和颜色数组表示游戏棋盘
  • Flood Fill 算法：点击方块时，通过四方向搜索找到所有相邻同色方块
  • 重力下落：消除后上方方块下落填补空缺，并生成新方块
  • 计分系统：消除方块数量越多，单次得分越高
  • 游戏结束判定：当棋盘上不存在两个以上相邻同色方块时游戏结束

Demo 使用纯 Canvas/JS 实现，模拟了 Cocos Creator 中的核心游戏逻辑模式：

总结 ​

Cocos Creator 是一款功能全面的游戏开发引擎，其核心优势包括：

  1. 组件化开发模式：Entity-Component 架构使代码高度可复用、易维护
  2. 2D/3D 混合渲染：一套引擎同时支持 2D 和 3D 游戏开发
  3. 可视化编辑器：场景编辑器、层级管理器、属性面板提供了高效的设计工作流
  4. 跨平台发布：一次开发，多端运行，覆盖 Web、小游戏、移动端和桌面端
  5. 完善的生态：活跃的社区、丰富的插件市场、详尽的中文文档

无论是独立开发者还是团队协作，Cocos Creator 都能提供高效的开发体验。对于想要进入游戏开发领域的 Web 开发者来说，Cocos Creator 的学习曲线相对平缓，TypeScript 语言和组件化架构与前端开发经验高度契合。