UI编辑器

本篇教程通过制作捕鱼达人的启动界面来说明CocoStudio UI编辑器的用法。先看看效果图

UI编辑器_第1张图片

好了,下面一步一步的动手做吧!

1、打开软件

UI编辑器_第2张图片

2、新建项目

依次打开软件主界面左上角菜单栏的:“文件”-->“新建项目”,弹出窗口如下图

UI编辑器_第3张图片

输入项目名称和保存路径,点确定

3、导入UI资源

可以导入文件或文件夹

UI编辑器_第4张图片

成功导入后,在“资源”视图会列出导入的文件,由小图组成的大图(含.plist文件的图)会列出小图,大图直接不能使用,也不会列表中出现。

UI编辑器_第5张图片


4、制作背景

UI编辑器_第6张图片

UI编辑器_第7张图片

到此背景层添加完毕

5、添加捕鱼达人的图标

参照第4步添加一个控件,然后放到合适的位置。并命名为icon。需要注意的是在添加之前,请确定在对象结构视图选中的是Panel而不是background。否则添加的控件属于background的子空间。


UI编辑器_第8张图片

6、添加开始按钮


UI编辑器_第9张图片

再添加“开始游戏”按钮,这也是一个按钮控件。这个控件是属于startGame的子空间。

UI编辑器_第10张图片

7、添加“选择场景”按钮,方法参照第6步,我这里偷个懒,就不截图了。

8、最后一步当然是导出了。先保存工程“文件”-->“保存工程”。再导出工程,导出后的文件工场景编辑器使用。导出很简单。直接“文件”-->"导出项目"。弹出对话框

UI编辑器_第11张图片

默认就可以,其它选项可以自己试试,看看导出的文件有什么不同。

 

工程文件下载地址可以到我的资源下载里面找http://download.csdn.net/detail/fuyongbing1986/6225089。哈哈,放心不要积分哦。

下一篇将写怎样在场景编辑器中如何使用UI编辑器导出的文件。



 

你可能感兴趣的:(编辑器)