[Widgets] CheckBox

Adding A CheckBox

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

Selecting The CheckBox

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

Changing The CheckBox

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

You can also set whether or not the CheckBox is selected by default.

Accessing The CheckBox In Code

CheckBox's can be accessed via their Name or Tag which can be set in the Properties section.

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

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

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

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

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

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

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

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

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

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

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

void selectedEvent( Ref *sender, cocos2d::ui::CheckBox::EventType type );

// this is the object that was cast to a checkbox
checkBox->addEventListener( CC_CALLBACK_2( ClassName::selectedEvent, this ) );

// this is called when the user interacts with the checkbox
void ClassName::selectedEvent( Ref *sender, cocos2d::ui::CheckBox::EventType type )
{
    switch (type)
    {
        case cocos2d::ui::CheckBox::EventType::SELECTED:
            // code for when the checkbox has been clicked and is now selected (binary 1)

      			break;
            
        case cocos2d::ui::CheckBox::EventType::UNSELECTED:
            // code for when the checkbox has been clicked and is now not selected (binary 0)
      
            break;
            
        default:
            
            break;
    }