/tui

a game ui editer for cocos2d-x

Primary LanguageC++OtherNOASSERTION

** Tui user manual

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(320480 or 480320) iphone5(568320 or 320568) ipad(1024768 or 7681024) android(480800 or 800480).

    Below are the features of Tui:

    • Tui is "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 } };

  • Where can I get it?

  • Author

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

  • License

    • MIT license
    • Yes! It's all FREE! Just do what you like!

  • Requirements

    • FlashCS6
    • AdobeExtensionManager6.0All
    • cocos2d-x-2.0.3

  • Have fun~

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

** Tui 用户手册

FAQ:

  • Tui是什么? Tui是一个游戏UI编辑器,是FlashCS6的扩展插件。开发者可以使用FlashCS6编辑游戏UI, 然后通过Tui插扩展预览最终的UI效果，并生成相应的xml文件。当前版本(v1.0)支持以前 屏幕尺寸: iphone(320480 或 480320) iphone5(568320 或 320568) ipad(1024768 或 7681024) android(480800 或 800480).

    Tui的特点包括:

    • Tui的最主要特点是所见即所得。
    • 把美术工作,策划工作与程序的工作区分开来。
    • 学习成本极低，只要会用简单操作Flash就可以。
    • 稳定性好。
    • 只要可以运行FlashCS的平台就可以使用。
    • 其中一个非常实用的功能工具对事件的支持，开发者可以测试一个按钮是否正常设置， 当预览该UI时，可以在工具里点击按钮，如果设置正常，可以在Tui的调试面板里看到 类似收到了***事件的调试信息。

  • Tui可以做什么?

    • 在FlashCS6里可视化编辑UI
    • 生成xml格式UI描述文件
    • 实时测试按钮等是否配置正确
    • 在游戏里解析xml生成UI
    • 亲,看到下面的用法,不心动么 显示一个UI面板: GameUIController::sharedGameUIController()->showTui( "panel_name" ); 隐藏一个UI面板: GameUIController::sharedGameUIController()->hideTui( "panel_name" );
    • 还可以获取面板中的子控件: Tui* panel = GameUIController::sharedGameUIController()->getTui( "panel_name" ); CCNode* control = panel->getControl( "control_name" ); ...ok，控件交给你了，随你处置吧。

  • Tui是怎么工作的?

    • 在FlashCS6里创建UI面板影片剪辑(mc),一个mc可以包含多个子mc，图片或按钮控件。
    • 通过jsfl导出Flash的layer数据，生成xml。
    • 工具里通过as3解析xml数据，生成UI预览，并处理相应的事件。
    • 程序通过tui库导入xml文件生成游戏UI。

  • Tui是如何支持多个主题的?

    • 在flash里: 你需要为每个主题创建一个资源文件夹，如img_iphone和img_ipad分别包含iphone和ipad的图片资源。
    • 注意: 在flash库里的资源目录必须为img_iphone或img_ipad,否则导出的图片会找不到资源。
    • 在游戏里: Tui通过文件夹来区分不同主题下的资源, 例如iphone的资源放在Resources/ui_iphone目录下，ipad的 资源放在Resources/ui_ipad目录下, iphonehd的资源放在Resources/ui_iphonehd目录下。
    • 每个主题对应一个xml配置文件，如tui_iphone.xml, tui_ipad.xml。
    • 在程序里判断不同的设备加载相应的xml配置文件就可以了。

  • HD版本的UI怎么搞?

    • 在Tui生成的配置文件里有个叫scheme的节点，它有个属性是is_retina, 当值为1时，表示HD版，反之为标清版，默认 是标清版。可以在程序里读取该值判断是否是HD版，是则把资源的根目录设置到hd版资源目录下。
    • 注意:在编辑器里只需要编辑标清版。需要用到hd版时候，在Resources下加上hd版资源目录并把配置文件改为is_retina。

  • 如何处理一个按钮事件?

    • Tui会生成一个gameuievent.h的文件,其中包括所有控件和面板的名字,还有所有用到的事件与相应的回调函数对应表, 回调函数对应表的格式为: static TuiEventCallBackTable tui_event_cb_table[] = { { "panel_menu_click_btn_start", tuievent_cb(GameUIController::on_event_panel_menu_click_btn_start) }, ... };

      开发者仅需要填加一个继承自TuiManager的类GameUIController然后实现对应表中的回调函数即可: class GameUIController : public TuiManager{ public: void on_event_panel_menu_click_btn_start( void* o, TEvent* e ){ //TODO add your code here } };

  • Tui在哪里下载?

  • 作者 *仝鹏飞 27001909#qq.com ( 请把#替换为@ )

  • 许可

    • MIT license
    • 亲,免费哦~ 随便你搞!

  • 环境需求

    • FlashCS6
    • AdobeExtensionManager6.0All
    • cocos2d-x-2.0.3

  • 容易出错的地方

    • 每个控件或面板即只要是mc类型的控件就需要设置名字，否则在程序中就不能找到该控件。
    • 一定要注意在flash的库里资源目录名字只能为img_iphone或img_ipad。
    • 导出的时候别忘了选择正确的横竖屏模式。
    • 导出的时候别忘了选择正确的主题。

  • 最后,祝各位同学发大财，闯出属于自己的天空~