1. Cocos Studio 是什么？为什么现在不推荐使用？ (背景知识)
2. 如何下载和安装 Cocos Studio？ (历史版本)
3. Cocos Studio 核心功能入门教程 (以场景编辑器为例) (核心内容)
4. 从 Cocos Studio 迁移到 Cocos Creator 的指南 (面向未来)

Part 1: Cocos Studio 是什么？为什么现在不推荐使用？

Cocos Studio 是 Cocos (原 Cocos2d-x) 团队推出的一款可视化游戏编辑器，在 Cocos Creator 出现之前，它是 Cocos2d-x 生态系统的官方编辑器。

它的主要功能包括：

• 场景编辑器: 可视化地摆放 UI 元素和游戏对象，设置它们的层级关系和属性。
• 动画编辑器: 通过时间轴制作骨骼动画、帧动画。
• UI 编辑器: 拖拽控件（如按钮、图片、文本）来制作游戏界面。
• 数据编辑器: 管理游戏中的资源数据。

为什么被弃用了？

随着游戏开发的发展,开发者需要一个更现代、更灵活、更一体化的工作流，Cocos Creator 应运而生。

Cocos Creator 与 Cocos Studio 的核心区别：

对于新项目，请务必直接学习 Cocos Creator，不要从 Cocos Studio 开始。 本教程仅适用于需要维护旧项目或出于历史原因了解 Cocos Studio 的开发者。

Part 2: 如何下载和安装 Cocos Studio？

由于官方已停止维护,你需要从第三方渠道获取安装包。

1. 下载地址：

   • 一个常见的下载源是 Gitee 的开源镜像站，搜索 “CocosStudio” 可以找到一些历史版本。
   • 注意：请务必从可信的来源下载，以防病毒或恶意软件。

2. 安装步骤：

   
   （图片来源网络，侵删）
   • 下载完成后,通常是 .exe (Windows) 或 .dmg (macOS) 文件。
   • 双击安装程序,按照向导完成安装即可。
   • 安装时会提示你选择 Cocos2d-x 的引擎路径，如果你没有安装过引擎，可以暂时跳过，后续在创建项目时再指定。

Part 3: Cocos Studio 核心功能入门教程 (以场景编辑器为例)

我们将以制作一个简单的“开始游戏”按钮界面为例，带你体验 Cocos Studio 的核心工作流。

步骤 1: 创建新项目

1. 打开 Cocos Studio。
2. 选择 "File" -> "New Project"。
3. 在弹出的窗口中,选择 "Project Type" 为 "UI Project" (UI项目) 或 "Game Project" (游戏项目)，这里我们选择 "UI Project" 来专注于界面制作。
4. 给项目命名,选择一个保存路径，然后点击 "Create"。

步骤 2: 熟悉工作区

创建项目后,你会看到几个关键面板：

• 场景编辑器 (Scene Editor): 中间的画布区域，是可视化操作的主舞台。
• 资源管理器 (Resource Panel): 左侧面板，显示你项目中的所有资源（图片、动画、字体等）。
• 属性检查器 (Properties Panel): 右侧面板，显示当前选中对象的属性（如位置、大小、颜色等）。
• 层级管理器 (Hierarchy Panel): 通常在右侧或左侧，显示场景中所有对象的层级关系，像一个树状结构。

步骤 3: 导入资源

1. 在资源管理器中，右键点击你的项目文件夹。
2. 选择 "Import" -> "Import to Project"。
3. 找到并选择你准备好的图片资源（一个背景图 bg.png 和一个按钮图 start_btn.png），然后点击打开，这些资源会出现在资源管理器中。

步骤 4: 搭建 UI 场景

添加背景

• 从资源管理器中，将背景图 bg.png 直接拖拽到场景编辑器的画布上。
• 选中画布上的背景图,在属性检查器中调整它的 Position (位置) 和 Size (大小)，让它铺满整个屏幕，通常可以设置 X 和 Y 为 0，Width 和 Height 为设计分辨率（960x640）。

添加按钮

• 从资源管理器中，将按钮图片 start_btn.png 拖拽到场景编辑器的画布上。
• 选中按钮,在属性检查器中调整它的位置，X: 480, Y: 320，让它位于屏幕中央。
• 你可以在这里调整按钮的 Scale (缩放) 或 Rotation (旋转)。

添加文本

• 在层级管理器或工具栏中，找到并添加一个 "Text" (文本) 节点。
• 选中这个文本节点,在属性检查器中进行设置：
  • String: 输入 "开始游戏"。
  • Font: 选择一个字体。
  • FontSize: 设置字体大小。
  • Color: 设置文字颜色。
  • 调整文本的位置,让它位于按钮图片的中央。

你的层级管理器看起来可能像这样：

- Canvas (根节点)
  - bg (背景图片)
  - start_btn (按钮图片)
    - Label (按钮上的文本)

步骤 5: 保存场景

• 点击菜单栏的 "File" -> "Save Scene" 或按 Ctrl + S。
• 给你的场景文件命名,main_scene.csd，并保存到项目的 Resources 文件夹下。（重要：要让游戏在运行时加载到这个场景，.csd 文件必须放在 Resources 文件夹中）。

