Cocos2d-x3.0游戏实例之《别救我》第五篇——使用Cocostudio UI编辑器创建操作界面

笨木头  2014-05-2 20:39   3.0游戏实例《别救我》,Cocos2d-x,Cocos2d-x3.0   阅读(17,680)   39条评论

 

 

这一篇内容其实很简单,已经对Cocostudio比较熟悉的朋友就可以随便扫一下了~(小若:熟悉Cocostudio的人谁还有空看你的基础教程呢)

 

笨木头花心贡献,啥?花心?不呢,是用心~

转载请注明,原文地址:http://www.benmutou.com/archives/892

文章来源:笨木头与游戏开发

 

下载Cocostudio

首先,去官网下载最新版的Cocostudio:http://www.cocos2d-x.org/download

我这篇教程使用的版本是V1.3.0.1,它同一个版本还有3个分支,大家随便选择一个分支吧:

Cocos2d-x3.0游戏实例之《别救我》第五篇-截图-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-截图-Cocostudio

 

 

那个,大家还是选择V1.3.0.1 + Cocos2D-X 3.0那个分支吧~原因?可能它比较顺眼吧~(小若:我噗)

好吧,从上到下,三个分支分别作用如下:

1. 纯Cocostudio工具集

2. 包含Cocos2d-x 2.2.3 源码的Cocostudio工具集,支持直接用Cocostudio创建Cocos2d-x工程

3. 包含Cocos2d-x 3.0 源码的Cocostudio工具集,支持直接用Cocostudio创建Cocos2d-x工程

用Cocostudio直接创建Cocos2d-x工程我也没试过,就不误导大家了~

 

安装很简单,没有什么要注意的,大家随意~

 

打开UI编辑器

OK,现在运行Cocostudio程序,出现这样的界面:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

选择第二个,“UI Editor”,这就是我们要用的UI编辑器。

 

开始创建操作界面

好了,UI编辑器的功能还是不少的,一篇教程是讲不完的(而且我也没有完全掌握它的全部功能),本篇教程就通过一个很简单的UI来介绍一下编辑器的基本用法吧。

 

新建项目

首先新建项目,我们命名为OprUI吧:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

 

然后找到左上角的这个地方:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

我们设置一下画布大小,这个理论上是随大家喜欢的,根据自己的UI来设置大小就可以了(注意不要超过范围,导致UI没法在游戏中完全显示)~

但是我个人习惯是,设置成游戏的设计分辨率大小,这样比较方便,大家永久了就有自己的习惯了。

 

OK,我们设置画布为480*800:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

然后Ctrl+S,保存一下…(话说为什么要保存一下?不知道…习惯性动作而已)

 

导入素材

本篇教程图片素材下载地址:http://download.csdn.net/detail/musicvs/7392931

好,现在导入一下UI要用到的素材,直接把图片用鼠标拖动到UI编辑器最右边的资源视图就可以了,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

 

创建按钮

OK,别忘了我们最初的目的:创建三个操作按钮,分别对应主角的三种操作。

找到UI编辑器最左边的控件栏,然后找到按钮控件,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

可能不太好发现,我稍微多用了一两个箭头,大家仔细找找(小若:七个箭头,它是不是跟你有仇…你是不是怨念太深了啊喂)

 

好,鼠标点击然后拖动这个按钮控件到画布上,然后,按钮就创建好了,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

设置按钮图片

好,这个蓝色的按钮很好看,我很喜欢,所以我们要抛弃它(蓝色按钮:啊咧?)

 

选择这个按钮,然后我们会看到右边的属性视图里有一大坨属性,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

 

这些属性大部分都能顾名思义,我们先来关注一下用圈圈圈起来的那两个属性:

1. 名字:这个名字很重要,通过这个名字,我们可以在代码中找到这个控件对象

2. 正常状态:这个就很难顾名思义了,其实它的意思是“按钮正常状态的图片”

 

好,我们给按钮的名字设置为“rightBtn”,然后修改按钮正常状态的图片,方法很简单,把之前导进去的图片资源,选一张,然后拖到“正常状态”属性栏里就可以了。

如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

 

本来上面这张图片我想做成一个gif动画的,那样就更加生动了~但是由于一些原因,所以我没有那么做。(小若:懒就懒啊,还解释什么啊)

 

然后就会发现,按钮图片已经改变了。

后面的“按下状态”、“禁用状态”就先忽略吧。

 

完成所有按钮

按照刚刚介绍的方法,我们创建好3个按钮,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

三个按钮的名字属性分别为:leftBtn、rightBtn、quickMoveBtn。

(小若:等等,为了那个箭头可以左右两边都有啊?不是只有一张箭头图片么?)

 

一张箭头图片却创建了不同方向的按钮,那是因为,按钮有一个属性,叫做“水平翻转”,大家自己找找~

 

导出配置文件

OK,一个完美的UI诞生了(小若:啊咧,放屁!)

是时候导出这个UI了,先Ctrl+S保存一下,一定不要忘了保存(因为习惯性动作)。

 

然后Ctrl+E导出UI,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

(我噗,好复杂)

 

大家按照上图那样选择就好了,保存路径自己选~

导出使用大图,意思就是把图片打包成一张大图。

 

然后,到刚刚导出的文件夹,我们会看到三个文件:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

ExportJson就是UI配置文件,后面两个是图片文件。

把这三个文件复制到我们游戏项目的Resources目录下,就直接根目录吧,先不考虑目录结构了~

 

现在,我们要在代码中使用UI文件了~

 

导入Cocostudio相关的库

在使用UI文件之前,我们要给项目工程添加Cocostudio的库,如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

在项目解决方案上右键,添加现有项目,找到Cocostudio工程,再如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

