cocos2d-x 基础系列 (10) UI组件基础

最新推荐文章于 2018-11-03 15:06:36 发布

火车上遇见

最新推荐文章于 2018-11-03 15:06:36 发布

阅读量743

点赞数

分类专栏： coco2d-x 文章标签： cocos2d-x

本文链接：https://blog.youkuaiyun.com/WAN_EXE/article/details/68747021

版权

coco2d-x 专栏收录该内容

17 篇文章

订阅专栏

这篇博客介绍了如何在cocos2d-x中添加UI组件，包括按钮的使用，尽管遇到按钮图片不显示的问题，但终端有反馈。此外，还探讨了功能良好的复选框，它在反复点击时表现良好，以及可自由拖动的slider。然而，文本框似乎无法交互。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

向scene中添加一个按钮

// button
    auto button = Button::create("Button_Normal.png", "Button_Press.png",
                                 "Button_Disable.png");
    button->setTitleText("Button 1");
    button->setPosition(Vec2(visibleSize.width/2, visibleSize.height - 170));


    auto rabbit4 = Sprite::create("origin_red.png");
     rabbit4->setPosition(400,400);
     rabbit4->setVisible(false);
     scene->addChild(rabbit4, 4);
    button->addTouchEventListener([& rabbit4](Ref *sender, Widget::TouchEventType type) {
        switch(type) {
            case ui::Widget::TouchEventType::BEGAN:
                break;
            case ui::Widget::TouchEventType::ENDED:
                log("cout");
                break;
        }
    });
    scene->addChild(button);

向lambda表达式中传递参数失败，不知道怎么做。

还有怎么不显示按钮的图片，有点搞不懂.

不过终端有输出。

    // checkbox
    auto checkbox = CheckBox::create("CheckBox_Normal.png",
                                     "CheckBox_Press.png",
                                     "CheckBoxNode_Normal.png",
                                     "CheckBox_Disable.png",
                                     "CheckBoxNode_Disable.png");

    checkbox->setPosition(Vec2(visibleSize.width / 2, visibleSize.height - 400));

    checkbox->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
        switch (type)
        {
            case ui::Widget::TouchEventType::BEGAN:
                break;
            case ui::Widget::TouchEventType::ENDED:
                std::cout << "checkbox 1 clicked" << std::endl;
                break;
            default:
                break;
        }
    });

    scene->addChild(checkbox);

这个checkbox还不错。

反复点时两种情况。

 // loadingbar
        auto loadingBar = LoadingBar::create("LoadingBarFile.png");
        loadingBar->loadTexture("LoadingBarFile.png");
        loadingBar->setPercent(20.0);
        loadingBar->setDirection(LoadingBar::Direction::LEFT);
        loadingBar->setPosition(Vec2(visibleSize.width / 2, visibleSize.height - 400));

        scene->addChild(loadingBar, 1);

        loadingBar->schedule([loadingBar](float f){
            if (loadingBar->getPercent() < 100.0)
            {
                loadingBar->setPercent(loadingBar->getPercent() + 10.00f);
                std::cout << "LoadingBar percent: " << loadingBar->getPercent() << std::endl;
            }
            else
            {
                loadingBar->unschedule("update_loading_bar");
                std::cout << "Loading complete!" << std::endl;
            }
        }, 0.5f, "update_loading_bar");

这个也看上去不错，已经走完的效果。

slider看上也不错，可以自由拖动。

// slider
    auto slider = Slider::create();
    slider->loadBarTexture("Slider_Back.png"); // what the slider looks like
    slider->loadSlidBallTextures("SliderNode_Normal.png", "SliderNode_Press.png", "SliderNode_Disable.png");
    slider->loadProgressBarTexture("Slider_PressBar.png");
    slider->setPosition(Vec2(visibleSize.width / 2, visibleSize.height - (++index) * 40));
    
    slider->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
        switch (type)
        {
            case ui::Widget::TouchEventType::BEGAN:
                break;
            case ui::Widget::TouchEventType::ENDED:
                std::cout << "slider moved" << std::endl;
                break;
            default:
                break;
        }
    });

    scene->addChild(slider);

文本框什么也不能动。

            scene->addChild(slider);

            // textfield
                auto textField = TextField::create("TextField - Edit Me", "Marker Felt.ttf", 30);
                textField->setPosition(Vec2(visibleSize.width / 2, visibleSize.height - 550));

                textField->setMaxLength(10); // max number of chars user can enter

                textField->addTouchEventListener([&](Ref* sender, Widget::TouchEventType type){
                    std::cout << "editing a TextField" << std::endl;
                });

                scene->addChild(textField);