Tui 游戲UI編輯器

Tui是一個(gè)游戲UI編輯器,是FlashCS6的擴(kuò)展插件。開發(fā)者可以使用FlashCS6編輯游戲UI, 然后通過Tui插擴(kuò)展預(yù)覽最終的UI效果，并生成相應(yīng)的xml文件。當(dāng)前版本(v1.0)支持iphone (320*480或480*320)與ipad(1024*768或768*1024)尺寸。 

Tui的特點(diǎn)包括:

Tui的最主要特點(diǎn)是所見即所得。把美術(shù)工作,策劃工作與程序的工作區(qū)分開來。學(xué)習(xí)成本極低，只要會(huì)用簡單操作Flash就可以。穩(wěn)定性好。只要可以運(yùn)行FlashCS的平臺(tái)就可以使用。其中一個(gè)非常實(shí)用的功能工具對事件的支持，開發(fā)者可以測試一個(gè)按鈕是否正常設(shè)置， 當(dāng)預(yù)覽該UI時(shí)，可以在工具里點(diǎn)擊按鈕，如果設(shè)置正常，可以在Tui的調(diào)試面板里看到 類似收到了***事件的調(diào)試信息。

Tui可以做什么?

在FlashCS6里可視化編輯UI生成xml格式UI描述文件實(shí)時(shí)測試按鈕等是否配置正確在游戲里解析xml生成UI親,看到下面的用法,不心動(dòng)么 顯示一個(gè)UI面板: GameUIController::sharedGameUIController()->showTui( "panel_name" ); 隱藏一個(gè)UI面板: GameUIController::sharedGameUIController()->hideTui( "panel_name" );還可以獲取面板中的子控件: Tui* panel = GameUIController::sharedGameUIController()->getTui( "panel_name" ); CCNode* control = panel->getControl( "control_name" ); ...ok，控件交給你了，隨你處置吧。

Tui是怎么工作的?

在FlashCS6里創(chuàng)建UI面板影片剪輯(mc),一個(gè)mc可以包含多個(gè)子mc，圖片或按鈕控件。通過jsfl導(dǎo)出Flash的layer數(shù)據(jù)，生成xml。工具里通過as3解析xml數(shù)據(jù)，生成UI預(yù)覽，并處理相應(yīng)的事件。程序通過tui庫導(dǎo)入xml文件生成游戲UI。

Tui是如何支持多個(gè)主題的?

在flash里: 你需要為每個(gè)主題創(chuàng)建一個(gè)資源文件夾，如img_iphone和img_ipad分別包含iphone和ipad的圖片資源。注意: 在flash庫里的資源目錄必須為img_iphone或img_ipad,否則導(dǎo)出的圖片會(huì)找不到資源。在游戲里: Tui通過文件夾來區(qū)分不同主題下的資源, 例如iphone的資源放在Resources/ui_iphone目錄下，ipad的 資源放在Resources/ui_ipad目錄下, iphonehd的資源放在Resources/ui_iphonehd目錄下。每個(gè)主題對應(yīng)一個(gè)xml配置文件，如tui_iphone.xml, tui_ipad.xml。在程序里判斷不同的設(shè)備加載相應(yīng)的xml配置文件就可以了。

HD版本的UI怎么搞?

在Tui生成的配置文件里有個(gè)叫scheme的節(jié)點(diǎn)，它有個(gè)屬性是is_retina, 當(dāng)值為1時(shí)，表示HD版，反之為標(biāo)清版，默認(rèn) 是標(biāo)清版�？梢栽诔绦蚶镒x取該值判斷是否是HD版，是則把資源的根目錄設(shè)置到hd版資源目錄下。注意:在編輯器里只需要編輯標(biāo)清版。需要用到hd版時(shí)候，在Resources下加上hd版資源目錄并把配置文件改為is_retina。

如何處理一個(gè)按鈕事件?

Tui會(huì)生成一個(gè)gameuievent.h的文件,其中包括所有控件和面板的名字,還有所有用到的事件與相應(yīng)的回調(diào)函數(shù)對應(yīng)表, 回調(diào)函數(shù)對應(yīng)表的格式為: static TuiEventCallBackTable tui_event_cb_table[] = { { "panel_menu_click_btn_start", tuievent_cb(GameUIController::on_event_panel_menu_click_btn_start) }, ... };

開發(fā)者僅需要填加一個(gè)繼承自TuiManager的類GameUIController然后實(shí)現(xiàn)對應(yīng)表中的回調(diào)函數(shù)即可: class GameUIController : public TuiManager{ public: void on_event_panel_menu_click_btn_start( void* o, TEvent* e ){ //TODO add your code here } };