Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

export Creator Widget component to Cocos2d-x Layout Node #160

Open
wants to merge 36 commits into
base: master
Choose a base branch
from

Conversation

drelaptop
Copy link
Contributor

@drelaptop drelaptop commented Apr 3, 2018

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 ......

widget component

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

  1. Support Widget Align Once, and Align every frame

  2. Support margin pixel value , not percentage value

  3. 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:

creator simulator - 960x640

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)

cocos2d-x 960x480 fix_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)

cocos2d-x 480x640 fix_hight

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

@drelaptop drelaptop changed the title export Creator Widget component to Cocos2d-x Layout Node [Not Finished] export Creator Widget component to Cocos2d-x Layout Node Apr 3, 2018
@@ -220,7 +220,7 @@ let get_tiledmap_path_by_uuid = function (uuid) {
}
}

let DEBUG = false;
let DEBUG = true;
Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

we probably don't need this in the final PR

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Thanks for review this, I will change it to false in the final. Are you satisfied with this implement of Widget Component?

Copy link
Contributor

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The code itself looks fine to me, but I'm not familiar with positional layouts enough to say one way or the other

@drelaptop drelaptop changed the title [Not Finished] export Creator Widget component to Cocos2d-x Layout Node export Creator Widget component to Cocos2d-x Layout Node Apr 25, 2018
@drelaptop
Copy link
Contributor Author

@Kuovane thanks for those changes, I have merged your commit into this PR.

drelaptop#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.

@jusforfun
Copy link

@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.

@deflinhec
Copy link

Any updates with this PR?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

5 participants