cocos2d-x 界面编程一（cocostudio GUI的初级使用）

本来想写点网络的东西，但是好像网络的东西还是服务端要求学习的内容比较多，所以最近也开始学习使用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这种东西真好……）

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