Cocos2dx 3.0 simple use of CocoStudio UI Editor

Think about it. Now my junior year is almost over, and my experience in the interview is almost 0.00.(Wait, why not zero)Well, we have been there for one or two times, but we are so angry that the company is launching training in the guise of being a young man. It's so hateful, if it weren't for the small front desk that we had received at the beginning, it would be pretty nice. It looked sweet, gentle, and cute. I would just ....(What can I do!)

Okay, chrysanthemum yesterday(Who is chrysanthemum ?)I said that some companies are coming to our school for recruitment. I'm so excited as soon as I hear it. I am doing something related to the bottom layer of c ++. In any case, I have to try it out, haha .... then, you know, the company that Mr. Deng was a former company,That's right, it's the company that gives you 1000 yuan a month and deducts hundreds of dollars, and then gives it to you a few months later!Some of c's functions are mainly algorithms. I don't think this is a pitfall. The best thing is the algorithm. Haha, after talking about it, the cainiao's level is exposed. Well, it's a bit far away ......

------------------------------------------------------------------------------

Back to question

Today, I read an article about cocostudio in tairan. Well, the usage of 2. x and 3.0 is a little different. Haha, then I am shameless to use this material.

First, firstDownload CocoStudioAnd install it.

Then download the imageClick here to download,After the download, open CocoStudio. You can select four editors,Open UI Editor.

Create a Test project, and drag the downloaded image resource to the project.Resource PanelAs shown below

 

Well, let's see the figure below. A canvas is almost the same as a Layer. There is an object structure under the canvas, that is, there is a magic horse in the Layer, you can set the canvas resolution, and then add various controls on the canvas, such as Shenma button and check box. You can drag them directly on the left, for example, below,You can see the button in the middle. That is, the button circled with a yellow color, corresponding to the "T button" control on the left,The right side isButton name (important) and image resource status (normal, press, disable), Note that,If you want the control to be clicked, You need to hook up the Interaction.

As shown in the following figureOne background image + one character image + four buttons above + four buttons below, Easy to add

Now, click "Change Password" on the first button. A Password box needs to be displayed and a canvas Test_2 is added.

3 buttons + 3 images + 3 input boxes (added to images)

Export after adding,Adding all images to a png Image

The exported items are long like this.

Then copy these files to the resource.

The next step is to load and use it in the Code. Note:You must add the cocostudio library and Gui library, as well as the header file.

#pragma once #include "cocos2d.h"#include "cocostudio/CocoStudio.h"#include "ui/CocosGUI.h"using namespace cocos2d;using namespace cocostudio;using namespace ui;class CocosStudioTest : public Layer{public:CocosStudioTest(){}~CocosStudioTest(){}virtual bool init();CREATE_FUNC(CocosStudioTest);void btnEvent_pwd(Ref *pSender, TouchEventType type);void btnEvent_close(Ref *pSender, TouchEventType type);void btnEvent_confirm(Ref *pSender, TouchEventType type);private:Widget* UI;Widget* UI_2;Button* btn_pwd;Button* btn_close;Button* btn_confirm;};

Cpp File

#include "CocosStudioTest.h"bool CocosStudioTest::init(){if(!Layer::init()){return false;}//uiUI = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosUI/Test_1.ExportJson");this->addChild(UI);//button pwdbtn_pwd = static_cast<Button*>(ui::Helper::seekWidgetByName(UI,"btn_pwd"));btn_pwd->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_pwd));//ui_2UI_2 = cocostudio::GUIReader::getInstance()->widgetFromJsonFile("cocosUI/Test_2.ExportJson"); UI_2->retain();//button closebtn_close = static_cast<Button*> (ui::Helper::seekWidgetByName(UI_2,"Button_15"));btn_close->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_close));//button confirmbtn_confirm = static_cast<Button*> (ui::Helper::seekWidgetByName(UI_2,"btn_confirm"));btn_confirm->addTouchEventListener(this,toucheventselector(CocosStudioTest::btnEvent_confirm));}void CocosStudioTest::btnEvent_pwd(Ref *pSender, TouchEventType type){switch (type){case TouchEventType::TOUCH_EVENT_ENDED:this->addChild(UI_2);}}void CocosStudioTest::btnEvent_close(Ref *pSender, TouchEventType type){switch (type){case TouchEventType::TOUCH_EVENT_ENDED:this->removeChild(UI_2);}}void CocosStudioTest::btnEvent_confirm(Ref *pSender, TouchEventType type){switch (type){case TouchEventType::TOUCH_EVENT_ENDED:this->removeChild(UI_2);}}

Run it. Haha.

Well, this is probably the case.