Cocos Studio 2.0 教程：从入门到实战

什么是 Cocos Studio 2.0？

我们需要明确一个非常重要的概念：Cocos Studio 2.0 是一个已经停止维护的旧版工具。

• 定位：它是一个集 UI编辑器、动画编辑器、场景编辑器 于一体的可视化游戏编辑器，主要用于快速创建游戏界面、制作动画和搭建游戏场景。
• 关联引擎：它主要服务于 Cocos2d-x 3.x 和早期的 Cocos Creator 版本（0.x - 1.x）。
• 现状：由于技术架构的演进，Cocos Studio 的功能已经被 Cocos Creator 3.x 内置的编辑器完全取代，新项目强烈建议直接使用 Cocos Creator。

为什么我们还要学习它？

1. 维护旧项目：你可能需要接手或维护一个使用 Cocos Studio 2.0 创建的老项目。
2. 学习历史：了解它有助于理解游戏可视化编辑器的发展历程。
3. 简单易上手：对于一些非常简单的 2D 游戏或原型,它的设计理念依然值得借鉴。

Cocos Studio 2.0 的核心功能

Cocos Studio 2.0 主要由以下几个模块组成,你可以在启动后选择进入相应的工作区。

UI Editor (UI编辑器)

这是最常用的功能，用于创建游戏的用户界面，如主菜单、设置面板、血条、技能图标等。

• 工作区：

  
  （图片来源网络，侵删）
  • 节点树：左侧，显示当前场景中所有 UI 元素的层级关系，类似于代码中的 DOM 结构。
  • 属性检查器：右侧，选中任意一个 UI 元素（如按钮、图片、文本），可以在这里修改它的位置、大小、颜色、锚点、是否可点击等属性。
  • 资源管理器：左下角，存放你导入的图片、字体、粒子等资源。
  • 画布：中间区域，实时预览你正在编辑的 UI 界面。

• 常用 UI 组件：

  • Widget (控件)：所有 UI 元素的基类。
  • Button (按钮)：可点击，可以设置 Normal（正常）、Pressed（按下）、Disabled（禁用）三种状态的图片。
  • ImageView (图片视图)：用于显示一张静态图片。
  • Text (文本)：用于显示文字，可以设置字体、颜色、大小、对齐方式等。
  • TextField (输入框)：允许用户输入文字。
  • CheckBox (复选框)：用于多选。
  • Slider (滑动条)：用于进度条或音量调节。
  • LoadingBar (进度条)：显示加载进度。

• 核心概念：

  • 锚点：非常重要！它决定了 UI 元素的位置基准和缩放中心，默认是中心点 (0.5, 0.5)，一个锚点在左下角 (0, 0) 的按钮,它的坐标值就是按钮的左下角位置。
  • 适配：通过设置 Widget 组件的 对齐 属性，可以让 UI 元素自动跟随屏幕大小变化,实现多分辨率适配。

Animation Editor (动画编辑器)

用于制作 UI 或精灵的骨骼动画、帧动画。

• 工作区：

  
  （图片来源网络，侵删）
  • 时间轴：核心区域,通过在不同的时间点设置关键帧来定义动画。
  • 节点树：显示可以制作动画的对象。
  • 属性检查器：为选中的对象在时间轴上设置关键帧。

• 动画类型：

  • 帧动画：通过快速切换一系列静态图片来形成动画，适用于简单的、没有骨骼的角色或特效。
  • 骨骼动画：为角色创建骨骼，然后通过控制骨骼的变换来驱动角色动作，制作更流畅、更自然的角色动画，这是 Cocos Studio 的一个强项。

Scene Editor (场景编辑器)

用于搭建游戏关卡或大场景。

• 工作区：与 UI 编辑器类似，但画布中放置的是游戏中的角色、地图、障碍物等“游戏对象”。
• 功能：
  • 从资源管理器中拖拽精灵、粒子效果等到画布上。
  • 布置场景元素,设置它们的层级关系。
  • 可以将整个场景导出为 .json 文件,供游戏引擎加载。

Data Editor (数据编辑器)

用于管理游戏配置数据，如关卡配置、道具列表、角色属性表等，它可以将数据导出为 .json 或 .plist 文件,方便在游戏中读取。

一个简单的实战案例：制作一个登录界面

假设我们要制作一个包含“背景图”、“游戏标题”、“用户名输入框”、“密码输入框”和“登录按钮”的登录界面。

步骤 1：准备资源 将你的 bg.png (背景图), logo.png (标题), btn_login.png (按钮) 图片素材放到一个文件夹中。

步骤 2：创建新 UI 项目

1. 打开 Cocos Studio 2.0，选择 "UI" 模块。
2. 点击 文件 -> 新建 -> 项目。
3. 输入项目名称（如 LoginScene），选择一个空目录，点击 创建。

步骤 3：搭建界面

1. 导入资源：

   • 在左下角的 资源管理器 中，点击 导入资源 按钮，选择你准备好的图片文件夹,将它们导入项目中。

