Can't set solid background color of a Layout

cocos2d-x C++
1

I can set an image as background but not a solid color as background.

This is what I get with the code below: .

Inside init method:

Vec2 viewOrigin = Director::getInstance()->getVisibleOrigin();
Size viewSize = Director::getInstance()->getVisibleSize();

auto leftArrowButton = Button::create("icons/left_arrow.png");

auto leftPanel = Layout::create();
this->addChild(leftPanel);
leftPanel->addChild(leftArrowButton, 1, "leftArrowButton");

leftPanel->setLayoutType(Layout::Type::VERTICAL);
leftPanel->setAnchorPoint(Vec2());
leftPanel->setPosition(Vec2(viewSize.width/2, viewSize.height/2+50));

leftPanel->setBackGroundColorType(Layout::BackGroundColorType::SOLID);  //// I didn't forget this!
leftPanel->setBackGroundColor(Color3B::RED);

Where this is a subclass of cocos2d::LayerColor. (compiling against win32, debug)

2

Try setting leftPanel's size and position: they are (0, 0) by default, and this should be the reason why the panel cannot be seen.

3

The position is set, both the image and the code represents this. And the size should automatically adjust when new elements are added, no? What is more, I explicitly logged the bounding box of it and the dimensions were non-zero.

4

Yup, I completely missed that. Sorry.

I never used autolayout much, but as far as I remember I still had to set sizes manually. Anyway, the backgroundColor property of Layout is simply a LayerColor object, and its size is only updated when you call Layout->setContentSize(size), which in turn calls Layout’s implementation of onSizeChanged(), which is where the backgroundColor layer’s size is actually updated. This is why I suggested you to set the layout’s size.

Check what the actual size of the layout’s backgroundColor layer is. If I am understanding the problem correctly it should be (0, 0).

5

You were right, I overlooked its dimensions, they were zero. After I called setContentSize() (which I tried previously but I think I executed this process in the wrong order) the background appeared. Any idea how to implement a function that updates the content size of the layout based on its contents? I can think of a looping through its children and doing it somewhat manually but isn’t there a library method for this?

6

When you specify the background color type Layout creates the LayerColor object. If you set a layout’s size before specifying the background color type, onSizeChanged() will not update the LayerColor’s size as it does not exist at that point. (I tell you this because I have already lost a lot of time troubleshooting it).

You have to check this out because I haven’t used this in a while, but as far as I remember to use autolayout you need layout components, which have a Margin property (at least for relative layouts) that you can set, and this specifies the distance between the object and a relative in the layout. Whenever you update the layout’s size it should automatically update all its children’s sizes based on their margins.

Personal suggestion: I gave up with autolayout as I found the advantages where too few compared to the effort needed to understand how it works and troubleshooting eventual positioning/sizing problems.
Since I come from objective c, I am used to setting objects’ rects and positioning them by specifying their origins. Cocos2d handles things differently: you cannot set size and position with a single method, and setPosition(const Vec2 &pos) is affected by the node’s anchor point.
To make my life easier I made a simple header which contains the following MACROs that mimic objective c’s style for setting objects’ sizes and positions. When I need to position objects I simply add the header and use the MACROs.


/*
The reason for using `do {...} while (0)` is that when SET_ORIGIN is called more than once `auto ap` is redefined
*/

#define SET_ORIGIN(__NODE__, __ORIG__) \
    do { \
        auto ap = __NODE__->getAnchorPoint(); \
        auto size = __NODE__->getContentSize(); \
        __NODE__->setPosition(Vec2(__ORIG__.x + size.width*ap.x, __ORIG__.y + size.height*ap.y)); \
    } while(0)


#define SET_RECT(__NODE__, __RECT__) \
    __NODE__->setContentSize(__RECT__.size); \
    SET_ORIGIN(__NODE__, __RECT__.origin);
1 Like
7

This Layout class is absolutely useless… It doesn’t even update the bounding boxes or content sizes of the elements added. It doesn’t update its OWN bounding box. You’re just better of positioning the elements and adding background manually than using this and there is practically 0 documentation concerning it.