GUI M ODULE 設計

GUI module 中有二個主要的元件，如圖十四所示，Touch 主要負責接受 使用者輸入的手勢（Gesture）並將手勢轉成相對應的訊息傳送給 Control module；View 負責顯示遊戲的畫面，在 View 中還有二個元件，Animation 元件負責呈現遊戲中的動畫，例如：棋盤的放大、縮小、平移與棋子移動 的過程（稱作飛子）、Lines 元件提供二個功能，其一是繪製提示線，其二 是繪製輔助線，下面會進一步說明。

圖十四. GUI module 架構圖

圖十五. 手勢圖

Touch 元件分析的手勢分成 Tap, Drag, Pinch in, Pinch out，如圖十五所 示。以下手勢介紹皆以六子棋為例，Tap 手勢會根據按住的時間判斷成不 同的行為，按住一小段時間會出現輔助線（圖十六），之後放開或按下馬 上放開皆會判斷成下子的動作（圖十七），Drag 手勢當出現輔助線時作拖 曳的動作時會移動輔助線（圖十八），棋盤放大時作拖曳的動作時會移動 棋盤（圖十九），Pinch out 手勢會放大棋盤（圖二十），Pinch in 手勢會縮 小棋盤（圖二十一）。

圖十六. Tap 手勢（按住一段時間）

圖十七. Tap 手勢

圖十八. Drag 手勢（拖曳輔助線）

圖十九. Drag 手勢（拖曳棋盤）

圖二十. Pinch out 手勢

圖二十一. Pinch in 手勢

圖二十二. Double buffering（六子棋為例）

View 在呈現遊戲畫面時為了符合所有 Android 裝置的螢幕尺寸與繪製 動畫時不會造成閃爍的現象，在實作上結合 Double buffering，除了顯示在 螢幕上的畫布（Canvas）之外，我們還需要另一個非顯示在螢幕上的畫布

（Off screen canvas）與一個框架（Frame），Frame 的長寬比與裝置的長寬 比相同，如圖二十二所示，開發者將遊戲畫面畫在 Off screen canvas 上，

再投影 Frame 內的畫面至裝置的 Canvas 上，如此，View 即可做到符合所 有裝置螢幕的尺寸。

圖二十三.（a）放大棋盤（b）縮小棋盤

表四. 優化前畫面更新率 ASUS Transformer

4.0 20 16 TF101

HTC Flyer 3.2.1 15 12

在上一段已說明 View 中結合了 Double buffering 實作，此方法讓 Animation 呈現放大、縮小、平移簡單許多，需要放大棋盤時只需縮小 Frame，

相對需要縮小棋盤時只需放大 Frame，如圖二十三所示，而平移時只需移 動 Frame，最後再重新投影 Frame 內的畫面至裝置的 Canvas 上即可。

人類的視覺可接受動畫的每秒影格數需達 24FPS 以上[20]，因此，飛子 動畫在移動過程畫面需能每秒更新至少 24 次，在 Android 平台 3.0 以上對 於動畫的支援較佳，是因為 Android 提供了 Property animation，它可以幫 助開發者自動計算物件的某個屬性的值，隨著時間線性或非線性遞增或遞

Off screen canvas 畫上次棋子的位置的背景，（c）再畫這次棋子的位置，（d）

更新至裝置的 Canvas 時只更新 Frame 內二次棋子的位置即圖中藍色區域，

不用整個 Frame 的內容都更新。經過優化後，我們重新做了一次與上一段 所提相同的實驗，發現畫面的更新速度大幅提升並且不需硬體加速即可達 到人眼的需求，如表五。

圖二十四. Off screen canvas 繪製流程

表五. 優化前後畫面更新率比較 ASUS Transformer

4.0 20 16 36 用程式，Android 稱這種情況為 ANR（Application not respond.），Android 默認的 ANR 時間最長為 5 秒。

如圖二十五所示，我們設計當 Control module 跟 AI interface 要求 AI 去 想下一步棋時，會將目前的遊戲狀況當作參數傳給 AI interface，在 AI interface 中會新增一個執行緒去執行 AI 程式的計算，此時，由於 UI thread 並沒有被堵塞，因此，使用者手勢的操作在 AI 計算時依然可以被 UI module 中的 Touch 元件接受（說明見 3.3）。

AI 程式方面，程式開發者可以自由選擇用 C/C++或 Java 開發，若開發 者想透過 C/C++開發只需照著 2.6 節中所提 Android-NDK 的開發流程將 C/C++程式編譯成函式庫即可。