Tui是一个游戏UI编辑器,是FlashCS6的扩展插件。开发者可以使用FlashCS6编辑游戏UI, 然后通过Tui插扩展预览最终的UI效果,并生成相应的xml文件。当前版本(v1.0)支持iphone (320*480或480*320)与ipad(1024*768或768*1024)尺寸。
Tui的特点包括:
Tui的最主要特点是所见即所得。把美术工作,策划工作与程序的工作区分开来。学习成本极低,只要会用简单操作Flash就可以。稳定性好。只要可以运行FlashCS的平台就可以使用。其中一个非常实用的功能工具对事件的支持,开发者可以测试一个按钮是否正常设置, 当预览该UI时,可以在工具里点击按钮,如果设置正常,可以在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。
在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配置文件就可以了。
在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 } };