Search code examples
scrollviewcocos2d-x

Cocos2d-x scroll ScrollView while pressing button


using cocos2d-x-3.13.1

I have create ScrollView with 88 buttons to start different in game levels.

Functionality i have: User can starts selected level. But only can scroll if initial tap position is not on button.

Functionality i want: User can scroll a ScrollView if his initial touch position is on button.

Creating ScrollView

containerLayer = cocos2d::LayerColor::create();
containerLayer->setContentSize(Size(visibleSize.width, visibleSize.height * 4.5));
containerLayer->setPosition(Point(0, -visibleSize.height * 3.7));

auto scrollView = cocos2d::extension::ScrollView::create();
scrollView->setContentSize(Size(containerLayer->getContentSize().width, containerLayer->getContentSize().height));
scrollView->setPosition(Point(visibleSize.width * 0.05, visibleSize.height * 0.05));

// set the scroll-direction for scroll-view
scrollView->setDirection(cocos2d::extension::ScrollView::Direction::VERTICAL);

scrollView->setViewSize(Size(visibleSize.width * 0.90, visibleSize.height * 0.8));

// set the content offset of the scrollview
scrollView->setContentOffset(Vec2(0, 0));

scrollView->setTouchEnabled(true);

// add / set the container-layer to the scrollview.
scrollView->setContainer(containerLayer);

// add scroll-view to your scene-layer.
this->addChild(scrollView, 100);

Adding buttons

int level = 1;
const Size buttonSize(100,50);

for (int h = 0; h < 22; h++) {

    for (int w = 0; w < 4; w++) {

        const Color4B buttonColor(random(0, 255), random(0, 255), random(0, 255), 255);
        auto button = ui::Widget::create();
        button->setContentSize(buttonSize);
        button->setPosition(Point(containerLayer->getContentSize().width * 0.15 + this->getContentSize().width * 0.2 * w, containerLayer->getContentSize().height - containerLayer->getContentSize().height / 23 * (h + 1) + containerLayer->getContentSize().height / 46));
        button->setTouchEnabled(true);
        button->addClickEventListener([=](Ref* _sender)
                                      {
                                          auto scene = GameScene::createSceneWithLevel(level);
                                          Director::getInstance()->replaceScene(TransitionFade::create(1.0, scene, Color3B(0, 0, 0)));
                                      });
        button->addChild(LayerColor::create(buttonColor, buttonSize.width, buttonSize.height));
        scrollView->addChild(button);

        level++;
    }
}

Solution

  • Instead of cocos2d::extension::ScrollView I used cocos2d::ui::ScrollView, cocos2d::ui::Button and it met my requirements for ScrollView.

    scrollView = cocos2d::ui::ScrollView::create();
    scrollView->setDirection(ui::ScrollView::Direction::VERTICAL);
    scrollView->setContentSize(Size(visibleSize.width * 0.9, visibleSize.height * 0.8)); // What user see
    scrollView->setInnerContainerSize(Size(visibleSize.width * 0.9, visibleSize.height * 0.8 * 4.5));
    scrollView->setBounceEnabled(true);
    scrollView->setAnchorPoint(Point(0.5, 0.5));
    scrollView->setPosition(Point(visibleSize.width / 2 + origin.x, visibleSize.height * 0.45 + origin.y));
    
    int level = 1;
    
    for (int h = 0; h < 22; h++) {
    
        for (int w = 0; w < 4; w++) {
    
            auto button = ButtonLevel::create(this, Point(scrollView->getInnerContainerSize().width / 5 * (w + 1), scrollView->getInnerContainerSize().height - scrollView->getInnerContainerSize().height / 22 * (h + 1) + scrollView->getInnerContainerSize().height / 44), level, canBePlayed);
            button->addClickEventListener([=](Ref* _sender)
                                          {
                                              auto scene = GameScene::createSceneWithLevel(level);
                                              Director::getInstance()->replaceScene(TransitionFade::create(1.0, scene, Color3B(0, 0, 0)));
                                          });
            scrollView->addChild(button);
    
            level++;
        }
    }
    
    this->addChild(scrollView, 100);
    

    Also #include "ui/CocosGUI.h" is needed