cocos studio 2.0 ui 如何使用

之前在做项目时需要用到 UI 编辑器，但不知道如何使用，后来在他人帮助下顺利完成。现在我将分享 Cocos Studio 2.0 UI 的使用方法。

1. 启动并新建项目

启动 Cocos Studio 2.0 后，新建一个项目，完成项目创建。

2. 提供项目资源

在编辑之前，需要为项目提供资源。有两种方式：

• 直接把资源拖到右边的资源列表。
• 在资源列表中打开选择资源对话框来添加资源。添加一个资源后，其他资源依此方式添加。

3. 项目默认元素及画面大小设置

项目创建完成后，会默认创建一个画布和一个容器 panel。在正式编辑 UI 之前，需要根据项目要求设置画面大小。

4. 添加图片对象

在画面中添加图片时，不能直接从资源列表拖到中间的画布上，只能在画布或对象列表使用右键，弹出右键菜单，选择添加图片对象。

添加完成后，用鼠标选中该对象，画面右边会出现对象的属性面板。属性面板包含尺寸和模式、常规、控件布局、特性等选项，你可以尝试设置这些选项来了解其具体作用。将具体的图片资源拖到属性面板 -> 特性 -> 文件框内，即可完成图片的添加。

需要注意的是，属性面板中有 Tag 属性和名字属性，在加载 UI 后，可以通过这两个属性获取 UI 中的对象。同时，可以通过调整渲染层级来调整对象的显示次序。

按照上述步骤，就可以快速完成 UI 制作。

5. 导出 UI

做完 UI 后，需要进行导出操作。因为 Cocos2d - x 不能直接使用 UI 工程，需要使用导出的资源。

在导出资源时，有两种选择：

• 使用大图：会把用到的资源拼成一个大图，可提高效率。
• 使用小图：会把资源的图原样复制过去。你可以根据实际需求进行取舍。

导出完成后，将导出的目录复制到 cocos2dx 工程的 Resource 目录下，就可以在项目中使用该 UI 了。

6. 在项目中使用 UI

在需要使用这个 UI 的场景中，添加以下代码：

gui::TouchGroup* ul = gui::TouchGroup::create();
ul->addWidget(GUIReader::shareReader()->widgetFromJsonFile("NewUi_1/NewUi_1.ExportJson"));
this->addChild(ul, 2);

如果要访问这个资源，可以通过 tag 来操作，使用 ul->getWidgetByTag(42)。需要注意的是，不能使用 ui->getChildByTag(42)，因为它不会遍历所有的子节点。

通过以上步骤，就完成了一个完整的 UI 操作。

这样，Cocos Studio 2.0 UI 的使用问题就解决了。