上节服务器部分已经开发完，本节开始客户端部分开发，首先是ui制作。
ui制作 既然是登录验证那当然要有登录界面，ui起码也要像个游戏样子吧这里我不想用基本控件，就用cocostudio制作一个吧，cocostudio里有一个标准的登录界面如下：
为了图省事我用最新版的cocos制作的(v2.2.8)当然你直接用cocostudio1.6导出json文件也可以，但是没有这样方便。如果你第一次使用，想用它来建立vs2012的 c++工程需要先在商店里下载一个cocos framework v3.6. 我们启动cocos->新建项目logindemo，在模板里选择登陆示例，它就自动打开cocostudio显示出这个界面了。在cocostudio我们要把一些重要控件命个命字，好在程序里使用，如用户名输入框改成txtuser,如下图：
其他的重要控件还有密码输入框命名为txtpass, 登录login按钮改名为btnlogin, 登出按钮loginout没什么用不管，我们再加个注册按钮btnregister，再加个显示登录成功与否的结果标签txtresult 类型为text, 这一切作好后就可以发布资源了，选择“项目”->“发布与打包” 发布类型为“visual studio工程”如下图：
旁边的设置按钮点进去设置数据格式为 csb格式，发布内容为发布资源与项目文件，如下图：
好了点击确定发布吧，这样ui制作就算完成了，我们就到之前项目创建的路径可以打开vs工程，进行编码吧！
vs工程部分--单机实验 首先我们不要急着想如何联网，因为网络一向是个易出错的玩艺，为了不打击我们的自信心还是先把单机部分跑起来吧，说白了就是能把登录界面显示出来，但cocos+vs已经帮我们完成了我们可以一句代码不用写,自动生成的代码如下：
bool helloworld::init(){ ////////////////////////////// // 1. super init first if ( !layer::init() ) { return false; } auto rootnode = csloader::createnode(mainscene.csb); addchild(rootnode); return true;}
直接编译运行就可以看到界面了，从代码看加载ui部分确实比以前cocos2d-x 3.1版简单好多。我们导出资源时导出了两个csb一个是mainscene.csb另一个是登录主体login.csb，加载那个login.csb是不是也行呢没试过。但这样当然是不行的，我们要取出用户名和密码输入框的内容，还要得到那几个button控件，我们就在helloworldscene.h里声明这几个成员变量吧：
private: cocos2d::ui::textfield* txtuser; //用户名输入框 cocos2d::ui::textfield* txtpass; //密码 cocos2d::ui::text* lblresult; //结果标签 cocos2d::ui::button* btnregister; //注册按钮 cocos2d::ui::button* btnlogin; //登录按钮 void onbtnloginclicked(cocos2d::ref *psender, cocos2d::ui::widget::toucheventtype type); //登录点击 void onbtnregclicked(cocos2d::ref *psender, cocos2d::ui::widget::toucheventtype type); //注册点击
然后我们想办法取出csb里的控件，有两种方式一是根据tag取，一个是根据name取，官方给出了标准实现方法，如下： 1.以递归方式根据tag取出我们想要的控件：
node* helloworld::seeknodebytag(node* root, int tag){ if (!root) { return nullptr; } if (root->gettag()==tag) { return root; } //获取root下所有的孩子 const auto& arrayrootchildren = root->getchildren(); ssize_t length = arrayrootchildren.size(); for (ssize_t i=0; igetname() == name) { return root; } //获取root下所有的孩子 const auto& arrayrootchildren = root->getchildren(); for (auto& subwidget : arrayrootchildren) { //取出root下的一个孩子结点 node* child = dynamic_cast(subwidget); if (child) { node* res = seeknodebyname(child, name); //在child下递归寻找name名字结点 if (res != nullptr) { return res; //找到了，就返回它 } } } return nullptr;}
好了有了工具函数了我们就可以取出控件了，在上面 bool helloworld::init()方法中在addchild(rootnode);下面加上下面代码：
txtuser = dynamic_cast(this->seeknodebyname(rootnode, txtuser)); txtpass = dynamic_cast(this->seeknodebyname(rootnode, txtpass)); lblresult = dynamic_cast(this->seeknodebyname(rootnode, txtresult)); btnlogin = dynamic_cast(this->seeknodebyname(rootnode, btnlogin));; btnregister = dynamic_cast(this->seeknodebyname(rootnode, btnregister)); lblresult->setstring(); btnlogin->addtoucheventlistener(cc_callback_2(helloworld::onbtnloginclicked, this)); //登录按钮关联单击事件 btnregister->addtoucheventlistener(cc_callback_2(helloworld::onbtnregclicked, this)); //注册按钮关联单击事件
ok这样就把控件取出了！ 为了实验下是不是我们真的取出控件了写下列实验代码，在登录按钮响应事件里这样写：
void helloworld::onbtnloginclicked(cocos2d::ref *psender, cocos2d::ui::widget::toucheventtype type){ switch (type) { case cocos2d::ui::widget::toucheventtype::began: break; case cocos2d::ui::widget::toucheventtype::moved: break; case cocos2d::ui::widget::toucheventtype::ended: { if(txtuser->getstring()==) //用户名为空提示 { lblresult->setstring(user is empty); break; } if (txtpass->getstring()==) //密码框为空提示 { lblresult->setstring(pass is empty); break; } lblresult->setstring(click login btn); //提示用户点击了登录 } break; case cocos2d::ui::widget::toucheventtype::canceled: break; default: break; }}
写了switch一大堆但这些分支都是必要的，你要是不这样写会出现按钮按下执行点击代码，松开按钮又执行了一遍点击代码这些我们不希望看到的结果，好了编译运行点击下登录，那个红色的result标签会提示我们click login btn ，这样单机部分实验成功！