X
X
Cocos StudioUI编辑器工具简述

影子 2016-03-16
简介
制作人员将绘制好的界面图片资源导入到UI编辑器中,按照相应的设计方案来摆放、设计、编辑、拼接、修改相应的游戏图形界面。并将编辑好的UI资源直接整 体导出,可以在游戏代码中直接呈现出来。UI编辑器支持Cocos2d-X的全部的控件,并进行了扩充。满足了游戏开发中对各种UI控件的需求。UI编辑 器支持碎图导出、整图导出、UI模板、UI动画等实用功能。
编辑界面
Cocos Studio的界面主要分为菜单栏、工具栏、对象面板、资源面板、画布面板、属性面板、动画面板、输出窗口、状态栏九部分组成,如下图:
图片1.png

下面简述下UI编辑工具
一、基础对象
1、地图控件

地图控件可支持导入Tiled地图编辑器导出的tmx格式文件,地图是制作游戏关卡地形图的控件,对于即时战略类型游戏的制作,为了使玩家流畅的切换游戏画面,经常会使用超过屏幕尺寸的地图。如果选择使用不用的背景图片切换场景,不仅造成资源浪费,加载速度也会变的很慢。
地图控件很好的解决了这一问题:采用瓦片地图的形式。一张大的背景图由几种地形表示,每种地形对应一张小图片,即瓦片,把这些瓦片拼接起来,就组成了一个完成的地图。对一些不同地形的场景切换时,只需加载瓦片,大大提升效率。
您可以为地图控件导入特定效果的文件(TMX文件):
① 从资源面板拖动tmx文件至地图控件 特性-〉文件,松开鼠标即实现文件导入;
② 在属性面板的“特性”中,点击“导入地图文件”按钮,选择文件导入;
③ 在画布中选中地图控件右键选择“设置地图文件”,选择文件导入。
2、粒子
粒子是带有随机性特效的控件,是计算机图形学中模拟特定现象的技术实现:如爆炸、烟花、水流等效果。在游戏制作时,粒子可以制造酷炫的效果,使场景表现更丰富。
粒子控件可支持导入Particle Designer导出的plist文件。
您可以为粒子导入特定效果的文件(plist文件):
① 从资源面板拖动文件至粒子控件 特性-〉文件,松开鼠标即实现文件导入;
② 在属性面板的“特性”中,点击“导入粒子文件”按钮,选择文件导入;
③ 在画布中选中粒子控件右键选择“设置粒子文件”,选择文件导入。
3、声音
声音是控制音乐与音效的控件。在游戏制作时,声音对表现效果有至关重要的作用。Cocos Studio声音控件支持mp3、wav两种格式的音效文件。
您可以为声音导入特定效果的文件(mp3/wav文件):
① 从资源面板拖动文件至声音控件 特性-〉文件,松开鼠标即实现文件导入;
② 在属性面板的“特性”中,点击“导入声音文件”按钮,选择文件导入;
③ 在画布中选中粒子控件右键选择“设置声音文件”,选择文件导入。
勾选特性-循环播放“支持”项时,在实际游戏项目中声音文件将会循环播放,未勾选时,声音文件只播放一遍即停止。
4、节点
节点是场景图的基本元素,在游戏制作时,经常需要用节点标记或创建父子关系。节点主要特点:可以包含其他节点对象;可以执行一些操作。
在2D,3D制作中,节点控件可应用于管理多个控件间的联动效果。
5、精灵
添加一张精灵控件,可导入图片资源。精灵控件和图片控件比,具有以下特性:
① 不具备九宫格属性,但其性能开销低,经常被用来设置游戏中大部分图片资源。
② 在Cocos Studio中精灵也常被用来做序列帧动画。
精灵控件被频繁使用,有以下两个原因:
① 节约资源浪费,减少资源大小。
② 从复用做起,游戏中不同大小的窗口,均可使用同一套资源拼接。
二、控件
1、按钮