2. 添加背景图：

   • 从 资源管理器 中拖拽 bg.png 到中间的 画布 上。
   • 在右侧 属性检查器 中，选中这个 ImageView，为了适应全屏,我们需要设置它的尺寸和锚点。
   • 设置 Size 为你的设计分辨率（960x640）。
   • 设置 Anchor Point 为 (0.5, 0.5)。
   • 设置 Position 为 (480, 320),使其居中。

3. ：

   • 从 资源管理器 拖拽 logo.png 到画布上。
   • 在属性检查器中，调整它的 Position，比如放在背景图上方 (480, 500)。

4. 添加输入框：

   • 从左侧的 组件 列表中，找到 TextField,直接拖拽到画布上。
   • 在属性检查器中，将其 Position 设置为 (350, 400)。
   • 选中它，在 属性检查器 下方会出现 TextField 组件的专属属性，可以设置 Place Holder（提示文字，如“请输入用户名”）、Font（字体）等,同样再添加一个密码框。

5. 添加按钮：

   • 从 组件 列表中拖拽 Button 到画布上。
   • 在属性检查器中，设置 Position 为 (480, 300)。
   • 选中按钮，在下方 Button 组件的 Normal 属性中，点击右下角的小箭头，选择 btn_login.png 作为正常状态的图片，同样可以设置 Pressed 状态。

步骤 4：保存和导出

1. 点击 文件 -> 保存，或按 Ctrl + S，保存你的 .ui 文件。
2. 点击 文件 -> 发布 -> 发布到 Cocos2d-x。
3. 在弹出的窗口中，选择你的 Cocos2d-x 工程目录，它会自动将 UI 数据（LoginScene.json）和资源（图片）复制到工程的 publish 目录下。

步骤 5：在 Cocos2d-x 代码中加载 你就可以在你的 Cocos2d-x 游戏代码中加载这个界面了。

// 在场景类的 init() 或其他合适的方法中
#include "ui/CocosGUI.h" // 必须包含头文件
using namespace cocos2d::ui;
bool HelloWorld::init()
{
    if ( !Scene::init() )
    {
        return false;
    }
    // 1. 创建 UIReader 对象
    cocostudio::GUIReader* reader = cocostudio::GUIReader::getInstance();
    // 2. 加载 .ui 文件
    Layout* rootWidget = reader->widgetFromJsonFile("LoginScene.json");
    // 3. 将 UI 添加到当前场景中
    this->addChild(rootWidget);
    // 4. （可选）获取并操作 UI 元素
    Button* loginBtn = static_cast<Button*>(Helper::seekWidgetByName(rootWidget, "Button_1")); // "Button_1" 是在编辑器中自动生成的名字
    if (loginBtn)
    {
        loginBtn->addTouchEventListener(CC_CALLBACK_2(HelloWorld::onLoginButtonClicked, this));
    }
    TextField* usernameField = static_cast<TextField*>(Helper::seekWidgetByName(rootWidget, "TextField_1"));
    if (usernameField)
    {
        log("用户名输入框内容: %s", usernameField->getString().c_str());
    }
    return true;
}
// 按钮点击事件的回调函数
void HelloWorld::onLoginButtonClicked(Ref* pSender, Widget::TouchEventType type)
{
    if (type == Widget::TouchEventType::ENDED)
    {
        log("登录按钮被点击了！");
        // 在这里添加登录逻辑
    }
}

常见问题与注意事项

1. 版本兼容性：Cocos Studio 2.0 对 Cocos2d-x 的版本有要求,不同版本之间可能不兼容。
2. 性能问题：复杂的 UI 界面如果节点层级过深，可能会影响渲染性能,合理的节点设计很重要。
3. 代码耦合：早期版本生成的代码可能与 Cocos2d-x 引擎版本强耦合,升级引擎时可能会遇到问题。
4. 锚点的重要性：务必理解并正确使用锚点，这是 UI 布局适配和交互的基础。
5. 资源管理：养成良好的资源命名和文件夹管理习惯,避免项目混乱。

总结与展望

Cocos Studio 2.0 是一个时代的产物，它极大地简化了 2D 游戏的开发流程,让美术和策划也能参与到界面和动画的制作中。

随着游戏开发技术的发展，它已经被功能更强大、工作流更现代化的 Cocos Creator 所取代。

如果你是新手，请直接学习 Cocos Creator，它不仅集成了所有 Cocos Studio 的功能,还提供了：

• 组件化：更灵活的脚本化开发方式。
• 所见即所得：编辑器和游戏视图实时同步。
• 现代化的工作流：与 Git、项目管理工具结合更紧密。
• 跨平台发布：一键发布到 Web、iOS、Android、PC 等多个平台。

希望这份教程能帮助你理解 Cocos Studio 2.0 的基本用法，如果你正在维护一个旧项目，这份指南应该能帮你理清思路，对于新项目，请勇敢地拥抱 Cocos Creator 吧！