Blog

Flexible Box Layout for Cocos2d [updated]

This is a flexible box layout for cocos2d-iphone partly based on w3c recommendation http://www.w3.org/TR/css3-flexbox.

Features:

VerticalBox
HorizontalBox
FlexibleBox

Properties supported

justify : (start | end | center | spaceAround | spaceBetween )
align : (start | end | center | stretch)
grow :
direction : (row | column)

The layout handler is decoupled from the cocos2d node and modifies only the position.

flexible box layout

Source

The new version follows more closely the w3c specs. And as much as possible implemented the suggested algorithm.
It still does not implement wrap. That would be the layout Holy Grail.

The flexible layout could easily re-run to adapt to change in orientation.

Below are screenshot of the layout manager in action:

Screen Shot 2013-06-01 at 12.30.29 PM

Screen Shot 2013-06-01 at 12.31.20 PM

Screen Shot 2013-06-01 at 12.32.11 PM

Screen Shot 2013-06-01 at 12.32.32 PM

Defining the menu screen is done with a short xml file.


<layout direction="column" align="center" justify="space-around">
    <CCSprite file="title.png"/>
    <flex direction="column" align="start">
        <MenuItem tag="201" parent="200" label="Play">
        <MenuItem tag="202" parent="200" label="Select a Game">
        <MenuItem tag="203" parent="200" label="Options">
        <MenuItem tag="204" parent="200" label="Help">
    </flex>
</layout>

MenuItem is a custom node. The parser could easily be customized to support custom objects.

Leave a Reply