cocostudio的使用

官网:http://www.cocostudio.org/



视频教程:http://mobile.51cto.com/exp/cocostudio/index.html

http://mobile.51cto.com/aengine-399044.htm


UI编辑器

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

打开UI编辑器

cocostudio的使用_第1张图片


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

cocostudio的使用_第2张图片


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

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

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

cocostudio的使用_第3张图片


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

cocostudio的使用_第4张图片


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

cocostudio的使用_第5张图片


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

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

cocostudio的使用_第6张图片


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


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

Cocos2dx工具——Cocostudio界面编辑器一


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


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

cocostudio的使用_第7张图片


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

cocostudio的使用_第8张图片


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

cocostudio的使用_第9张图片



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

Cocos2dx工具——Cocostudio界面编辑器一


打开NewProject.xml文件:

cocostudio的使用_第10张图片


打开xml文件中记录的Resources目录,结果如下:

cocostudio的使用_第11张图片




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

你可能感兴趣的:(cocostudio的使用)