Cocos Learning notes--check box checkbox and its control properties

A. Button introduction

Game development Sometimes we will use the Checkbox,checkbox is the check box, you should have seen the check box, it has two states, a tick state, a non-tick state, We can use a checkbox to switch between the two states to achieve a number of specific functions, such as whether the game off the sound and so on.

The checkbox is the same as other controls provided by Cocos, and we can create and set related properties in Cocos Studio for use in code Engineering or in code engineering. The checkbox class provides methods related to check boxes that inherit from the Widget class:

The next step is to take a look at the check box, which is exactly how the checkbox is created and used:

Two. Create a CheckBox control from Cocosstudio

First create an empty project with the Cocos engine and open it with Cocos Studio. We want to create a CheckBox control and drag the CheckBox control directly from the space bar on the left into the currently edited interface. However, as mentioned in the previous blog, when using these controls, it is common to create a panel base container and then add the control to the underlying container so that we can get the underlying container in the code and then get the control and manipulate it through the Panel base container. This is done to facilitate game adaptation by controlling the panel.

We can set its related properties in the CheckBox control's property bar. For example, the background style of the image binding, that is, the appearance of the check box, as well as the identity of the style of the picture binding, which refers to the check box of the "tick" of the picture, in addition to the default check box can also set the status.

After creating the CheckBox control in Cocos Studio, we need to save and publish the project, which is described in my previous blog.

Then, with VS open the project we just created and run it, we can see the checkbox we created in the scene in Cocos Studio:

You can see that the checkbox has two states, the default is check status, and then click to switch to unchecked status:

Three. Create a checkbox directly from the code

In addition to using the CheckBox control created by Cocos Studio, we can create a checkbox in code directly using the Create () method, and can set its related properties:

Create a checkbox//parameter by creating () Method: 1. check box Picture 2. Tick the picture auto _newcheckbox = checkbox::create ("Checkbox_background.jpg", " Checkbox_cross.jpg ");//Set the position of the checkbox    _newcheckbox->setposition (VEC2 (200, 200));//Set checkbox to click  _ Newcheckbox->settouchenabled (false);//Gets Check status of CheckBox//selected True when checkbox is selected, FALSE does not auto bool Selected  = _newcheckbox->getselectedstate () addChild (_newcheckbox);

Four. Add a callback function to the checkbox

The checkbox is interactive, and we can bind it to a callback function:

1. First to add a namespace:

using namespace Cocos2d::ui;

2. then declare and implement the callback function:

//Declaration checkbox callback function void Checkboxcallback (Cocos2d::ref * Ref, Cocos2d::ui::checkbox::eventtype type);//implement CheckBox callback function void HelloWorld:: Checkboxcallback (Cocos2d::ref * Ref, Checkbox::eventtype type) {switch (type) {case Cocos2d::ui::checkbox::eventtype:: Selected:log ("selected!"); Break;case Cocos2d::ui::checkbox::eventtype::unselected:log ("unselected!"); Break;default:break;}} 

eventtype When the check box is clicked, this callback method is executed, and this parameter is passed with the 2 selected and un

3. finally , the CheckBox is obtained through the panel and the callback function is bound to it:

Get the Base container panel layer Auto _panel = (Layout *) rootnode->getchildbyname ("Panel_1");//Get Checkboxauto _checkbox by panel ( checkbox*) Helper::seekwidgetbyname (_panel, "checkbox_1");//Bind callback function _checkbox->addeventlistener (CC_CALLBACK_2 ( Helloworld::checkboxcallback,this));

When the check box is checked, click to switch to non-tick state, eventtype==unselected,

Print out the following:

When the check box is not checked, click to toggle to select the state, eventtype==selected,

Print out the following:

Above.

Cocos Learning notes--check box checkbox and its control properties