按钮是游戏中最常用的控件类型之一,控制用户点击事件的开关,有正常、按下、禁用三种状态,您可以为他们设置样式及文本。
按钮控件属性众多,除了常规属性外,还包含尺寸属性和一些特性属性。
按钮具有三种状态,每一种状态都可以通过图片来定义:您只需要在画布上添加一个按钮后,选择该按钮控件,在属性面板的特性部分会展示按钮控件当前的样式资 源,您可以通过双击修改按钮控件的属性,也可以将图片资源拖动到当前的样式资源上以替换为新的资源。我们为按钮设置了正常和按下状态,这样在游戏中触摸该 按钮时,按钮就会自动切换为按下状态的图片。如果有需要,您也可以为按钮设置禁用状态。
有时我们在设置按钮样式后,还希望给按钮设置文字,您可以使用修改按钮文本特性来实现这个需求。您可以自定义按钮文本的颜色、字体、大小。修改按钮文本时只需选中按钮,在属性区修改文本属性,也可以通过“菜单-编辑文本”或双击唤出修改文本弹窗。
能够在属性面板或右键菜单设置按钮是否启用,按钮禁用后在最终的游戏里将不能响应触摸事件。
2、复选框
复选框是一种可同时选中多项的基础控件,您可设置他的各种样式,以及选中状态。
复选框最常用的地方莫过于游戏登录界面上的“记住用户名”和“记住密码”。还有就是一些游戏的设置界面,控制是否启用音乐的开关,通常也是复选框控件。复选框控件属性众多,除了常规属性外,还包含尺寸属性和一些特性属性。
复选框具有五种状态:背景正常样式、背景按下样式、背景禁用样式、选中标识样式、选中标识禁用样式,每一种状态都可以通过图片来定义。
当您设置一个复选框为选中时,这个复选框在游戏中的初始状态就为选中的状态。通过属性面板或右键菜单能够修改复选框的选中状态。
3、图片控件
添加一张可以设置九宫格的图片,九宫格是一种能够使本来拉伸后会失真的图片,经过一定的处理后,拉伸后不失真的技术。
图片控件相对于精灵控件,具有以下特性:
① 可改变原图尺寸,而不出现图片失真效果。
② 可使用同一资源,通过设定九宫格的参数,达到不同的最终效果。
③ 系统开销比精灵控件大,建议不要过度使用图片控件。
4、文本
文本也是游戏中最为常用的控件之一。添加一个文本,可以设置字体、字号、对齐等样式或属性。
如果您需要特殊的字体则需要点击导入字体按钮导入一个TTF格式的字体,这个字体将在您发布游戏时一起打包。 在修改文本的字体时需要注意,当您没有指定使用的字体时,使用的字体是所运行设备的默认字体,对于您所制作的游戏来说就是玩家设备的字体。
5、FNT字体
可以通过设置FNT字体文件实现各种艺术字体。和艺术数字比,FNT字体具有以下特性:
① 可用资源丰富,支持各类文字,字体中包含中文,英文,数字以及某些特殊字符。
② 制作复杂,需要使用专业软件进行制作。
在画布上添加一个FNT后,选择该FNT字体控件,在属性面板的特性部分会展示该控件当前的样式资源,您可以通过双击修改按FNT字体的属性,也可以将 FNT资源拖动到当前的样式资源上以替换为新的资源。除此之外也能通过按钮控件的右键菜单添加新的资源。修改FNT字体文本时只需选中控件,在属性区修改 文本属性,也可以通过“菜单-编辑文本”或双击唤出修改文本弹窗。
当您在输入框中输入了FNT中缺少的字符时,这些缺少的字符会被显示为空格。
6、进度条
通过进度条可以显示处理任务的速度、完成度,您可以设置进度条的样式。
在画布上添加一个进度条后,选择该进度条控件,在属性面板的特性部分会展示进度条控件当前的样式资源,您可以通过双击修改进度条控件的资源图,也可以将图片资源拖动到当前的样式资源上以替换为新的资源。除此之外也能通过进度条控件的右键菜单添加新的资源。
设置进度条的属性“类型”,分别设定为从左至右、从右至左,通过修改进度条方向可以在游戏中实现对战时生命值的展示。
7、滑动条
滑动条可以设置滑动进度,滑块样式式等,用户可通过移动滑动滑动条在相应的控件中显示对应的值
滑动条多用于设置某些连贯属性上,如在很多程序中的设置界面设置音量等。
设置一个进度条,您需要以下五个资源,他们分别用于设置滑动条的背景样式、内部进度条样式、滑块正常样式、滑块按下样式、滑块禁用样式,每一种状态都可以通过图片来定义。
在画布上添加一个滑动条后,选择该滑动条控件,在属性面板的特性部分会展示滑动条控件当前的样式资源,您可以通过双击修改滑动条控件的属性,也可以将图片资源拖动到当前的样式资源上以替换为新的资源。
除此之外也能通过滑动条控件的右键菜单添加新的资源。
8、艺术数字
可以通过一张包含“./0123456789”的PNG图片实现艺术数字的效果,每个字符的高为图片的高,宽为图片的1/12,通过艺术数字可以实现艺术化效果的数字,能够简单有效的丰富游戏的视觉效果。和FNT字体相比,艺术数字具有以下特性:
① 制作方便,FNT字体制作复杂,而艺术数字较简单
② 可用资源少,艺术数字仅支持“.”、“/”、“0-9的数字”
在画布上添加一个艺术数字后,选择该艺术数字控件,在属性面板的特性部分会展示控件当前的图片资源缩略图,您可以通过双击缩略图修改控件的图片资源,也可 以将图片资源拖动到当前的样式资源上以替换为新的资源。除此之外也能通过艺术数字控件的右键菜单添加新的资源。修改按钮文本时只需选中按钮,在属性区修改 文本属性,也可以通过“菜单-编辑文本”或双击唤出修改文本弹窗。
特别说明
制作艺术数字时需要游戏美术设计人员提供一张包含了“.”、“/”、“0-9的数字”的图片,确保顺序为./0123456789,且按照图片宽度进行12等分能够分割出各个独立的数字。
三、容器
1、基础容器

