Tui by tongpengfei

A Flash Pro bases game UI editor for cocos2d-x

TuiEditer in Flash Pro screen shot

Tui in cocos2d-x screen shot

FAQ

What is Tui?

Tui is a game UI editer. It is a FlashCS6 extension, writen in jsfl and as3.
You can edit game UI in FlashCS6 with real-time preview. The editer outputs
a xml file. The current version( v1.0 ) supports the follow schemes:
iphone(320*480 or 480*320)
iphone5(568*320 or 320*568)
ipad(1024*768 or 768*1024)
android(480*800 or 800*480).
Below are the features of Tui:
* what you seen is what you get.
* Seperate the work of artists, designers and programmers.
* Easy to learn and easy to use.
* Stable.
* As long as your working environment supports Flash, it will work.
* One of the best feature is the support for event! For example, you may test a button click event in Tui's preview panel, and see debug log like "receive button click event ***" in debug panel, (if the event is currectly configured.)

What can it do?

* You may edit game UI visually in FlashCS.
* Export a xml file that describes the UI layout.
* Test a button click in real time.
* Parse a xml file and generate the UI in game.
* Just check out the codes below:
You may show a UI panel via

GameUIController::sharedGameUIController()->showTui( "panel_name" );

or hide a panel via

GameUIController::sharedGameUIController()->hideTui( "panel_name" );

* You may access a child UI control in a panel via

Tui* panel = GameUIController::sharedGameUIController()->getTui( "panel_name" );
CCNode* control = panel->getControl( "control_name" );

...now you get the child control.

How it works?

* Edit UI in FlashCS, a panel is a movieclip, a panel could include multiple images, buttons or panels.
* Preview your work in the preview panel
* Use Tui export Flash layer data to xml via jsfl.
* Import xml file and generate UI panel in game programm.

How it support multiple schemes?

* In Flash: you create multiple folders in library, like img_iphone, img_ipad that include corresponding image resource.
* NOTICE: the folder MUST be img_iphone for iphone or img_ipad for ipad. Other target platforms are not supported for now.
* In game: Tui distinguishes the different schemes by directory name, for example: iphone resource placed in Resource/ui_iphone, iphonehd resource placed in Resource/ui_iphonehd, ipad resource placed in Resource/ui_ipad.
* You may output two xml files: tui_iphone.xml, tui_ipad.xml
* Just simply load tui_iphone.xml for iphone or tui_ipad.xml for ipad.

How do I make an iphone HD scheme?

* In tui xml there is a node named "scheme" which has a attribute named "is_retina", you can access it via your game, it will be HD mode if it is "1" other wise it is "0".
* NOTICE: In Tui extension, is_retina is "0" by default, you just need edit standard definition version in Tui, then change is_retina to "0" or "1" if it is a HD version.

How can I handle a button event?

* Tui will generate a gameuievent.h file that includes all controls and panels name, all used events in this scheme. It looks like:

static TuiEventCallBackTable tui_event_cb_table[] = { 
    { "panel_menu_click_btn_start", tuievent_cb(GameUIController::on_event_panel_menu_click_btn_start) },
    ...
    };

You just need to add a class named GameUIController extending from TuiManager and implementing the callback:

class GameUIController : public TuiManager{
    public:
        void on_event_panel_menu_click_btn_start( void* o, TEvent* e ){
            //TODO add your code here
        }
};

Author

pengfei tong 27001909#qq.com ( replace # to @ please )

License

MIT License

NOTICE

* Every button or panel you make is REQUIRES a name, you need it to access that control in your game.
* In flash library, iphone image MUST be placed in img_iphone forder and ipad image MUST be placed in img_ipad forder.
* DO NOT forget to set "portrait" or "landscape" mode in Tui extension.
* DO NOT forget to choose the scheme when exporting, the default scheme is iphone4.

Samples

cocos2d-x tuisample

Flash sample