Relative Layouts don't work on cocos2d-x 3.1?

Relative Layouts don't work on cocos2d-x 3.1?
0.0 0

#1

Here there is an example with Relative layout that positions 9 buttons: http://www.cocos2d-x.org/wiki/Containers

I have done something very similar to the wiki example with cocos2d-x 3.1 and tested it on Android and Windows. I have sub-classed Layer and added the code below in the init() method:

Layout* layout = Layout::create();
layout->setLayoutType(LayoutType::RELATIVE);
layout->setContentSize(visibleSize);
layout->setBackGroundColorType(Layout::BackGroundColorType::SOLID);
layout->setBackGroundColor(Color3B::GREEN);
// Size backgroundSize = background->getContentSize();
layout->setPosition(Vec2(visibleOrigin.x + visibleSize.width / 2, visibleOrigin.y + visibleSize.height / 2));
/*_uiLayer->*/addChild(layout);

// top left
Button* button_TopLeft = Button::create("images/ingame/bubbe.png");
layout->addChild(button_TopLeft);

RelativeLayoutParameter* rp_TopLeft = RelativeLayoutParameter::create();
rp_TopLeft->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_LEFT);
button_TopLeft->setLayoutParameter(rp_TopLeft);


// top center horizontal
Button* button_TopCenter = Button::create("images/ingame/bubbe.png");
layout->addChild(button_TopCenter);

RelativeLayoutParameter* rp_TopCenter = RelativeLayoutParameter::create();
rp_TopCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_CENTER_HORIZONTAL);
button_TopCenter->setLayoutParameter(rp_TopCenter);


// top right
Button* button_TopRight = Button::create("images/ingame/bubbe.png");
layout->addChild(button_TopRight);

RelativeLayoutParameter* rp_TopRight = RelativeLayoutParameter::create();
rp_TopRight->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_TOP_RIGHT);
button_TopRight->setLayoutParameter(rp_TopRight);


// left center
Button* button_LeftCenter = Button::create("images/ingame/bubbe.png");
layout->addChild(button_LeftCenter);

RelativeLayoutParameter* rp_LeftCenter = RelativeLayoutParameter::create();
rp_LeftCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_CENTER_VERTICAL);
button_LeftCenter->setLayoutParameter(rp_LeftCenter);


// center
Button* buttonCenter = Button::create("images/ingame/bubbe.png");
layout->addChild(buttonCenter);

RelativeLayoutParameter* rpCenter = RelativeLayoutParameter::create();
rpCenter->setAlign(RelativeLayoutParameter::RelativeAlign::CENTER_IN_PARENT);
buttonCenter->setLayoutParameter(rpCenter);


// right center
Button* button_RightCenter = Button::create("images/ingame/bubbe.png");
layout->addChild(button_RightCenter);

RelativeLayoutParameter* rp_RightCenter = RelativeLayoutParameter::create();
rp_RightCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_CENTER_VERTICAL);
button_RightCenter->setLayoutParameter(rp_RightCenter);


// left bottom
Button* button_LeftBottom = Button::create("images/ingame/bubbe.png");
layout->addChild(button_LeftBottom);

RelativeLayoutParameter* rp_LeftBottom = RelativeLayoutParameter::create();
rp_LeftBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_LEFT_BOTTOM);
button_LeftBottom->setLayoutParameter(rp_LeftBottom);


// bottom center
Button* button_BottomCenter = Button::create("images/ingame/bubbe.png");
layout->addChild(button_BottomCenter);

RelativeLayoutParameter* rp_BottomCenter = RelativeLayoutParameter::create();
rp_BottomCenter->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_BOTTOM_CENTER_HORIZONTAL);
button_BottomCenter->setLayoutParameter(rp_BottomCenter);


// right bottom
Button* button_RightBottom = Button::create("images/ingame/bubbe.png");
layout->addChild(button_RightBottom);

RelativeLayoutParameter* rp_RightBottom = RelativeLayoutParameter::create();
rp_RightBottom->setAlign(RelativeLayoutParameter::RelativeAlign::PARENT_RIGHT_BOTTOM);
button_RightBottom->setLayoutParameter(rp_RightBottom); 

Attached is the result of this code. You can see 9 red bubble buttons. This buttons are in the center of my screen but I have expected to see them in top-right, top-center, … and all 9 other places on my screen. Why are they so close to each other?

Also I don’t see layouts solid green color. What is wrong?


What UI system we need?
#2

Need to change layout->setContentSize(visibleSize); to layout->setSize(visibleSize);.

Note: The default anchor point of the Layout is Vec2(0,0), so you might need to change the layout’s position to Vec2::ZERO too


#3

I have tested it on v3.2, it works OK and you could call setContentSize on your Layout instance.


#4

@owen
Thanks for testing it on 3.2. But now I am confused. Which function I should use in 3.2? Did you try setSize on 3.2. Does it work too?


#5

Yes, It works too.
If you take a loot at the implementation of setSize method, you will find that it just calls the setContentSize method internally.


#6

@owen in case of cocos2d-x 3.1 here are the implementations of setSize and setContentSize respectively:

void Widget::setSize(const Size &size)
{
    _customSize = size;
    if (_ignoreSize)
    {
        _size = getVirtualRendererSize();
    }
    else
    {
        _size = size;
    }
    if (_running)
    {
        Widget* widgetParent = getWidgetParent();
        Size pSize;
        if (widgetParent)
        {
            pSize = widgetParent->getSize();
        }
        else
        {
            pSize = _parent->getContentSize();
        }
        float spx = 0.0f;
        float spy = 0.0f;
        if (pSize.width > 0.0f)
        {
            spx = _customSize.width / pSize.width;
        }
        if (pSize.height > 0.0f)
        {
            spy = _customSize.height / pSize.height;
        }
        _sizePercent = Vec2(spx, spy);
    }
    onSizeChanged();
}

void Node::setContentSize(const Size & size)
{
    if ( ! size.equals(_contentSize))
    {
        _contentSize = size;

        _anchorPointInPoints = Vec2(_contentSize.width * _anchorPoint.x, _contentSize.height * _anchorPoint.y );
        _transformUpdated = _transformDirty = _inverseDirty = true;
    }
}

#7

Yes, it’s a design flaw in v3.1. I’m sorry for the incompatibility .