Cocos Studio教程四:UI编辑器用户指引

Cocos Studio UI Editor User Guidehttp://upyun.cocimg.com/CocoStudio/course/coostudiov0.3.1.0_courses02.zip,1一、创建一个新的项目

点击菜单栏中的【文件】->【新建项目】(快捷键Ctrl+N)

在新窗口中设置项目名称(1)及保存的路径(2),设置完成后即可点击确定(3)

此时新的项目已经创建完成,我们来看一下UI Editor的结构

接下来我开始使用UI Editor开始之前确保模式选择为【普通模式】

一、图片控件的创建方法接下来从我们的UI控件栏中找到我们需要的控件并拖拽到画布内,我们先添加一个使用的最多的【图片控件】,图片控件在控件栏的底部

拖拽到画布后我们可以看到如下的界面

CocoStudio为我们的控件提供一个默认图像,我们可以将他替换为自己需要的图片,步骤如下: 1:在资源窗口中选择第一个图标

     在资源管理器中找到我们需要的资源  <img title = '20130813035.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_48/48_183396_0f34308e50b055f.png' > 

打开后我们可以看到资源窗口中已经有我们添加的图片资源了

接下选中我们刚才添加的图片控件,使图片控件处于选中状态(如下图)

打开属性窗口,并将窗口拉伸到足够的宽度以显示完整的属性列表,然后将资源窗口中的图片资源拖拽到文件属性栏

此时我们可以看到我们的画布中的图片控件已经显示的是我们想要的效果了。接下来我们可以对这个控件进行一些调整操作了。

每个控件处于选中状态时都会有五个操作点,其中1、2、3、4都是用来调整大小的,5是用于旋转控件的,我们可以随意操作调整。比如这样:

二、按钮控件的创建方法首先找到按钮控件,将其拖拽到画布上,并调整大小

每一个按钮通常情况下有三个状态”普通”、”按下”、”禁用”,我们也就需要为此分别配置图片资源。配置图片和图片的配置相似,只需将资源图拖拽到相应的属性就好,效果如下

但是作为需要在程序中有响应的控件,我们还需将属性中 【交互】勾选上,这一点是非常重要的!

三、自定义字体的创建找到自定义字体控件,并拖拽到画布中

自定义字体是一种利用贴图资源创建的字体,目前支持的是fnt格式,它由两个文件组成.fnt和一个对应的.png。在这里推荐大家使用GlyphDesigner(Mac OS)制作。软件界面如下:

上图就是自定义文字,是不是很漂亮呢?我们找到该图对应的.fnt文件并拖拽到属性中,如下图:

接下来我们在文本属性框中输入我们想要显示的文字内容:

此时我们可以看到我们画布已经显示了我们想要的文字

不过它太大了,我们还需要调整它的大小。调整大小分两种方式: i. 通过直接拖拽控件的控制点来调整

  ii.     通过修改属性 <img title = '20130813055.png' src='http://cdn.cocimg.com/bbs/attachment/Fid_48/48_183396_4f789d5d72de1ef.png' > 

     但是不管用何种方式,它们都是关联的。四、滚动层控件的创建滚动层是一种层容器,其本身并没有什么特殊效果,但是我们可以往其中添加很多的控件,这种只占用很小的位置显示很多的东西的控件在小屏幕的移动设备上是非常有价值的。首先找到控件栏找到滚动层控件,并拖拽到画布中。

这个控件空空的什么都没有,这个时候我们就需要向里面添加一些其他的控件,添加方法有两种,一种是选择滚动层点击鼠标右键,选择【添加子控件】我们可以看到新弹出来了一个列表,这个列表几乎涵盖了我们说有的控件。 我们添加一个简单的图片控件。

添加后可以看到滚动层中会新增一个图片,此时我们注意对象结构窗口,我们新添加的图片是在ScrollView的下一级别中的

这样,这个图片控件已经添加到滚动层了,还有一种方法是利用现有的控件在对象结构中我们可以找到我们之前创建的控件,并将其拖拽到ScrollView上,这样就可以将现有的控件添加到滚动层中了。我们可以将之前的自定义文本拖拽进来看一下效果。

为了看到效果,我们将ScrollView 的裁剪属性打开

对比打开裁剪之前的,我们可以看到他的具体效果是什么样的了,游戏中滚动层是不绘制超出区域的内容的。

五、保存项目为程序可用的资源选择【文件】->【导出项目】
默认会导入到当前项目中的Export文件夹中,我们可以修改到我们需要的地方。

六、小结以上的这些都是一些比较有特点的控件,基本掌握了以上的控件的创建方法,其他的控件也基本没问题了。

我怎么导出来的就只有一个json文件??:12:

你是不是没保存直接导出呢?

我想请问一下楼主大大,按钮控件回调的代码该怎么弄?

首先要在编辑器里勾选“交互”,然后还需要在代码中获取这个button,然后添加事件。

代码参考:

UIWidget *uw=ul->getWidgetByTag(3);
uw->addTouchEventListener(this,toucheventselector(UserInterfaceLayer::testButtonCallback));

uw即button,你也可以强制转化为UIButton。

:6:问题已解决…感谢版主回复

恭喜恭喜~:14::14::14::14:

请问怎样将按钮设置成禁用状态并显示禁用状态栏中拖入的图片

你好,目前我们还未提供该功能,所以还需要在程序中手动修改状态。

手动修改应该调用哪个方法?

button->setBright(false);
button->setTouchEnabled(false);

需要同时调用这两个方法。

明白了 谢谢

继续学习中,呵呵

请教一下版主~~~可以直接关闭整个UI容器层的事件响应么? 我现在UI容器层上有三个界面,想用隐藏的方式互相切换,但是被隐藏的容器层也在响应点击,拖动等事件。求教一下>.< 非常感谢!

现在的解决方案有两种
1:遍历指定层所有节点(包括子节点)同时设置不可见、不可触摸。不过这个有个问题就是很难恢复状态,你需要记录所有的状态。
2:将不需要的界面移动到屏幕外,使其不可见。(推荐)
可以根据自己的项目来选择一下

感谢~明白了~

我在Xcode下面,监测触摸的按钮回调事件,出现了 Thread 1:EXC_BAD_ACCESS(code=2, address=0x50) 的错误,这个你们还有遇到过,怎么解决的啊?

— Begin quote from ____

引用第5楼hanrea于2013-11-06 17:07发表的 回 4楼(284505873) 的帖子 :
首先要在编辑器里勾选“交互”,然后还需要在代码中获取这个button,然后添加事件。

代码参考:

http://www.cocoachina.com/bbs/job.php?action=topost&tid=161578&pid=847864

— End quote

我在Xcode下面,监测触摸的按钮回调事件,出现了 Thread 1:EXC_BAD_ACCESS(code=2, address=0x50) 的错误,这个你们还有遇到过,怎么解决的啊?

我的代码如下:

tbLogin->addTouchEventListener(this, toucheventselector(Hello::tbLoginCallback));

支持lz。学习了基本使用了。 Thinks…

顶一个,,给了我很大的帮助。希望继续。。我将持续关注。