步骤 6: 在 Cocos2d-x / Lua 代码中加载场景

这是 Cocos Studio 工作流的最后一步，也是它与 Cocos Creator 最大的不同。

在 Cocos2d-x (C++) 中：

假设你的场景类名为 MainScene。

// 在你的场景初始化方法中
bool MainScene::init()
{
    if ( !Scene::init() )
    {
        return false;
    }
    // 1. 获取 CocosStudioReader
    cocos2d::ui::WidgetReader* reader = cocos2d::ui::WidgetReader::getInstance();
    // 2. 加载 .csd 文件
    reader->purge();
    reader->setFileName("main_scene.csd"); // 确保路径正确
    reader->assemblyNode();
    // 3. 获取加载后的根节点
    cocos2d::Node* rootNode = reader->getNodeGraph();
    // 4. 将根节点添加到当前场景中
    this->addChild(rootNode);
    return true;
}

在 Lua 中：

-- 在你的场景初始化函数中
function MainScene:ctor()
    -- 1. 加载 .csd 文件
    local widget = cc.uiloader:load("main_scene.csd")
    -- 2. 将加载的节点添加到当前场景中
    self:addChild(widget)
end

Cocos Studio 的工作流： 编辑器 (制作 .csd) -> 保存 -> 代码 (读取 .csd 并创建节点) -> 添加到场景

Part 4: 从 Cocos Studio 迁移到 Cocos Creator 的指南

如果你正在维护一个旧的 Cocos Studio 项目，或者想转向现代的游戏开发，迁移到 Cocos Creator 是必然选择。

迁移的核心思想

将 Cocos Studio 的“数据驱动”思想，转变为 Cocos Creator 的“组件化脚本驱动”思想。

迁移步骤建议

1. 安装 Cocos Creator：从官网下载并安装最新版的 Cocos Creator。
2. 创建新项目：使用 Cocos Creator 创建一个新项目（建议使用 TypeScript 模板）。
3. 迁移资源：将 Cocos Studio 项目中的图片、动画、字体等资源复制到 Cocos Creator 项目的 assets 文件夹中。
4. 手动重建场景 (最关键的一步)：
   • 不要尝试直接转换 .csd 文件，这几乎是不可能的。
   • 在 Cocos Creator 的场景编辑器中，根据 Cocos Studio 中的层级管理器，手动创建节点并摆放它们。
   • 将 Cocos Studio 中的属性检查器里的参数（位置、大小、颜色等），手动设置到 Cocos Creator 对应节点的属性检查器中。
   • 使用 Cocos Creator 的 Widget 组件来替代 Cocos Studio 中的对齐和缩放设置，实现更好的屏幕适配。
5. 重建动画：
   • 在 Cocos Creator 中打开动画编辑器。
   • 根据你在 Cocos Studio 中制作的动画时间轴，在 Cocos Creator 中重新创建关键帧动画，你可以参考导出的视频或手动播放旧版动画来对照。
6. 编写脚本：
   • 将原来 Cocos Studio 项目中写在 init 方法里的逻辑，拆分到 Cocos Creator 的组件脚本中。
   • 原来在 MainScene.cpp 中的逻辑，现在可以创建一个 MainScene.ts 脚本，附加到场景的根节点上。
   • 将按钮的点击事件绑定到脚本中的函数上。

代码示例对比

Cocos Studio (Lua) 的按钮点击： 在 Cocos Studio 的属性检查器里，为按钮节点添加一个 "Touch Event"，并指定一个处理函数名，onStartBtnTouched，然后在 Lua 代码中：

-- 在场景的 .lua 文件中
function MainScene:onStartBtnTouched(sender, event)
    -- 处理点击逻辑
    print("Start Button Touched!")
    -- 跳转到下一个场景
    local nextScene = require("GameScene").new()
    cc.Director:getInstance():replaceScene(nextScene)
end

Cocos Creator (TypeScript) 的按钮点击：

1. 在 Cocos Creator 中，选中按钮节点。

2. 在属性检查器中，点击 "Add Component" -> "UI" -> "Button"。

3. 在属性检查器的 "Click Events" 部分，点击 号。

   • Target: 拖拽你的脚本组件所在的节点（通常是场景的根节点）。
   • Component: 选择你的脚本组件，MainScene。
   • Handler: 从下拉菜单中选择你的函数名，onStartBtnTouched。

4. 在 MainScene.ts 脚本中：

   const { ccclass, property } = cc._decorator;
   @ccclass
   export class MainScene extends cc.Component {
       // 这是一个装饰器，告诉编辑器这个函数可以作为一个事件回调
       @property(cc.Button)
       startBtn: cc.Button = null; // 可选：将按钮引用拖到这里，方便在代码中访问
       onLoad() {
           // 也可以在这里通过代码绑定事件
           // this.startBtn.node.on('click', this.onStartBtnTouched, this);
       }
       onStartBtnTouched() {
           console.log("Start Button Touched!");
           // 跳转到下一个场景
           cc.director.loadScene("GameScene");
       }
   }

希望这份详细的指南能帮助你理解 Cocos Studio 并顺利过渡到 Cocos Creator！祝你开发愉快！