基础容器可以设置子容器布局、是否裁切子元素、填充颜色、背景图片资源等属性。
基础容器一般使用作布局管理,比如用户名称,钻石和金币可使用了基础容器,以保证相对布局的统一。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
您可以为基础容器填充两种类型的背景色:纯色背景、渐变背景。您可以选择单色并设置背景的不透明度;当您选择渐变背景时,需要设置起始颜色和结束颜色,并且可以为这两个颜色分别设置不透明度。
在画布中选中控件后右键,您可以添加所有类型控件作为他的子控件。
2、列表容器
列表容器是一个能够自动排列控件的容器。
注意:当一个控件被添加到列表容器后,它的坐标将无法修改。
列表容器常被用于游戏中关卡列表等具有列表效果的场景中。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
列表容器实现列表效果只需要为列表容器添加子控件,通过设置列表滚动方向、子控件对齐方式、子控件间隔等属性可以决定列表容器对子控件布局的影响从而实现横向或纵向滚动的列表。
3、翻页容器
翻页容器是一个具有翻页效果的容器,只能添加基础容器。
翻页容器常被用于游戏中背包等具有翻页效果的场景中。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
翻页容器实现翻页效果实际上是为其添加基础容器子控件,然后在子控件中设置内容,最后在实际运行中,翻页容器会自动将自己与子控件统一使用。要添加子控 件,你在画布中选中控件后右键进行添加,或者手动将基础容器作为翻页容器的子控件,值得注意的是您只能添加基础容器作为他的子控件。
当一个控件被添加到滚动容器后,它的坐标、缩放、旋转、锚点、尺寸都会恢复默认并无法修改,也无法修改这个控件的布局方式。
4、滚动容器
滚动容器可以实现触屏上的滚动效果,能够设置滚动区域、滚动方向等属性。
滚动容器可用来制作关卡的地图背景,比如将关卡背景设置为3个屏幕高度大小,实际运行中,用户可以上下滑动屏幕来查看整张地图。
当容器上的控件有超出容器的部分时,可以通过属性“裁切内容”使超出部分将被隐藏,不予显示。
滚动内容尺寸不能比容器尺寸小,容器可选择滚动方向:水平、垂直、水平与垂直。
当滚动容器滑至屏幕边界时,继续滑动,界面会有一个反弹效果。为达到这一效果,您只需要勾选滚动容器控件的属性“回弹效果”,系统就会为您在游戏中实现这个效果。
四、自定义控件
Armature控件可支持导入1.x版本的Cocos Studio动画编辑器所制作的动画控件。 您可以使用Armature控件实现在Cocos Studio v2.x中添加动画内容的功能,并控制当前的动画列表以及播放状态。并在编辑器中预览动画。
您可以为Armature控件导入制作好的动画导出文件(ExportJson文件):
① 从资源面板拖动文件至Armature控件的文件属性,松开鼠标即实现文件导入;
② 在属性面板的“特性”中,点击“导入文件”按钮,选择文件导入;
③ 在画布中选中Armature控件右键选择“设置Armature文件”,选择文件导入。
您可以为Armature控件设置当前的动画列表,可以指定Armature控件循环播放动画或指定Armature控件是否在创建游戏时自动播放。
五、UI布局
自动布局系统主要涉及固定与拉伸属性:
gif001.gif

