Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
a game ui editer for cocos2d-x
Branch: master
Pull request Compare This branch is 2 commits behind tongpengfei:master.

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.
trunk
.gitignore
LICENSE
README.md

README.md


** 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。
    • 导出的时候别忘了选择正确的横竖屏模式。
    • 导出的时候别忘了选择正确的主题。
  • 最后,祝各位同学发大财,闯出属于自己的天空~

Something went wrong with that request. Please try again.