Cocos Creator 游戏开发：可视化编辑与脚本

FreeGuideOnline 最新 2026-06-17

Cocos Creator 游戏开发：可视化编辑与脚本

什么是 Cocos Creator

Cocos Creator 是一个轻量、高效、免费开源的跨平台游戏开发引擎。它基于 Cocos2d-x，但提供了完整的可视化编辑器和组件化开发工作流，支持 JavaScript 和 TypeScript 脚本编写。无论是 2D 还是轻量级 3D 游戏，你都可以通过 Cocos Creator 快速构建并发布到 Web、iOS、Android、各类小游戏平台以及桌面端。

本教程将带你从零开始，掌握 Cocos Creator 最核心的两个能力：可视化场景编辑与脚本逻辑编写。你将学会用拖拽和属性配置搭建游戏世界，再用代码赋予它灵魂。

安装与创建项目

下载和安装

前往 Cocos Creator 官网下载对应操作系统的 Dashboard（控制台）。安装完成后，打开 Dashboard，你可以在其中管理引擎版本、创建项目和导入范例。

建议初学者选择最新的 Cocos Creator 3.x 长期支持版本，以获得更完善的编辑器和 API 支持。

创建第一个项目

在 Dashboard 中点击新建项目。
选择模板为**空白(Empty)**项目，给项目命名，例如 MyFirstGame。
确认项目路径，点击创建并打开。稍等片刻，编辑器主界面就会打开。

编辑器界面一览

Cocos Creator 的界面围绕可视化编辑设计，主要由以下几个区域构成：

层级管理器（Hierarchy）：以树状结构展示当前场景中所有节点。这里是管理和组织游戏对象的入口。
场景编辑器（Scene）：中央的可视化画布，可以拖拽、旋转、缩放节点，所见即所得地布置游戏场景。
属性检查器（Properties）：显示选中节点的所有组件属性。你可以在这里添加新组件，并设置精灵图片、位置、颜色等参数。
资源管理器（Assets）：项目文件浏览器，所有图片、音频、预制体、脚本等资源都保存在 assets 目录下。
控制台（Console）：输出脚本的调试信息，是排查错误的好帮手。

理解节点与组件

Cocos Creator 的核心思想是节点 + 组件。每一个游戏对象都是一个节点（Node），节点本身只是一个空间容器，拥有位置、旋转、缩放等基本属性。要让它拥有具体行为或外观，就需要给它挂载各种组件（Component）。

例如：

添加 Sprite 组件 → 节点可以显示一张图片。
添加 RigidBody2D 和 Collider2D 组件 → 节点具备物理属性，能受重力影响并检测碰撞。
添加你自己编写的脚本组件 → 节点获得自定义的逻辑。

这种设计让你可以用组合的方式快速搭建复杂的游戏功能，而脚本只需要关注具体逻辑。

可视化编辑实战：搭建游戏场景

添加背景和玩家

在资源管理器中右键，选择新建 → 文件夹，命名为 textures，将你准备好的背景图和角色图片拖入该文件夹。
将背景图从资源管理器拖入层级管理器，会自动创建带 Sprite 组件的节点。在属性检查器中调整节点位置为 (0, 0, 0)，尺寸适配设计分辨率（如 960x640）。
同样方式拖入角色图片，命名为 Player。在场景编辑器中把角色放到屏幕底部中央位置。

预制体：可复用的游戏对象

游戏中会重复出现的对象（如金币、子弹、敌人）应该制作成预制体（Prefab）。预制体是一个模板，生成它的实例时会继承所有组件和属性。

在层级管理器中创建一个空白节点，命名为 Coin，添加 Sprite 组件并设置金币图片。
为它添加碰撞体：在属性检查器中点击添加组件 → 物理组件 → Collider2D → BoxCollider2D，勾选 Sensor（传感器），这样金币只检测碰撞而不产生物理反弹。
将 Coin 从层级管理器拖入资源管理器的 assets 下，它就变成蓝色的预制体资源。之后可以删除场景中的 Coin 节点，我们将在脚本中动态生成它。

