Create Scene with Cocostudio and Import to Cocos2d-x project

Necessary Libraries

#include "cocostudio\CocoStudio.h"

#include "ui\UIButton.h"

#include "cocos2d.h"

Tools

- Cocostudio v2

Setup and Run

1. I will chose Login Demo on Cocostudio and create Project

2. Edit and publish  

As you see, I number 4 parts

1: there are resources and csb files, MainScene.csb you can chose it and run to view Scene

2: Login components, The Layer has 4 children (Image_1, Panel_1, Panel_1_0, CheckBox_1), Image_1 have 2 children Button_1, Button_2, ….

3: Name and type of object

4: CallBack Feature I named it "onLoginTouched"

Now I will publish it and handle button touch Events.

Go to: menu Project -> Publish and Package -> chose publish Resource -> OK

3. Import to cocos2d-x Project and add button Touch Events

Import library (on top)

#include "ui\UIButton.h"

#include "cocos2d.h"

Declare in *.h:
I will handle touch event of button Login

void touchEvent(cocos2d::Ref *pSender, ui::Widget::TouchEventType type);

in cpp file:

I print text “touch Event” on button’s Touch Began Event

void HelloWorld::touchEvent(cocos2d::Ref *pSender, ui::Widget::TouchEventType type)

{

    switch (type)

    {

    case cocos2d::ui::Widget::TouchEventType::BEGAN:

        if (((Button*)pSender)->getCallbackName() == "onLoginTouched")

            CCLOG("touch Event");

        break;

    case cocos2d::ui::Widget::TouchEventType::MOVED:

        break;

    case cocos2d::ui::Widget::TouchEventType::ENDED:

        break;

    case cocos2d::ui::Widget::TouchEventType::CANCELED:

        break;

    }

}

Then I will add Login Layer and set callback to button Login.

    auto layout = CSLoader::createNode("CSBFiles/login.csb"); //create Node

    this->addChild(layout); //add Node to Parent

    //The child Image contains 2 chilren

    auto img = layout->getChildByName("Image_1");

    auto btn = static_cast<Button*>(img->getChildByName("Button_1"));

   

    //My class is HelloWorld

    if (btn)

        btn->addTouchEventListener(CC_CALLBACK_2(HelloWorld::touchEvent, this));

- Login is a Layer and it contains 4 children as I said.

- First after add it to Parent I will get Child which contains two buttons, then I will get button Login and addTouchEventListener

4. Build and enjoy winning :D

- note: you must put folder Default and Login at Resources folder. or you can change link of resources at *.plist file at cocostudio project folder

Run project and Click on button Login and see output (Vistual Studio) 

Share on Google Plus

About Lộc Thọ

This is a short description in the author block about the author. You edit it by entering text in the "Biographical Info" field in the user admin panel.