Cocos2d-x network programming connection php server Notes 3

Cocos2d-x network programming connection php server Note 3 Last section of the server part has been developed, this section began client part of development, first is the UI production.

UI creation

Since it is login verification, of course there must be a login interface, the UI should at least look like a game. here I don't want to use basic controls, so I should use cocostudio to create one, cocostudio has a standard logon interface as follows:

For the sake of convenience, I used the latest version of Cocos (v2.2.8). of course, you can use cocostudio1.6 to export the json file directly, but this is not convenient. If you want to use it for the first time to build the C ++ project of VS2012, you must first download a Cocos Framework v3.6in the store. we will start cocos-> create a project LoginDemo, select the login example in the template, and it will automatically open cocostudio to display this interface. In cocostudio, we want to use some important control life-saving words in the program. for example, change the user name input box to txtUser, for example:

Other important controls are also named txtPass in the password input box, and the Login button is renamed btnLogin. the logout button is useless. let's add the registration button btnRegister, add a result label txtResult type that shows whether the logon is successful or not. after all this is done, you can release the resource, select "project"> "publish and package". The release type is "Visual Studio project", for example:

Click the setting button next to it to set the data format to csb, and the published content to publish resources and project files, for example:

Click confirm release. after the UI is created, we can open the VS project and encode it in the path created in the previous project!

VS Engineering-standalone experiment

First, we should not worry about how to connect to the Internet, because the network has always been an error-prone player. in order not to attack our self-confidence, we should start running the standalone part first, to put it bluntly, we can display the logon interface, but Cocos + VS has already helped us to complete a code without writing it. 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 compile and run the interface can be seen, from the code to see the UI part of the load is indeed much simpler than the previous cocos2d-x version 3.1. When exporting resources, we export two CSBS. one is MainScene. csb, and the other is Login. csb, which is the logon subject. can I load that Login. csb? I have not tried it. But of course this won't work. we need to retrieve the user name and password input box and get the Button controls. let's declare these member variables in HelloWorldScene. h:

Private: cocos2d: ui: TextField * txtUser; // User name input box cocos2d: ui: TextField * txtPass; // password cocos2d: ui: Text * lblResult; // result tag cocos2d: ui: Button * btnRegister; // The registration Button cocos2d: ui: Button * btnLogin; // The logon Button void onBtnLoginClicked (cocos2d :: ref * pSender, cocos2d: ui: Widget: TouchEventType); // log on and click void onBtnRegClicked (cocos2d: Ref * pSender, cocos2d: ui: Widget :: touchEventType type); // register and click

Then we can find a way to retrieve the control in csb. There are two methods: one is to retrieve the control based on the tag, and the other is to retrieve the control based on the name. The official team provides the standard implementation method as follows:

1. recursively retrieve the desired control based on the tag:

Node * HelloWorld: seekNodeByTag (Node * root, int tag) {if (! Root) {return nullptr;} if (root-> getTag () = tag) {return root ;} // get all the children under the root account const auto & arrayRootChildren = root-> getChildren (); ssize_t length = arrayRootChildren. size (); for (ssize_t I = 0; I
 
  
(ArrayRootChildren. at (I); if (child) {Node * res = seekNodeByTag (child, tag); // recursively searches for the tag Node if (res! = Nullptr) {return res; // found }}return nullptr ;}
 

2. retrieve the control by name

// Recursively search for the Node * HelloWorld: seekNodeByName (cocos2d: Node * root, const std: string & Name) {if (! Root) {return nullptr;} if (root-> getName () = name) {return root ;} // get all the children under the root account const auto & arrayRootChildren = root-> getChildren (); for (auto & subWidget: arrayRootChildren) {// retrieve a child Node under root * child = dynamic_cast
 
  
(SubWidget); if (child) {Node * res = seekNodeByName (child, name); // Recursively search for name Node if (res! = Nullptr) {return res; // if it is found, return it }}return nullptr ;}
 

With the tool function, we can retrieve the control. in the above bool HelloWorld: init () method, add the following code to addChild (rootNode); below:

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 )); // Click the event btnRegister-> addTouchEventListener (CC_CALLBACK_2 (HelloWorld: onBtnRegClicked, this) in the logon button link; // Click the event associated with the registration button.
     
    
   
  
 

OK!

In order to test whether the following experiment code is actually taken out of the control, write it in the response event of the logon button as follows:

Void HelloWorld: onBtnLoginClicked (cocos2d: Ref * pSender, cocos2d: ui: Widget: TouchEventType) {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 () = "") // prompt {lblResult-> setString ("User is empty"); break;} when the User name is empty ;} if (txtPass-> getString () = "") // The password box is empty. {lblResult-> setString ("Pass is empty"); break ;} lblResult-> setString ("click login btn"); // you are prompted to click "logon"} break; case cocos2d: ui: Widget: TouchEventType: CANCELED: break; default: break ;}}

A large number of switches are written, but these branches are necessary. if you do not write this code, a button will appear and click execute to execute the code, after the undo button is released, Click the code again and we don't want to see the Result. after compilation and running, Click "log on". The Red Result tag will prompt "Click login btn ", in this way, some standalone experiments are successful!