脚本编写基础

在资源管理器中新建文件夹 scripts，右键选择新建 → TypeScript，命名为 PlayerController。双击脚本，会用 VS Code 打开。

任何脚本都继承自 Component，并拥有固定的生命周期方法：

import { _decorator, Component } from 'cc';
const { ccclass } = _decorator;

@ccclass('PlayerController')
export class PlayerController extends Component {
    onLoad() {
        // 组件首次激活时调用，适合做初始化
    }

    start() {
        // 组件第一次 update 之前调用，适合获取其他组件
    }

    update(deltaTime: number) {
        // 每帧调用，deltaTime 为距上一帧的时间间隔（秒）
    }
}

从可视化编辑到脚本引用

脚本经常需要获取同一个节点上的其他组件，或者访问场景中的其他节点。推荐使用属性声明配合编辑器拖拽赋值，避免写死路径。

示例：直接拖拽赋值

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

@ccclass('PlayerController')
export class PlayerController extends Component {
    @property(Node)   // 在编辑器中显示可拖拽的属性
    public bulletSpawn: Node = null!;
}

脚本保存后，回到编辑器，你会在 PlayerController 组件的属性面板中看到一个 bulletSpawn 输入框，从层级管理器拖入对应节点即可完成绑定。

响应玩家输入

要让玩家移动，可以在 update 中读取键盘或触摸输入。3.x 引擎使用 input 模块：

import { _decorator, Component, input, Input, KeyCode } from 'cc';
const { ccclass } = _decorator;

@ccclass('PlayerController')
export class PlayerController extends Component {
    public speed: number = 300;

    update(deltaTime: number) {
        let moveX = 0;
        if (input.isPressed(KeyCode.KEY_A) || input.isPressed(KeyCode.ARROW_LEFT)) {
            moveX = -1;
        } else if (input.isPressed(KeyCode.KEY_D) || input.isPressed(KeyCode.ARROW_RIGHT)) {
            moveX = 1;
        }
        // 移动节点
        this.node.setPosition(
            this.node.position.x + moveX * this.speed * deltaTime,
            this.node.position.y
        );
    }
}

将 PlayerController 脚本拖到 Player 节点上，运行游戏，按 A/D 或左右方向键，角色就能左右移动了。

脚本与可视化协作：生成下落道具

我们要让金币从屏幕上方随机位置下落，玩家控制角色接住金币。这正好结合预制体和动态生成。

道具生成器脚本

新建 CoinSpawner 脚本，内容如下：

import { _decorator, Component, Prefab, instantiate, Node, math } from 'cc';
const { ccclass, property } = _decorator;

@ccclass('CoinSpawner')
export class CoinSpawner extends Component {
    @property(Prefab)       // 在编辑器中拖入预制体
    public coinPrefab: Prefab = null!;

    @property
    public spawnInterval: number = 1.0;

    @property
    public spawnRangeX: number = 400;   // 水平生成范围

    private timer: number = 0;

    update(deltaTime: number) {
        this.timer += deltaTime;
        if (this.timer >= this.spawnInterval) {
            this.timer = 0;
            this.spawnCoin();
        }
    }

    spawnCoin() {
        if (!this.coinPrefab) return;
        const coin = instantiate(this.coinPrefab);   // 实例化预制体
        coin.parent = this.node;                    // 放入本节点（一般为场景根节点或专门容器）
        // 随机水平位置
        const randomX = math.randomRange(-this.spawnRangeX / 2, this.spawnRangeX / 2);
        coin.setPosition(randomX, 500);             // 从顶部生成
    }
}

编辑器配置

在场景中创建一个空节点，命名为 Spawner，挂载 CoinSpawner 脚本。
在属性检查器中，将之前做好的 Coin 预制体从资源管理器拖入 CoinPrefab 属性框。
为了让金币向下移动，给 Coin 预制体添加一个简单的移动脚本 CoinMove：

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

