Problems when render checkbox from UI

[paulocoutinhox]

Hi,

I have problems when render checkbox from UI.

I buy these two images:

But when i use it for my checkbox and i select/click the checkbox it render the selected image with unselected image under it. See:

My code:

// Checkbox FlipX
auto flipXCheckbox = ui::CheckBox::create("cocosui/check_box_normal.png", "cocosui/check_box_active.png");
flipXCheckbox->setSelected(characterEntity->flipX);
flipXCheckbox->addEventListener([flipXCheckbox, characterEntity](Object*, ui::CheckBox::EventType type) {
    characterEntity->flipX = (type == ui::CheckBox::EventType::SELECTED);
    characterEntity->applyChanges();
});
addLabelAndComponent("Flip X", flipXCheckbox);

What im doing wrong or it is a bug?

Thanks.

[rh101]

It is not a bug, because it is being used incorrectly.

auto flipXCheckbox = ui::CheckBox::create("cocosui/check_box_normal.png", "cocosui/check_box_active.png");

You're using this signature of CheckBox:

/**
 * Another factory method to create a CheckBox instance.
 * This method uses less resource to create a CheckBox.
 * @param backGround The background image name in `std::string`.
 * @param cross The cross image name in `std::string`.
 * @param texType  The texture's resource type in `Widget::TextureResType`.
 * @return A CheckBox instance pointer
 */
static CheckBox* create(std::string_view backGround,
                        std::string_view cross,
                        TextureResType texType = TextureResType::LOCAL);

So, you're passing check_box_normal.png as the background image, so it's always going to be visible.

There is another create method, but I'm not sure if this would work for your case either:

/**
 * Create an checkbox with various images.
 *
 * @param backGround    backGround texture.
 * @param backGroundSelected    backGround selected state texture.
 * @param cross    cross texture.
 * @param backGroundDisabled    backGround disabled state texture.
 * @param frontCrossDisabled    cross dark state texture.
 * @param texType    @see `Widget::TextureResType`
 *
 * @return A CheckBox instance pointer.
 */
static CheckBox* create(std::string_view backGround,
                        std::string_view backGroundSelected,
                        std::string_view cross,
                        std::string_view backGroundDisabled,
                        std::string_view frontCrossDisabled,
                        TextureResType texType = TextureResType::LOCAL);

You may need to create custom UI component for the way that you want to use it.

[paulocoutinhox]

Hi,

I have created one class to simplify this:
https://github.com/paulocoutinhox/axmol-extensions

I called it "SimpleCheckBox":
https://github.com/paulocoutinhox/axmol-extensions/blob/main/Source/ui/SimpleCheckBox.h

To use is easy now:

        // checkbox
        auto checkbox = SimpleCheckBox::create("ui/CheckBoxNormal.png", "ui/CheckBoxActive.png");
        checkbox->setSelected(false);
        checkbox->setPosition(visibleSize / 2);
        checkbox->setScale(2.0f);
        checkbox->addEventListener([checkbox](Object*, ax::ui::CheckBox::EventType type) {
            if (type == ui::CheckBox::EventType::SELECTED)
            {
                AXLOGD("CheckBox is checked!");
            }
            else
            {
                AXLOGD("CheckBox is not checked!");
            }
        });

Web demo:
https://axext.netlify.app/

Thanks.