教你使用Cocos Studio UI编辑器

Cocos2d-x 不仅是一个强大的框架，还提供了一个功能丰富的编辑器，可用于对动画、UI、骨骼动画和场景进行编辑。借助这些工具，能显著缩短 Cocos2d-x 项目的开发周期。目前，该编辑器的 MAC 版本也已发布。

项目创建

启动并新建项目

启动 Cocos Studio UI 编辑器后，新建一个项目，完成项目创建操作。

提供资源

在进行编辑之前，需要为项目提供资源。有两种方式可以实现：一是将资源直接拖到右边的资源列表；二是在资源列表中打开选择资源对话框来添加资源。插入资源后，其他资源的添加方式依此类推。

项目创建完成后，会默认创建一个画布和一个容器 panel。

UI 编辑

设置画面大小

在正式编辑 UI 之前，需要根据项目要求设置画面大小。

添加图片

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

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

注意事项

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

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

导出与使用

导出 UI

完成 UI 制作后，需要将其导出。因为 Cocos2d-x 不能直接使用 UI 工程，必须使用导出后的文件。

在导出资源时，有两种选择：使用大图模式，会将用到的资源拼成一个大图，这样可以提高效率；使用小图模式，则会将资源的图片原样复制过去。具体选择哪种方式，需要根据实际情况进行取舍。

使用导出文件

导出完成后，将导出的目录复制到 cocos2dx 工程的 Resource 目录下，即可在项目中使用该 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 操作。