cocosStudio的使用-01-使用UI编辑器导出的文件

原创 2014年08月25日 16:16:55

cocosStudio还是cocoStudio?疑问

       本菜鸟自学cocos2dx已有半年了,一直从CSDN上扒教程,老大不够意思,现在写下自己的一些心得,希望对别人有帮助。大笑

 

           Cocos Studio这个东西功能不多,对码农来说摸索一下也就会了,也有很多前辈写过这工具的教程了,我们直接从使用导出的文件开始。今天先讲UI编辑器。

      我用的是最新的1.6版本,cocos2dx 是 3.2版本,新版本的资料有点少,总该有人摸索····毕竟新版本有3D骨骼动画了

     

            UI编辑器的全部控件:

       所有的控件都有tag、name两个属性,我们在UI编辑器中编辑好的一些对象,要在代码中进行操作就需要用这两个属性获取他们。

           导出的文件会放入一个文件夹中,我们在画布区域新建的不同画布会导出到不同的文件夹。

画布将NewUi_1导出

文件夹中的内容

大家可以新建一个画布,随便拖几个控件导出文件试下。

下面我们就在cocos2dx中使用这些文件:

新建一个工程,

1.首先添加附加包含目录

这里面有与cocosStudio相关的头文件,使用时还要注意具体路径。

2.添加并引用项目文件:

将这三个项目添加到解决方案,并引用:

3.包含以下头文件 

#include "cocostudio/CocoStudio.h"
#include "ui/CocosGUI.h" 

用到的命名空间:

using namespace cocostudio;
using namespace ui;

 

准备工作完成,可以敲代码了。

直接进init方法,加载UI文件

 //DemoUI
 auto widget= dynamic_cast<ui::Layout*>(GUIReader::getInstance()->widgetFromJsonFile("NewUi_1/NewUi_1.json"));
 auto layer = ui::Layout::create();
 layer->addChild(widget);
 this->addChild(layer);

这段代码就能看出CocosStudio的基本使用方法了

用GUIReader加载文件,使用dynamic转化为ui控件下的控件类对象,再进行使用。

例如,要使用一个Button,可以先为它设置好名字或者tag

//Binding Button
Button * buttonL = dynamic_cast<Button*>(widget->getChildByName("ButtonL"));
Button * buttonR = dynamic_cast<Button*>(widget->getChildByName("ButtonR"));

if (buttonL != NULL&&buttonR != NULL)
 {
    buttonL->addTouchEventListener(this, toucheventselector(HelloWorld::DemoCallback));
    buttonR->addTouchEventListener(this, toucheventselector(HelloWorld::DemoCallback));
 }

因为这些对象都是通过dynamic只能转化获得的,使用前最好检测下是否为空。

以下是一些UI控件和对象的对应关系:

按钮 - ui::Button

Panel - ui::Layout

文本框 - ui::Text

图片 - ui::ImageView

滚动视图 - ui::ScrollView

等总结好后,我会整理的,暂时只了解这么多。

运行图:

版权声明:本文为博主原创文章,如转载请保留原地址链接。

Cocos2d-JS 事件处理机制

事件处理机制中的三个角色 在Cocos2d-JS引擎时间处理机制中也有这3个角色。 1.事件 事件类是cc.Event,它的类图如图8-1所示,它的子类有cc.EventTouch(触摸事件)、...

细说Cocos2d-JS——序

作为热爱Cocos2d-JS的一份子,我觉得我应该贡献自己的一份力量,将自己的经验分享给大家。我自认为自己并不是什么Cocos2d-JS的高手,分享的经验也许有很多不当之处,还望大家共同讨论,共同进步...

Cocos2d-x 3.9教程:10.使用CocosStudio的UI编辑器从UI文件中加载布局和控件

Cocos2d-x 3.9教程 10. 使用CocosStudio的UI编辑器从UI文件中加载布局和控件 1.1. 使用CocosStudio的UI编辑器 1.1.1. 安装和启动 从...

cocos2dx3.1使用cocosStudio V1.5.0.0 UI编辑器,并导入

一 创建并导出工程     1).打开UI Editor,新建工程               2). 编辑          3.导出工程           二 导入到c...
  • iasxk
  • iasxk
  • 2014年07月02日 15:16
  • 951

关于cocos2dx3.0版本,导入cocosStudio UI编辑器的json文件

最近用cocos2dx 3.0版本的时候,会遇到

Cocos2d-x 3.0final 终结者系列教程23CocosStudio UI组件使用大全Cocos2d-x3.2使用

按钮UIButton 复选框UICheckBox 滑块UISlider 图片UIImageView 进度条UILoadingBar 纹理文本 UITextAtlas 字体文本 UIText 图片字体文...
  • sdhjob
  • sdhjob
  • 2014年08月19日 14:30
  • 11100

cocos2dx 3.0 使用cocosStudio中UI界面,导入到程序中并使用。

使用cocosStudio拼界面就不在这里提及了,由于

CocosStudio(三)导出UI

又是崭新的一天,阳光明媚,多云不转晴,最近都是上班在写博客(闲的),闲的时间总要找事做。人活着就是要做有意义的事,什么是有意义的事,有意义的事就是活着(电视剧《士兵突击》里的主人公许三多说的)。女朋友...

Cocos2d-lua(四)加载CocosStudio导出的UI界面

在实际开发游戏时,会使用大量的工具来辅助我们快速开发游戏。比如:CocosStudio,TiledMap(地图编辑器),Particle Builder(粒子编辑器),TexturePacker(图...

Cocos2d-x 3.1.1 学习笔记(一)关联程序逻辑与CocosStudio导出文件

项目开始启动,Team leaer要求我
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocosStudio的使用-01-使用UI编辑器导出的文件
举报原因:
原因补充:

(最多只允许输入30个字)