【Cocos2dx工具】Cocostudio界面编辑器一
2013-05-23 12:49
363 查看
【Cocos2dx工具】Cocostudio界面编辑器
一
图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界面编辑器二】》中作进一步的说明。
本文出自 “Forward” 博客,请务必保留此出处http://forward.blog.51cto.com/7217063/1207742
相关文章推荐
- 【Cocos2dx工具】Cocostudio界面编辑器二
- 【Cocos2dx工具】Cocostudio界面编辑器三
- 【Cocos2dx工具】Cocostudio之数据编辑器使用
- cocos2dx编辑器cocostudio与cocosbuilder异同
- Cocos2dx 3.10的MFC 工具编辑器
- cocos2dx——cocostudio界面的使用详解
- CocoStudio工具集开发入门之UI编辑器教程
- cocos2d-x 2.2 CocoStudio动画和界面编辑器按钮控制以及场景编辑器使用
- CocoStudio工具集开发入门之UI编辑器教程(1)
- 【Cocos2dx】Cocostudio之数据编辑器使用
- Cocos2dx工具——Cocostudio之数据编辑器使用(转)
- cocostudio1.6UI编辑器中动画使用 cocos2dx3.3 播放问题记录
- cocos2dx ui编辑器生成界面的管理
- cocos2dx编辑器cocostudio与cocosbuilder异同
- cocoStudio工具的使用-----UI编辑器
- cocos2dx 3.0结合cocostudio创建界面UI以及特效
- CocoStudio 界面编辑器学习
- cocos2dx 2.2.2 cocostudio 数据编辑器导出的.json文件读取 解析
- cocoStudio工具的使用-----场景编辑器
- 电脑桌面及开eclipse/myeclipse等开发工具编辑器界面颜色的最佳设置