转自:
CocoStudio 《UI编辑器》 教程
http://bbs.cocostudio.org/forum.php?mod=viewthread&tid=153&fromuid=214
UI编辑器 视频地址:
http://v.youku.com/v_show/id_XNTQzNjI4OTU2.html
大家好,非常感谢大家的支持,好啦,直接进入主题,下边就是UI编辑器的文档教程: 1.1 UI编辑器简介:
UI编辑器:是一款用于编辑游戏中的UI界面的工具。支持丰富的UI控件,包括按钮,列表,复选框,进度条,列表,滑动框等等,达到省时、省力、高效的目的。
1.2 安装环境
操作系统:Windows7/WindowsXP
程序扩展包:
l NetFramework 4.0
l VC2010(vcredist_x64/ vcredist_x86)
安装SPII游戏开发工具集
l CocoStudio.exe
1.3 界面介绍v 结构树:展示渲染区域节点的层次结构并且支持拖拽移动节点。结构树的根节点是一个Layer。 v 渲染区:UI布局的主编辑区,在该区域可以对精灵进行移动,缩放,旋转的操作。 v 控件库:可用于在渲染区域编辑的各种控件包括Node,Sprite,LabelTFF,Layer,Menu,MenuItemImage等,还可以扩充。 v 属性窗口:当选中一个节点,属性窗口会显示出该节点的所有属性。修改任意属性可以立即改变该节点在渲染区域的状态。 v 日志窗口:日志窗口用来记录所有操作的明细和历史。 |
3.4属性编辑
常规属性:
交互:使用在输出数据中启动控件的鼠标事件响应;
显示/隐藏:显示或隐藏选中的控件;
垂直翻转:
水平翻转:
名字:输出到数据文件的字符串,用于代码查找控件的标识(不可重复定义);
标志:输出到数据文件的整数,用于代码查找控件的标识(不可重复定义);
旋转:调整控件的旋转角度;
缩放:调整控件的横向缩放和纵向缩放;
位置:调整控件的坐标;
渲染层级:调整控件的渲染顺序,上下的遮挡关系;
特殊属性:
图片:
文件:图片控件用到的美术资源图,可以从资源渲染区拖动图片资源到此属性上,进行资源替换;
复选框:
选中/取消:设置复选框的初始状态;
常态底图:复选框的正常状态下的底图图片资源;
按下底图:复选框的按下状态下的底图图片资源;
禁用状态:复选框的禁用状态下的底图图片资源;
标示图默认状态:复选框的按下状态下的底图图片资源(选择使用);
标示图选中状态:复选框的选中状态下的高亮图片资源(选择使用);
进度条:
进度:进度条的初始进度(0-100);
类型:进度条的加载方向(左->右,右->左);
图片资源:进度条的图片资源文件;
文本区:
宽度:文本区的宽(影响文本区的点击测试区域);
高度:文本区的高(影响文本区的点击测试区域);
字号:文本区的文字字体的大小;
字体:文本区的文字的字体;
对平对齐:文本区的文字的水平对齐方式(左对齐,中心对齐,右对齐);
垂直对齐:文本区的文字的垂直对齐方式(顶对齐,中心对齐,底对齐);
文本:文本区的初始显示的文字文本;
滚动层:
宽度:滚动层的宽(影响滚动层的点击测试区域);
高度:滚动层的高(影响滚动层的点击测试区域);
文件:滚动层的初始背景图片资源;
滚动层的子控件,需要选中滚动层,右键进行添加;
层容器:
宽度:层容器的宽(影响层容器的点击测试区域);
高度:层容器的高(影响层容器的点击测试区域);
文件:层容器的初始背景图片资源;
层容器的子控件,需要选中层容器,右键进行添加;
按钮:
正常状态:按钮的正常状态下的图片资源;
按下状态:按钮的按下状态下的图片资源;
禁用状态:按钮的禁用状态下的图片资源;
文本按钮:
正常状态:按钮的正常状态下的图片资源;
按下状态:按钮的按下状态下的图片资源;
禁用状态:按钮的禁用状态下的图片资源;
字体:文本按钮显示文字的字体;
字号:文本按钮显示文字的字体大小;
文本:文本按钮显示的文字字符串;
数字标签:
标签图片:数字标签使用的图片资源;
标签首字符:数字标签使用的图片资源中的第一个字符;
标签首字宽:数字标签使用的图片资源中的第一个字符的宽(像素);
标签首字高:数字标签使用的图片资源中的第一个字符的高(像素);
文本:数字标签显示的文本字符串(图片资源中存在的字符集合);
滑动条:
滑动进度:滑动条的初始进度,滑动节点的显示位置;
底图资源:滑动条的背景图片资源;
节点正常状态:滑动节点的正常状态显示的图片资源;
节点按下状态:滑动节点的按下状态显示的图片资源;
节点禁用状态:滑动节点的禁用状态显示的图片资源;
输入框:
宽度:输入框的宽(影响输入框的点击测试区域);
高度:输入框的高(影响输入框的点击测试区域);
字号:输入框的文字字体的大小;
字体:输入框的文字的字体;
文本:输入框的初始显示的文字文本;
文本框:文本框
交互动画:是否启动文本框的点击动画;
字号:文本框的文字字体的大小;
字体:文本框的文字的字体;
文本:文本框的初始显示的文字文本;
3.5导出资源 导出资源面板: 图片最大宽度:合成图片的最大宽度; 图片最大高度:合成图片的最大高度; 碎图缝隙:合成大图中的小图之间的缝隙像素;、 导出路径:用户自定义导出路径; 导出文件包括.png和.plist文件; 当工程中使用的图片合并后的尺寸大于设定的图片尺寸,程序将自动分割合并后的图片成多组合并图片,并添加序列下标; |