Cocos2d-x Network Programming Connect PHP Server Note 3

The previous section of the server has been developed, and this section begins the client part development, first of all UI authoring.

UI Authoring

Since it is login verification, of course, there must be a login interface, UI at least like a game look at it I do not want to use the basic control, just use Cocostudio to make a bar, Cocostudio has a standard login interface is as follows:

I use the latest version of the Cocos (v2.2.8), of course, you can export JSON files directly with cocostudio1.6, but it is not so convenient. If you're using it for the first time, the C + + project that you want to use to build VS2012 needs to first download a Cocos Framework v3.6 in the store. We launch cocos-> new Project Logindemo, select the login example in the template, it will automatically open Cocostudio show this interface. In Cocostudio we want to put some important controls to life, in the program used, such as User name input box to change to Txtuser, such as:

Other important controls also have the password input box named Txtpass, the login login button renamed to Btnlogin, logout button loginout no matter, we add a registration button Btnregister, Add a result that shows the success of the login label Txtresult type is text, which can be published after the resources, select "Project", "Publish and package" release type "Visual studio project" such as:

Next to the Set button point go in the Format data format for CSB, publish content for publishing resources and project files, such as:

OK, click OK to publish, so that UI production is finished, we will go to the path created by the previous project can open vs Engineering, code it!

VS Engineering part--single-machine experiment first of all we do not want to worry about how to network, because the Internet has always been a error-prone, in order not to fight our confidence or the first part of the run up, White is able to display the login interface, but Cocos+vs has helped us to complete we can a code without writing, The automatically generated code is as follows:

BOOL Helloworld::init () {    //////////////////////////////    //1. Super init first    if (! Layer::init ())    {        return false;    }        Auto RootNode = Csloader::createnode ("MAINSCENE.CSB");    AddChild (RootNode);    return true;}

Directly compiled and run to see the interface, from the code to see the loading UI part is really much simpler than the previous version of Cocos2d-x 3.1. When we export the resource, we export two CSB one is MAINSCENE.CSB another is the login body LOGIN.CSB, loading that LOGIN.CSB is not OK also did not try. But of course this is not possible, we have to take out the user name and password input box content, but also to get those button control, we declare these member variables in the HelloWorldScene.h:

private:cocos2d::ui::textfield* Txtuser;  User name input box cocos2d::ui::textfield* txtpass;  Password cocos2d::ui::text* lblresult;  Result label cocos2d::ui::button* Btnregister; Registration button cocos2d::ui::button* Btnlogin;  Login button void onbtnloginclicked (Cocos2d::ref *psender, cocos2d::ui::widget::toucheventtype type); Login click void onbtnregclicked (Cocos2d::ref *psender, cocos2d::ui::widget::toucheventtype type); Register Click

Then we find a way to remove the control in the CSB, there are two ways one is based on the tag, one is based on the name, the official standard implementation method, as follows: 1. Recursively remove the control we want by tag:

Node* Helloworld::seeknodebytag (node* root, int tag) {if (!root) {return nullptr;} if (Root->gettag () ==tag) {return root;} Get all children under root const auto& Arrayrootchildren = Root->getchildren (); ssize_t length = Arrayrootchildren.size (); for (ssize_t i=0; i<length; i++) {//Remove a child node under root node* children = dynamic_cast<node*> (arrayrootchildren.at (i)); if (child) {node* res = Seeknodebytag (child, tag),//under child recursively find the tag node if (res!=nullptr) {return res;  Found the}}}return nullptr;}

2. Remove the control by name

Recursively look for a node node* helloworld::seeknodebyname (cocos2d::node* root, const std::string& name) under root under the name tag {if (!root) {return nullptr;} if (root->getname () = = name) {return root;} Get all children under root const auto& Arrayrootchildren = Root->getchildren (); for (auto& Subwidget:arrayrootchildren) {//Remove a child node under root node* = dynamic_cast<node*> (Subwidget); {node* res = Seeknodebyname (children, name) ; Recursively searching under child for the name node if (res! = nullptr) {return res;   If found, return it}}}return nullptr;}

Well, with the tool function, we can take out the control, in the bool Helloworld::init () method above in Addchild (RootNode), and add the following code:

Txtuser = dynamic_cast<textfield*> (This->seeknodebyname (RootNode, "Txtuser")); Txtpass = dynamic_cast< Textfield*> (This->seeknodebyname (RootNode, "Txtpass")); Lblresult = dynamic_cast<text*> (this-> Seeknodebyname (RootNode, "Txtresult")) Btnlogin = dynamic_cast<button*> (This->seeknodebyname (RootNode, " Btnlogin ")); Btnregister = dynamic_cast<button*> (This->seeknodebyname (RootNode, "Btnregister"));lblresult-> SetString (""); Btnlogin->addtoucheventlistener (Cc_callback_2 (helloworld::onbtnloginclicked, this)); Login button Associated Click event Btnregister->addtoucheventlistener (Cc_callback_2 (helloworld::onbtnregclicked, this)); Register Button Association Click event

Ok so get the controls out! In order to experiment whether we really take out the control and write the following experiment code in the Login button response event:

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 () = = "")  //user name is null prompt {lblresult-> SetString ("User is empty"); if (txtpass->getstring () = = "")//Password box is null hint {lblresult->setstring ("Pass is empty"); Lblresult->setstring ("Click Login Btn"); Prompting the user to click on login}break;case cocos2d::ui::widget::toucheventtype::canceled:break;default:break;}}

Write the switch a lot but these branches are necessary, if you do not write this will appear the button press execute click Code, release button and then executed again click Code these we do not want to see the results, good compile run click on login, the red result tag will prompt us "click Login Btn ", so the standalone part of the experiment succeeded!

Cocos2d-x Network Programming Connect PHP Server Note 3