本篇教程通过制作捕鱼达人的启动界面来说明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. NodeJS用Express建立project

    1.通过下面命令建立站点基本结构: <span style="margin: 0px; padding: 0px; font-family: Verdana, Arial, Helve ...

  2. ant—学习记录一

    <?xml version="1.0"?> <project name="helloWorld"> <target name=&q ...

  3. Python 第二篇:python字符串、列表和字典的基本操作方法

    本文基于python 3.5.1 python常见的数据类型有字串.列表.元组.字典等,本文将详细介绍每一种数据类型的操作方法. 一:str字串的操作方法: 1.capitalize()-->  ...

  4. 我的Python成长之路---第一天---Python基础(5)---2015年12月26日(雾霾)

    六.流程控制 与C语言不通的事Python的流程控制的代码块不是用{}花括号表示的,而是用强制缩进来,而且缩进必须一致,官方推荐是使用4个空格,不建议使用使用tab(制表符)做缩进,一是不同的系统ta ...

  5. zookeeer 集群和伪集群模式

    环境变量设置: # .bash_profile # Get the aliases and functions if [ -f ~/.bashrc ]; then . ~/.bashrc fi # U ...

  6. 用ATL写简单的ActiveX控件 .

    我正在做的项目需要用读卡器来读数据,由于系统是B/S架构的所以只能把读卡器的驱动封装成一个无界面的ActiveX控件,这样web页面中的js代码才能访问读卡器其实做起来也挺简单的,我用的环境是VS20 ...

  7. OGR 官方文档

    OGR 官方文档 http://www.gdal.org/ogr/index.html The OGR Simple Features Library is a C++ open source lib ...

  8. MySQL中的空间扩展

    目录 19.1. 前言 19.2. OpenGIS几何模型 19.2.1. Geometry类的层次 19.2.2. 类Geometry 19.2.3. 类Point 19.2.4. 类Curve 1 ...

  9. Linux OpenCV读取视频失败,cvCreateFileCapture失败的解决

    背景: 近期想在嵌入式平台上开发QT+Opencv,无料PC机上编写的OpenCV程序老是打不开视频. 開始提示:OpenCV Error: Bad argument (Array should be ...

  10. Unity3d 帧率设置 及在游戏执行时显示帧率

    在Unity3d 中能够通过代码设置 来限定游戏帧率. Application.targetFrameRate=-1; 设置为 -1 表示不限定帧率. 转自http://blog.csdn.net/h ...