creator_to_cocos2dx
creator_to_cocos2dx copied to clipboard
export Creator Widget component to Cocos2d-x Layout Node
What's Widget
Widget is a frequently used UI layout component. It can make the current node automatically align to an optional position of the parent object ......
English Docs, http://www.cocos2d-x.org/docs/creator/manual/en/components/widget.html 中文文档, http://docs.cocos.com/creator/manual/zh/components/widget.html
How to Export
Widget in Creator is a UI layout component, but Widget in Cocos2dx is a base class for all UI class, so we need to export Widget component to Layout class, not Widget class.
To implement those layout feature, I have to add a extra Layout node, and insert the layout node between Node needed layout and its parent node. Meanwhile make the layout location property keep same as layout target.
Existed Limits
Widget in Creator we can set margin value to percentage, but in Cocos2d-x the Margin
class, only support pixel. So I have no method to support percentage margin.
Default align target is the parent node of UI node which existed a widget component, not support custom widget target yet. Might make it done later.
Implement features
-
Support Widget Align Once, and Align every frame
-
Support margin pixel value , not percentage value
-
Only special 9 direction combinations support, not every direction support!
PARENT_TOP_LEFT, PARENT_TOP_CENTER_HORIZONTAL, PARENT_TOP_RIGHT, PARENT_LEFT_CENTER_VERTICAL, CENTER_IN_PARENT, PARENT_RIGHT_CENTER_VERTICAL, PARENT_LEFT_BOTTOM, PARENT_BOTTOM_CENTER_HORIZONTAL, PARENT_RIGHT_BOTTOM,
Tests
the Creator Scene is a root canvas and 9 child buttons, canvas size (960 x 640), run in Simulator:
Export this Scene, and use it in Cocos2d-x cpp test project, change frame size to (960 x 480) (canvas in Creator set Fix Width, cocos2d-x set FIXED_WIDTH)

Export this Scene, and use it in Cocos2d-x cpp test project, change frame size to (480 x 640) (canvas in Creator set Fix Height, cocos2d-x set FIXED_HEIGHT)

TODO
-- the extra Layout node should be delete too, when it's child node removed.
-- try to impl this feature by ui::LayoutComponent
, other than RelativeLayoutParameter
and RelativeLayout
@Kuovane thanks for those changes, I have merged your commit into this PR.
https://github.com/drelaptop/creator_to_cocos2dx/pull/1
## In this PR, I have done the following changes :
1, merge 0.4 release version ;
2, fix some buges ;
3, support auto align in node if it add widget in creator .
## How to use
1, create "root" empty node;
2, add widget component to "root" node;
3, create other widget node as "root" node's children.
@drelaptop Yes, this seems to work for the aligning of ui widget component; Thank you so much for the effort;
Just would like to check it is only compatible with Cocos Creator of v1.9 and below right? It seems that Cocos Creator version 1.10 or 2.0 there are quite a amount of changes done to the widget and camera.
Any updates with this PR?