cocos2d-x 界面编程一(cocostudio GUI的初级使用)

原创 2013年12月26日 22:18:49

本来想写点网络的东西,但是好像网络的东西还是服务端要求学习的内容比较多,所以最近也开始学习使用thinkPHP框架,因此网络这块暂时也就写到这两篇吧。现在开始也要学习cocostudio了,这东西经过一段时间的发展,终于已经可以真正放心运用到项目中了,里面的UI相当强大,所以不学的话,界面设计这块的效率会低很多。

在最近的cocos2d-x版本中已经嵌入了cocostudio GUI,在工程里可以直接引用cocostudio相关的控件,想了解的话可以直接进新版本cocos2d-x的testCPP项目里运行extension中的各个cocostudioGUI项目,可以一个个浏览里面的控件……

虽然已经集成了这些cocostudio GUI,但是如果要控制这些控件元素的位置还是使用cocostudio编辑器靠谱,不过这里要说的使用方法并不是官方帮助文档中所介绍的加载方式,在我用的cocos2d-x2.21版本中,可以通过sceneReader来读取cocostudio编辑器导出的场景工程文件,通过GUIReader来读取编辑器导出的UI工程文件,当然还有很多其它相关元素的加载控制方法,所以并不需要再像以前一样去加载一次cocostudio的库。

首先是要进入cocostudio编辑器,进入UI编辑器,起始页里面会有几个示例工程,点击新建一个这样的工程,比如:登录界面,然后可以看到一个现成的登录界面已经设计好了,直接打开文件菜单,导出这个项目,把导出的项目文件全部copy到一个新建的cocos2d-x工程的资源文件夹里,这时不可以开始使用这个UI了,看下面的代码:

#include "HelloWorldScene.h"
#include "cocos-ext.h"
//cocostudioGUI被封装在了熟悉的cocosExt中,所以包含下这个文件 ,加个命名空间
USING_NS_CC;
//这里是在项目场景加载时就加入对应UI了
CCScene* HelloWorld::scene()
{
    // 'scene' is an autorelease object
    CCScene *scene = CCScene::create();
    
    // 'layer' is an autorelease object
    HelloWorld *layer = HelloWorld::create();
	//这里用了一个cocostudio的层
	UILayer *m_pUiLayer =UILayer::create();
       //在这里把UI元素加载进层中,可以看到这里使用了GUIReader,源代码里可以看到GUIReader返回的是一个UIWidget,这个UIWidget是从我们导出的UI项目所生成的Json文件加载进来的
	m_pUiLayer->addWidget(GUIReader::shareReader()->widgetFromJsonFile("DemoLogin.json"));
	
    // add layer as a child to scene
    scene->addChild(layer);
    //将界面加入场景
	scene->addChild(m_pUiLayer);
    // return the scene
    return scene;
}
这样运行工程后就可以看到一个登录界面,可以随意输入用户名和密码,勾选checkBox,按按钮等……这让我想起了cocos2d-x自带的editBox在win下让人有多不悦(这让我觉得有cocostudio这种东西真好……)

这个示例比较简单,就不传源代码了……

从零开始学习cocoStudio(2)--GUI学习

一、UI 框架的使用方法以及常用接口介绍 1.cocos2d-x 使用UI框架的步骤:     1)cocos2d-x 导入cocoStudio的UI编辑器文件(json)   ...
  • my183100521
  • my183100521
  • 2014年01月16日 14:49
  • 6068

Cocos2d-x 3.0 开发(四)使用CocoStudio创建UI并载入到程序中

本篇博客出自阿修罗道,转载请注明出处:http://blog.csdn.net/fansongy/article/details/12757411 1、概述     CocoStudio的使...
  • chinahaerbin
  • chinahaerbin
  • 2013年12月15日 22:45
  • 8964

cocostudio: GUIReader分析(1)

GUIReader分析(1): 1、GUIReader用于cocostudio所做UI界面导出json的解析, 并生成对应的UI元素。 GUIReader* GUIReader::shareReade...
  • tianxiawuzhei
  • tianxiawuzhei
  • 2015年05月12日 20:52
  • 2841

cocos2dx开发者指南:UI控件使用

综述 Cocos2d-x提供了一套易于使用的UI API来满足你的GUI需求,其中包括:Label、Menu、MenuItems、Buttons和Views。 Label(标签) C...
  • samrtian
  • samrtian
  • 2015年02月01日 07:55
  • 2061

cocos2dx-ui的分类与使用

cocos2dx-ui的分类与使用
  • han1558249222
  • han1558249222
  • 2015年08月30日 15:00
  • 1995

cocos2dx Button不是cocos2d::ui 的成员

Button不是cocos2d::ui 的成员
  • chenqiai0
  • chenqiai0
  • 2015年09月24日 18:05
  • 2448

cocos2d-C++ 学习UI控件(一)之 Button|CheckButton

最近在一家公司实习,自己就自学了cocos2dx,花了两个星期把cocos2dx-c++学了一遍,做了4个游戏。之后开始学习quick-cocos和cocos-lua,单当我在学的时候发现,自己其实存...
  • qq_16112417
  • qq_16112417
  • 2016年04月22日 16:58
  • 2857

【cocos2dx-3.2】调用cocostudio::GUIReader 提示不是命名空间

【cocos2dx-3.2】调用cocostudio::GUIReader 提示不是命名空间
  • yanxin007
  • yanxin007
  • 2014年11月12日 11:29
  • 1325

Cocos2d-x v3.1 GUI系统--环境构建(七)

Cocos2d-x v3.1 GUI系统--环境构建(七)         在使用Cocos2d-x的GUI系统时,由于生成的工程默认是没有将GUI系统所需的库导入到项目的,所以我们必须把库导入到工...
  • zw514159799
  • zw514159799
  • 2014年07月02日 20:57
  • 1654

跟着BOY学习开发cocos2d-x 游戏 实战篇(2)之 欢迎 界面编写

在这里我要道歉了本来我决定是每天更新一篇新的博客 可是 一放假 感觉就懒了 所以就没写了 今天 就把昨天的界面 给补上。              在这里我要说明一下 今天用到的主要知识点 按钮的使用...
  • wuyakenihao
  • wuyakenihao
  • 2013年07月13日 19:32
  • 5313
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:cocos2d-x 界面编程一(cocostudio GUI的初级使用)
举报原因:
原因补充:

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