OK,点击“打开”确定。

 

如果你和我一样,用的是VS2013,那就要升级一下(没有这个选项的那就不用升级),如图:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

然后用同样的方式添加GUI库以及Extensions库:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

然后再点击一下生成项目,然后新添加的库编译一下。

这里提醒一下,最好【重新生成】项目,然后整个工程编译一遍,因为我刚刚就遇到一个很奇怪的问题,UI加载之后老是错位。找了大半天,结果重新生成之后,这个问题就消失了。

 

如果你发现编译有问题,有些头文件找不到的话,那按照下图修改一下项目的附加包含目录:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

 

如果你又发现编译出错,出现外部链接库错误的话,那就按照下图添加链接库引用:

5.21

 

在代码中使用UI文件

好了,终于把前奏搞定了,现在,给TollgateScene添加一个函数:


1
2
3
4
5
6
7
8
9
/* 创建操作UI */
void createOprUI();

函数实现如下:
void TollgateScene::createOprUI()
{
    auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("OprUI_1.ExportJson");
    this->addChild(UI);
}

好,运行一下,是不是看到UI出现了?

(小若:没有!编译报错了,魂淡!)

 

没错,如果你不报错的话,那就神奇了。因为我们还没有加上一些必备的头文件:

#include “cocostudio/CocoStudio.h”

using namespace cocostudio;

 

加上之后,编译运行,我们就可以看到如下图的效果:

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

Cocos2d-x3.0游戏实例之《别救我》第五篇-Cocostudio

OK,这就是最简单的创建UI和加载UI的方式了。

 

啊,对了,之前我不是说下方那个锯齿是伏笔么~现在就解开这个伏笔了~

因为,最下面要放三个按钮,所以锯齿只能放在那个位置了~

解开悬念之后是不是好有快感。(啊个屁啊)

 

这篇内容好像有点长,那,关于如何让按钮点击之后产生效果,我们就放到下一篇来讲解吧。

 

39 评论

  1. 我编译之后弹出错误框,是怎么回事?
    Program: …_not_save_meproj.win32Debug.win32libcocos2d.dll
    File: F:rpgCocosdo_not_save_mecocos2dextern…/document.h
    Line: 839

    Expression: false

    For information on how your program can cause an assertion
    failure, see the Visual C++ documentation on asserts

    (Press Retry to debug the application – JIT must be enabled)
    0x102617BC (libcocos2d.dll) (do_not_save_me.exe 中)处的第一机会异常: 0xC0000005: 读取位置 0x00000000 时发生访问冲突。
    0x102617BC (libcocos2d.dll) (do_not_save_me.exe 中)处有未经处理的异常: 0xC0000005: 读取位置 0x00000000 时发生访问冲突。

  2. 木头哥,你说为什么用cocosstudio弄得UI的csb文件在电脑上按键可以被单击,但是编译下载到手机上就按键不能单击,单击放屁,还有左右移动都没有反应

      1. 刚刚只用cocos studio弄一个登陆界面,一个按键用来关闭场景,一个用来切换场景,下载到手机后,关闭的场景可以运行,但点击切换场景的时候,则停止运行了,可这些在电脑上切可以切换的,我直接就用了replaseScene(),不回手机内存问题?

          1. 木头哥,突然又遇到了一个新的问题,就是把Apk下载到手机安装后,发现在手机显示的界面有两条线,这是什么音乐,不会在设置分辨率还有框的大小与背景图有冲突,还是手机在家问题,在电脑上没有看到这两条线

  3. Pingback: javascript download
  4. Pingback: Vanessa Smith
  5. 有个问题,我加好了库,加好了,引用,排除了错误后,运行,但图片并没有出来,而且在COCOSTUDIO中,那个箭头的显示也有问题,能帮我看看是什么原因吗?这是我截出来的问题图http://yunpan.cn/Qizvi9aRavtWg 访问密码 fdc5void TollgateScene::createOprUI(){ auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile(“NewUi_1.ExportJson”);// UI配置文件 this->addChild(UI);}代码应该也没问题啊。

      1. 你的项目里似乎只有OprUI_1.ExportJson这个文件 其它两个不知在哪,我的是完整版的工程

                    1. 才发现自己很白痴,原来之前忘记 了调用createOprUI 所以图片没有出来,(づ ̄3 ̄)づ ,然后我截了,在游戏里显示的情况,http://yunpan.cn/QT3myiNRsYFkN 访问密码 1149不知能不能看到,反正就是整个箭头都歪了,在cocosstudio里面就直接显示成一个三角形,非常奇怪

                    2. 然后我装回1.3,不用1.4版本,神奇的发现,拖进去后,图片没有问题了。。。。

  6. iversion 1201Get data from file(D:/cocos2d-x-3.0beta/projects/Testing/Resources/GUI/labelatlasimg.png) failed, error code is 3我的在auto UI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile(“mygameUI_1.ExportJson”);出现以上异常,这是怎么回事???

      1. iversion 1401Read design size error!Get data from file(D:/cocos2d-x-3.0beta/projects/Testing/Resources/GUI/labelatlasimg.png) failed, error code is 30x00CF46E1 处的第一机会异常(在 Testing.exe 中): 0xC0000005: 读取位置 0x00000034 时发生访问冲突。0x00CF46E1 处有未经处理的异常(在 Testing.exe 中): 0xC0000005: 读取位置 0x00000034 时发生访问冲突。

          1. 我就是按你的教程来的,添加了三个库,添加引用,再给工程的附加包目录加了一个cocossupport-editor和一个cocos(不加提示找不到guiUIButton等),然后加了头文件,复制你的那两句话,把文件名改成我的,结果就现在这样

发表评论

电子邮件地址不会被公开。 必填项已用*标注