如图,总共可以修改控件的上下左右四个图钉和中间的两个拉伸条六个属性。
1.当打开其中的任意一个图钉时,当前节点与父节点的对应边的距离即被固定。当父节点的大小修改时,当前节点与父节点对应边的距离总是不变。
gif002.gif

2.当打开其中的任意两个相对的图钉时,当前节点与父节点对应的两边的距离成固定比例。即当修改父节点的大小时,当前节点到父节点对应两条边的距离之比总是不变的。
gif003.gif

3.当开启中间任意一条拉伸条,如横向拉伸条,节点的宽度与父节点的宽度之比固定不变。
gif004.gif

其他
  1. 不开启上述任意属性时,对象默认相对左下角位置不变。
  2. 当前仅控件对象(文本、FNT字体也没有)和容器两种类型有拉伸条属性。
六、九宫格使用
使用九宫格能够帮助您节约大量资源空间。
九宫格用法:
(1) 在属性面板勾选开启使用九宫格功能(部分控件不具备该属性)
(2) 编辑器默认将九宫格的数值设置为资源的1/3,您也可以根据资源的尺寸属性,设置九宫格数值(如距左10像素,就是指控件从最左侧开始10像素内的图像不失真,若同时设置上下左右均为10像素,则不失真图像呈“回”字形)。
设置九宫格的方法有三种:
① 直接在输入框内输入数值;
② 在输入框中通过鼠标滚轮滚动改变;
③ 通过拖拽九宫格内部的四条线改变。
(3) 修改控件尺寸至您需要的大小即可。
九宫格原理:
九宫格是一种能够使本来拉伸后会变形的图片,经过一定的处理后,拉伸后不变形的技术。 九宫格放大时四个角的四个切片向四个方向延伸,到达新的位置,然后上下两边的切片水平拉伸,左右两侧的切片垂直拉伸,中间的位图放大铺满剩余区域。
在Cocos Studio中可以定义需要确保不失真的上下左右边距,将剩余部分拉伸。需要注意的是,只有当用户选择包含九宫格功能的控件,并启用九宫格时资源图片才能实现九宫格效果。
 
官方帮助文档地址:
http://www.cocos.com/doc/
对本文以上工具简述有不理解,或有想学习更多Cocos知识的同学,地址已给出,希望对你们有帮助!

 
banner图.jpg cocos.jpg
已邀请:
李雷 2016-03-25 10:36
很好的教程 多谢楼主分享
印玲丽 2016-07-28 10:54

要回复文章请先登录注册