cocos2dx 创建ui编辑器的按钮

本文主要介绍 Cocostudio 界面编辑器的操作，即如何使用 Cocos2d-x 创建 UI 编辑器的按钮，随后会对界面的实际编码作进一步说明。

打开 UI 编辑器

为了更方便地使用 UI 编辑器，我们首先要对这个编辑器有一个整体的了解。



如图 2 所示：

• 红色区域是可添加的控件工具栏区域。
• 蓝色区域是编辑过程中使用的主区域，所有主要的操作结果都在这个区域完成。
• 黄色区域是编辑之后物理层级结构展示区域。
• 绿色区域是编辑过程中选中控件的属性显示区域。
• 蓝绿色区域（准确来说可能是青绿色）是该 UI 使用的所有资源展示区域。
• 紫红色区域是某一资源图片被选中时的预览图显示区域。

在对编辑器有了整体认识之后，我们就可以开始使用它了。如果没有已经编辑好的 UI，我们需要新建一个项目，操作如下：


这时会弹出项目选项的对话框，我们按照具体情况填写即可。


填写完成后，我们会在编辑使用的主区域看到一个用黑框表示的编辑区域。


这个黑色编辑区域的大小与我们期望的分辨率一致。可能有人会问，编辑器怎么知道我们期望的分辨率是多大呢？如果这个分辨率与我们期望的分辨率大小不一致怎么办？

大家注意看编辑器左上角有一个文本标志“画布”，后面跟随一个下拉列表框选项，我们可以通过这里来告知或修改正在编辑 UI 的分辨率大小。


设计者很贴心地为我们提供了多种分辨率选项，包括 480X320、960X640、1024X768 以及以上几种分辨率的竖屏结构。随着我们选择的不同，前面提到的黑色编辑区域也会随之变化。

添加控件

此时，我们相当于有了自己的一张画布，但仅有画布是不够的，我们还需要“画笔”，也就是控件。


如图 7 所示，这就是控件工具栏。从上往下，设计者为我们提供了滚动层、文本按钮、文本区、输入框、数字标签、进度条、容器层（一般需要首先在画布上添加一个容器层）、图片控件、文本框、滑动条、复选框、按钮等。相信后续设计者会提供更多的控件，让我们拭目以待。

相信大家都清楚这些控件的用途，这里就不再赘述，仅做简单的控件加载说明。我们选中画布开始添加控件。


下图是一个示例 UI，里面使用了容器层、滚动层、文本按钮、文本区、输入框、数字标签、进度条等多种控件。


这些控件具有一定的层级关系，我们可以在前面提到的对象结构视图中看到。


保存项目

完成 UI 编辑后，我们保存项目，并打开之前设定的路径，会看到如下结果。


打开 NewProject.xml 文件。


再打开 xml 文件中记录的 Resources 目录，结果如下。


在这篇博客中，我们主要了解了 UI 编辑器的使用，此内容可能更适合策划人员参考。