@ccclass('CoinMove')
export class CoinMove extends Component {
    @property
    public fallSpeed: number = 200;

    update(deltaTime: number) {
        this.node.setPosition(
            this.node.position.x,
            this.node.position.y - this.fallSpeed * deltaTime
        );
        // 超出屏幕底部则销毁
        if (this.node.position.y < -600) {
            this.node.destroy();
        }
    }
}

将 CoinMove 脚本挂载到 Coin 预制体上并保存。再次运行游戏，金币就会从屏幕上方随机落下。

碰撞检测与得分逻辑

Cocos Creator 的物理系统可以轻松检测碰撞。我们需要在 Player 节点上添加碰撞体，并让脚本响应碰撞事件。

配置玩家碰撞体

选中 Player 节点，添加组件 RigidBody2D，设置 Type 为 Kinematic（运动学刚体，不受重力影响，只用于触发事件）。
再添加 BoxCollider2D，调整边框大小匹配角色图形，勾选 Sensor（传感器）。

编写碰撞处理

在 PlayerController 脚本中增加碰撞回调：

import { _decorator, Component, Collider2D, Contact2DType, IPhysics2DContact } from 'cc';
// ...其他导入

@ccclass('PlayerController')
export class PlayerController extends Component {
    // ...已有代码

    onLoad() {
        // 获取碰撞器并注册回调
        const collider = this.getComponent(Collider2D);
        if (collider) {
            collider.on(Contact2DType.BEGIN_CONTACT, this.onBeginContact, this);
        }
    }

    onBeginContact(selfCollider: Collider2D, otherCollider: Collider2D, contact: IPhysics2DContact | null) {
        // 对方节点是金币时，加分并销毁金币
        if (otherCollider.node.name.includes('Coin')) {
            otherCollider.node.destroy();
            // 此处可更新分数UI，请读者自行扩展
            console.log('获取金币！');
        }
    }
}

确保项目设置中启用了物理引擎：在菜单栏 项目 → 项目设置 → 物理 中勾选 2D Physics 并配置重力（方向为 (0, 0) 即可，因为我们手动控制下落）。

现在运行游戏，控制角色移动接触下落的金币，控制台会打印“获取金币！”，且金币被删除。

完成游戏循环与简单 UI

一个完整的游戏需要计分显示和简单的胜负逻辑。这里提供一个思路，帮助你延伸学习：

在 Canvas 下创建 Label 节点显示分数。
在 PlayerController 中通过 @property(Label) 拖拽绑定该标签，碰撞时更新数字。
添加倒计时或生命值，使用组件和脚本协同管理。

这一过程完全遵循“可视化编辑绑定 → 脚本逻辑驱动”的模式。你拖拽、填写属性来形成静态结构，脚本只在必要时访问这些预先绑定好的引用，让代码与场景解耦。

发布游戏

当游戏在预览浏览器中运行满意后，即可发布。

菜单栏选择 项目 → 构建发布。
选择发布平台，如 Web Mobile、Web Desktop、微信小游戏等。
填写游戏名称，设置资源服务器地址（若需要远程加载资源），点击构建。
构建完成后，在 build 文件夹内即可找到发布文件。

对于 Web 版，直接开启一个本地 HTTP 服务器即可游玩；对于小游戏平台，可使用对应开发者工具上传。

总结与进阶路径

本教程通过一个简单的接金币游戏，串联了 Cocos Creator 的核心开发范式：用可视化编辑器搭建场景、配置组件、绑定引用；用 TypeScript 脚本实现逻辑、响应事件、控制节点。你学会了：

使用节点和组件构建游戏对象
制作与使用预制体实现动态生成
处理键盘输入和物理碰撞
通过属性装饰器实现编辑器与脚本的无缝连接

要进一步深入，可以阅读官方文档了解场景切换、动画编辑器、音频控制、网络通信以及 3D 基础。Cocos Creator 将代码与美术资源的分工变得清晰，是小团队和个人开发者的高效选择。现在就打开编辑器，开始创造属于你的游戏世界吧！