Saturday, March 20, 2010

以XML為基礎作特效動畫的GUI系統(附Demo)


根據以往的經驗,製作Graphical User Interface(GUI) 的時間相當費時
用程式碼去實作遊戲內有特效的GUI更猶如跑馬拉松(是真的!我跑過最少兩次)

對於我這種缺錢又沒時間的一人開發小組來說
開發一個工具是一件窮奢極侈的事
可是工作上還是很需要,怎麼辦?
我的選擇是退而求其次

首先看看理想的GUI工作流程(個人覺得)
1. GUI編輯器製作GUI
2. 由GUI編輯器輸出XML資料
3. 在程式內載入XML資料並自動綁定Event

再看看現實我的GUI工作流程
1. 用文字編輯器(如Notepad)編寫XML資料
2. 用測試程式去預覽GUI特效
3. 在程式內載入XML資料並手動綁定Event

兩個工作流程的分別主要在於一個很昂貴的GUI編輯器
我的工作流程的工作量比較大
但是對於資源貧乏的我來說後者比較實際

我設計的GUI系統很簡單,只需要2個XML檔案: .gui以及 .gbs
.gui用作定義GUI版面
而.gbs用作定義特效動畫
這樣辛苦定義的特效動畫就可以很容易地重用
而以下的參數可以用作特效動畫
  • 位置
  • 尺寸(大小)
  • 顏色
  • 圖像ID

這GUI系統已經可以在IPod Touch上執行
但載入XML的速度極慢
需要大量優化才可正式使用

暫時我最滿意的是即時性更改
XML檔案作改動後只需儲存再按測試程式內的Reload
不用再等Compile以及起動
省回很多很多時間

先責聲明: 本人對此Demo對用家帶來任何方面的損失一概不負責
如果大家有興趣而同意以上聲明,可以下載來玩玩
下載連結 (只限Windows!)

如果大家找到bug,請務必告訴我
我也希望大家能分享有趣的特效
謝謝!

更新:
1. 2010-03-21 10:23 改善錯誤回報資料

4 comments:

  1. 要是有 Sprite animation 就更好啦。

    ReplyDelete
  2. @mtlung
    現在可以製作Sprite Animation的
    忘了說TexID 也可以animate :)
    你可以試試在Animate內的Frame中加入TexID參數
    就可以轉換Texture

    ReplyDelete
  3. 加上script後生產力立即大大提升
    立刻感受到script的強大威力
    難怪現在script無所不在

    ReplyDelete
  4. @waync

    不過這種XML scripting很需要程式碼配合

    ReplyDelete