【Cocos2dx工具】Cocostudio界面编辑器一

【Cocos2dx工具】Cocostudio界面编辑器

一

写在前面——

   如果转载请注明出处，谢谢大家支持

   同步更新51CTO博客

——Forward

我的微博——龙颜硕

今天我们开始Cocostudio中UI（界面）编辑器的学习（如还有同学不知道Cocostudio，请到【Cocos2dx工具——Cocostudio之数据编辑器使用】进行初步了解）

这一片博客中，我们主要介绍一下Cocostudio界面编辑器的操作，随后我们会对界面的实际编码作进一步说明。

打开UI编辑器

图1

为了能够更方便的使用UI编辑器，首先来对这个编辑器整体做一次了解：

图2

如图2所示，红色区域是我们可以添加的控件工具栏区域；蓝色区域是我们编辑过程中使用的主区域，即所有主要的操作结果都是在这个区域中完成的；×××区域是我们编辑之后物理层级结构展示区域；绿色区域是我们在编辑过程中选中控件的属性显示区域；蓝绿色（这个颜色是这么说吗？^_^）区域是我们这个UI使用的所有资源展示区域；紫红色区域是上边某一资源图片被选中时候的预览图显示区域。

OK，有了对编辑器整体认识之后，我们就可以开始使用它了……

如果没有已经编辑好的UI，我们需要新建一个项目如下图所示：

图3

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

图4

这时我们会在编辑使用的主区域出现一个用黑框表示的编辑区域如下图：

图5

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

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

图6

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

好的，这个时候我们相当于有了自己一张画布，不过仅有画布还是不够的，我们还需要画笔——

图7

是的，如图7所示这就是我们的空间工具栏。从上往下，设计者为我们提供了滚动层、文本按钮、文本区、输入框、数字标签、进度条、容器层（一般都要首先在画布上先添加一个容器层）、图片控件、文本框、滑动条、复选框、按钮等。相信很快设计者肯定会为我们提供出更多的空间来，期待哦~

相信以上这些控件大家都知道是做什么用的，Forward就不在这赘述了。这里只做简单的控件加载说明，选中画布开始添加控件：

图8

如下图9所示，这是Forward自己编辑的一套UI，里面使用了容器层、滚动层、文本按钮、文本区、输入框、数字标签、进度条等等。

图9

这些控件具有一定的层级关系，我们可以在前面提到的对象结构这个View中看到，如下图10所示：

图10

好了，保存项目，并打开之前设定的路径，我们看到如下图所示的结果：

图11

打开NewProject.xml文件：

图12

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

图13

在这篇博客中，我们主要了解了UI编辑器的使用，可能更适合策划同学们……那么有了编辑好的UI界面之后，我们如何把它们加载到我们的程序中去呢？如何是对应的控件具有其对应的功能呢？这些问题Forward会在《【Cocos2dx工具——Cocostudio界面编辑器二】》中作进一步的说明。