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

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

1、打开软件

2、新建项目

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

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

3、导入UI资源

可以导入文件或文件夹

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

4、制作背景

到此背景层添加完毕

5、添加捕鱼达人的图标

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

6、添加开始按钮

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

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

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

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

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

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

UI编辑器的更多相关文章

  1. Cocos2d-x 3.2 学习笔记(十三)CocoStudio UI编辑器 by 保卫萝卜

    关于编辑器部分研究的不多,但基本能使用.最近时间不是很多,因此写blog的次数越来越少了.自从玩了<保卫萝卜>时候一直想要写一下,同时练下手感.基本的结构已经写的差不多了,主要完善写UI和 ...

  2. 超棒的 15 款 Bootstrap UI 编辑器

    自从 2011 年 Mark Otto 和 Jacob Thornton 开发了  Bootstrap,我们第一次接触并熟知了 Bootstrap .这些都归功于  Twitter!从那以后,它就非常 ...

  3. CocoStudio UI 编辑器的使用

    详细教程:http://www.cocoachina.com/bbs/read.php?tid=161567 Table of Contents 1 游戏中的 UI 1.1 基于 Cocos2d-x ...

  4. 使用 CocoStudio UI 编辑器实现《乱斗堂》设置界面

    由于是引用别人的,所以直接贴上地址了.http://www.cocoachina.com/bbs/read.php?tid=164820&fpage=7 1 游戏中必不可少的 UI 元素    ...

  5. laya的UI编辑器

    //加载一个图集 Laya.loader.load("res/atlas/comp.json",Handler.create(this,this.onLoaderComp), Ha ...

  6. Bootstrap-Other:UI 编辑器

    ylbtech-Bootstrap-Other:UI 编辑器 1.返回顶部 1. Bootstrap UI 编辑器 以下是 15 款最好的 Bootstrap 编辑器或者是在线编辑工具. 1. Boo ...

  7. cocostudio ui编辑器 使用心得

    1 c++包含路径 2九宫格设置 cocostudio ui编辑器设置九宫格x,y,w,h是从图片左上角开始测量,然后调整尺寸就行了. 2.  如果点了自适应  panel会在加载json的时候被设置 ...

  8. [使用经验]cocostudio UI编辑器的裁剪

    日志-2015/03/16 描述:在程序使用UI编辑器导出文件的时候,该panel中大于panel的部分都没有显示出来,例如人物,一些特效等 原因:UI编辑器panel都勾上了裁剪 解决:在编辑器中把 ...

  9. 四款免费好用的Bootstrap ui编辑器

    Bootstrap带来了设计革命,本文介绍的四种免费Bootstrap在线设计工具,可视化所见所得设计网页,然后输出Html/CSS代码,其中有些甚至可以实现拖曳,也有可以设定自己的主题模板Theme ...

随机推荐

  1. Android 属性动画 源码解析 深入了解其内部实现

    转载请标明出处:http://blog.csdn.net/lmj623565791/article/details/42056859,本文出自:[张鸿洋的博客] 我参加了博客之星评选,如果你喜欢我的博 ...

  2. Reverse Words in a String | LeetCode OJ | C++

    我的思路:先读取每一个单词,存放到容器中:读取完毕后,将容器中的单词倒序写入输出中. #include<iostream> #include<string> #include& ...

  3. android一个页面上多个listview

    android一个页面上多个listview,在滚动的时候,需要两个listview能够一起滚动,看起来是一个view. 这个功能的具体实现,参考: http://blog.csdn.net/xia2 ...

  4. js动态向页面中添加表格

    我们在实际开发中经常会想要实现如下情况: 点击某个按钮,然后动态的网页面里面添加一个表格或者一行,这个更加灵活方便.但是实现起来肯定不能像在页面里面直接写标签来的容易,以下是我项目中的代码,拿过来分享 ...

  5. eclipse中使用maven插件的时候,运行run as maven build/clean的时候报错

    -Dmaven.multiModuleProjectDirectory system propery is not set. Check $M2_HOME environment variable a ...

  6. shapefile 编码错误问题解决 Wrong codepage of shapefile Warning 1: One or several characters couldn't be converted correctly from UTF-8 to ISO-8859-1.

    linux下运行,因为大部分shapefile 文件,在使用时都没有指定字符集,所以qgis只能从环境变量中获取设置环境变量中获取SHAPE_ENCODING. 目前唯一的解决办法就是设置环境变量 $ ...

  7. Study notes for Sparse Coding

    Sparse Coding Sparse coding is a class of unsupervised methods for learning sets of over-complete ba ...

  8. Java 螺纹第三版 第三章数据同步 读书笔记

    多线程间共享数据问题 一.Synchronizedkeyword      atomic一词与"原子"无关,它以前被觉得是物质的最小的单元,不能再被拆解成更小的部分.      当 ...

  9. Eclipse用法和技巧二十:一个快速打印技巧

    调试的时候经常用到打印语句,当需要添加的说明字符串和需要打印的数值混淆到一起的时候,需要先写字符串如,"the string here is",接着再输入变量的值.这样一来一去还是 ...

  10. this小记

    this小记 太久没有研究底层的js相关,今晚差点被紫红爸爸上课了. 正题 var net=new Object(); //定义一个全局变量net net.AjaxRequest=function(u ...