[Widgets] Button

Adding A Button

Drag a Button from the Widgets section onto the middle canvas.

Selecting The Button

You can select the Button if it isn't already selected from the Animation Editor at the bottom. The Button doesn't appear in the resources as it's part of the Scene or other object that you are using.

Changing The Button

You can change the properties of the Button in the Properties section. Setting the images can be done by double clicking on a state or dragging an image from the Resources section.

A font file can also be set as the button doesn't just allow images but text on top of the image.

Accessing The Button In Code

Buttons can be accessed via their Name or Tag which can be set in the Properties section.

To access the Button from a scene for example, in code it is simple. You either access it as a Node or cast it to a Button allowing you to use Button methods along with Node methods.

Node *rootNode = CSLoader::createNode( "Filepath to .csb file" );
this->addChild( rootNode );

// button accessed as a node using it's name
Node *button = rootNode->getChildByName( "Name set in Cocos Studio" );

// button cast to a button using it's name
cocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByName( "Name set in Cocos Studio" );

// button accessed as a node using it's tag
Node *button = rootNode->getChildByTag( 5 );

// button cast to a button using it's tag
cocos2d::ui::Button *button = ( cocos2d::ui::Button * )rootNode->getChildByTag( 5 );

var rootNode = ccs.load( "Filepath to .json file" );
this.addChild( rootNode.node );

// get the button by name
var button = rootNode.node.getChildByName( "Name set in Cocos Studio" );

// get the button by tag
var button = rootNode.node.getChildByTag( 5 );

Note: Cocos2d-JS doesn't require casting to use Button methods.

ATM the Button does nothing, we need to attach an event listener so we can detect when the user has interacted with the Button.

void touchEvent( Ref *sender, Widget::TouchEventType type );

// this is the object that was cast to a button
button->addTouchEventListener( CC_CALLBACK_2( ClassName::touchEvent, this ) );

// this is called when the user interacts with the button
void ClassName::touchEvent( Ref *sender, 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:
            
            break;
            
        case cocos2d::ui::Widget::TouchEventType::CANCELED:
            
            break;
            
        default:
            break;
    }
}

// this is the object that retrieved in the previous code block
button.addTouchEventListener( this.touchEvent, this );

//this is called when the user interacts with the button
touchEvent: function(sender, type)
{
		switch (type)
    {
    case ccui.Widget.TOUCH_BEGAN:
        break;

    case ccui.Widget.TOUCH_MOVED:
        
    		break;

    case ccui.Widget.TOUCH_ENDED:
        
      	break;

    case ccui.Widget.TOUCH_CANCELLED:
        
      	break;                
    }
}