Day 01 · 别再用 Unity 了！Cocos Creator 3.8 才是国内独立开发者的首选

李国艺836
0 阅读4分钟

Day 01 · 别再用 Unity 了！Cocos Creator 3.8 才是国内独立开发者的首选

学习目标：完成 Cocos Creator 3.8 安装、了解编辑器全貌、创建并运行第一个项目

预计时间：2 小时

难度：⭐☆☆☆☆

为什么选 Cocos Creator？

在国内独立游戏开发市场，Cocos Creator 有着其他引擎无法比拟的优势：

对比项Cocos Creator 3.8UnityGodot
微信小游戏支持✅ 原生支持，官方维护⚠️ 第三方插件，兼容差❌ 不支持
授权费用免费超收入门槛收费免费
包体大小（H5）小（<5MB 可实现）大（>20MB）中
TypeScript 支持✅ 一等公民⚠️ C# 为主GDScript
中文文档✅ 官方完整中文文档⚠️ 部分⚠️ 部分
国内社区活跃活跃一般

结论：如果你的目标是做微信小游戏、H5 游戏或国内手游，Cocos Creator 是最短路径。

1. 安装 Cocos Dashboard

Cocos 的安装通过 Cocos Dashboard（版本管理器）进行，类似于 Unity Hub。

步骤

  1. 访问 Cocos 官网 下载 Cocos Dashboard
  2. 安装并登录（注册账号免费）
  3. 在 Dashboard 中点击 安装编辑器 → 选择 3.8.x（稳定版）
建议选择最新的 3.8.x LTS 版本，稳定性更好

在这里插入图片描述

系统要求

平台要求
macOS10.15+ (Intel/Apple Silicon 均支持)
WindowsWindows 10 64位以上
内存8GB+ 推荐
磁盘安装需要约 3GB

2. 创建第一个项目

Dashboard 安装完编辑器后，点击 新建项目：

  • 项目名称：my-first-game
  • 项目路径：选择你的工作目录
  • 模板：选择 Empty（空项目）
  • 引擎版本：3.8.x

在这里插入图片描述

点击 创建并打开，Cocos Creator 编辑器将自动启动。

3. 编辑器全貌解析

打开编辑器后，你会看到以下几个核心面板：

在这里插入图片描述 在这里插入图片描述

核心面板说明

┌─────────────────────────────────────────────────┐
│  菜单栏                                          │
├──────────┬──────────────────────┬───────────────┤
│          │                      │               │
│ 层级管理器 │      场景编辑器        │  检查器(Inspector)│
│(Hierarchy)│   (Scene Editor)     │               │
│          │                      │               │
├──────────┤                      ├───────────────┤
│          │                      │               │
│ 资源管理器 │                      │               │
│  (Assets)│                      │               │
│          │──────────────────────┤               │
│          │    控制台(Console)     │               │
└──────────┴──────────────────────┴───────────────┘
面板功能
层级管理器（Hierarchy）显示当前场景中所有节点的树状结构
场景编辑器（Scene Editor）可视化编辑场景，拖拽节点改变位置
检查器（Inspector）查看/编辑选中节点的属性和组件
资源管理器（Assets）管理项目中的所有资源文件
控制台（Console）查看运行日志、警告和错误信息

4. 第一个 Hello World

让我们在场景中创建一个带文字的节点，验证项目可以正常运行。

4.1 创建 Canvas 节点

在层级管理器中右键 → 创建节点 → UI 组件 → Canvas

在这里插入图片描述

4.2 在 Canvas 下创建 Label

选中 Canvas 节点，右键 → 创建节点 → UI 组件 → Label

在检查器中修改 Label 的 String 属性为 Hello, Cocos 3.8!

在这里插入图片描述 在这里插入图片描述

4.3 创建第一个脚本

在资源管理器中：

  1. 右键 assets 文件夹 → 新建 → 文件夹，命名 scripts
  2. 右键 scripts 文件夹 → 新建 → TypeScript 脚本，命名 Hello

双击打开脚本，输入以下代码：

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

@ccclass('Hello')
export class Hello extends Component {
    start() {
        console.log('Hello, Cocos Creator 3.8!');
        console.log('当前节点名称:', this.node.name);
    }

    update(deltaTime: number) {
        // deltaTime 是上一帧到这一帧的时间间隔（秒）
        // 每帧都会调用，用于处理游戏逻辑
    }
}

4.4 挂载脚本到节点

将 Hello.ts 脚本拖拽到层级管理器中的 Canvas 节点上（或选中 Canvas，在检查器中点击 添加组件 → 找到 Hello）

在这里插入图片描述

4.5 运行游戏

点击编辑器顶部的 ▶ 播放按钮，打开控制台（Console）面板，你应该看到：

Hello, Cocos Creator 3.8!
当前节点名称: Canvas

🎉 恭喜！你的第一个 Cocos 项目成功运行了！

在这里插入图片描述

5. 项目目录结构

my-first-game/
├── assets/                 # 所有游戏资源（脚本、图片、音频等）
│   ├── scripts/            # TypeScript 脚本
│   └── scene/              # 场景文件 (.scene)
├── extensions/             # 编辑器插件
├── settings/               # 项目设置
├── project.json            # 项目配置文件
└── package.json            # npm 包配置

重要规则：

  • 所有游戏资源 必须放在 assets/ 目录下 才能被编辑器识别
  • 资源文件旁边会自动生成 .meta 文件（UUID），不要手动删除

在这里插入图片描述

6. 编辑器快捷键速查

快捷键功能
W / E / R切换移动/旋转/缩放工具
Ctrl+Z撤销
Ctrl+S保存场景
Ctrl+P运行游戏
F聚焦到选中节点
Del删除选中节点
Ctrl+D复制选中节点

7. 今日总结

今天我们完成了：

  • ✅ 安装 Cocos Dashboard 和 Creator 3.8
  • ✅ 认识编辑器 5 大核心面板
  • ✅ 创建了第一个 TypeScript 脚本
  • ✅ 成功运行第一个 Hello World 项目

作业

  1. 在场景中多添加几个 Label，修改文字内容和颜色
  2. 在脚本 start() 方法中用 console.log 输出自己的名字
  3. 尝试找到"属性检查器"中如何修改节点的 位置（Position） 和 大小（Scale）

下一篇预告

Day 02：搞懂节点树就搞懂了 Cocos —— 场景系统与组件化思想深度解析

我们将深入理解 Cocos 的 节点（Node） 和 组件（Component） 系统，这是 Cocos 所有功能的基石。

← 系列目录 | Day 02 →

avatar
文章
阅读
粉丝