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文件夹中,我们可以修改到我们需要的地方。 
六、小结以上的这些都是一些比较有特点的控件,基本掌握了以上的控件的创建方法,其他的控件也基本没问题了。






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