GUI 模組

GUI 模組負責控管與使用者互動的操作介面，GUI 模組包含 Touch、

View Controller、Animation、Line 這幾個元件，如圖 8 所示。各元件內容 將分述如 3.2.1、3.2.2 小節。

圖 8. GUI 模組架構圖

3.2.1. Touch

Touch 負責處理使用者的輸入，使用者對遊戲的操作主要透過觸碰手 機螢幕。在 2.3.3 節中提到 iOS 支援許多手勢輸入，圖 9 展示在本系統中 使用到的幾種手勢，以下將分項加以探討。

17

圖 9. 本系統使用的手勢示意圖

Tap

Tap 手勢在本系統中用於按鈕與下子行為。

 按鈕

當使用者的手指按下並抽離畫面上的按鈕時，Control 模組會處理此觸 碰事件，並觸發對應的方法通知 GUI 模組執行下子的畫面顯示。

 下子

下子流程如下：

(1) Control 模組收到棋盤上的 tap 事件。

(2) 計算最接近觸碰位置的棋點座標。

(3) 檢查是否為合法步。

(4) 在該棋點座標上放上目前下棋方顏色的子。

Pinch in/out

在本系統中，pinch in/out 手勢只用於放大縮小棋盤，如下方圖 10 所

18

示，(a)是棋盤放大前的預設畫面；(b)則是經過使用者 pinch out 手勢後，

棋盤放大的畫面。

(a) (b) 圖 10. (a) 預設棋盤畫面 (b) 棋盤放大畫面

Swipe

在本系統中，swipe 手勢會使用於移動棋盤可視範圍及拉出或隱藏選 項表，分別於以下詳述。

 移動棋盤可視範圍

當棋盤被放大時，因為螢幕尺寸限制，使用者會看不見棋盤上某些區 域，此時可以透過 swipe 手勢移動棋盤改變可視區域。如圖 11 中，(a) 顯示棋盤中央區域；(b)顯示當使用者往右上角做 swipe 手勢後，使用 者可視範圍則變成棋盤左下角。

19

(a) (b)

圖 11. (a) 可視範圍在棋盤中央 (b) 可視範圍移至左下角

 拉出或隱藏選項表

(a) (b) 圖 12. (a) 預設隱藏的選項表 (b) 滑動顯示選項按鈕

在選項表上有一些功能按鈕，例如「離開」、「重玩」、「悔棋」等。選 項表預設狀態是隱藏，使用者可用 Swipe 手勢拉出選項表，系統在偵 測到使用者在選項表所在範圍移動觸碰點時，選項表即被拉出；另外，

使用者也可透過點擊(Tap)選項表所在範圍來顯示選項表。選項表在被 拉開的五秒後回復隱藏狀態。在選項表拉開的狀態時，使用者也可用 向下的 Swipe 手勢讓選項表隱藏。

20

Tap and Hold, Drag

使用者的手指觸碰螢幕一段時間(Tap and Hold)後，畫面上會出現十字 輔助線，輔助線部分會在 3.2.2 節中再加以描述。出現十字輔助線時，使 用者可拖曳(Drag)觸碰點來移動十字輔助線的中心點，當手指放開時 GUI 模組會執行下子動作。

(a) (b)

圖 13. (a) 出現十字輔助線 (b) 移動十字輔助線

如圖 13 中所示，(a)當使用者觸碰棋盤上座標(9, 7)的棋點一段時間後，

畫面上出現白色十字輔助線；(b)使用者拖曳觸碰點將十字輔助線的中心點 移至棋盤上座標(11, 9)的棋點。

21

3.2.2. View Controller

View Controller 是顯示並管理畫面上的 UI 物件，其中包含兩個元件：

Line 和 Animation。Line 提供十字輔助線與提示線，Animation 則負責動畫 部分，分述如下：

十字輔助線

在 iOS 行動裝置中，由於螢幕限制，所以棋盤尺寸較小，使用者較難 下子於正確的位置。十字輔助線可讓使用者確認觸碰於棋盤上的棋點位置，

使用十字輔助線的示意圖如 3.2.1 節中圖 13 所示。其顯示流程如下：

1. 使用者長按後(Tap and Hold)顯示十字輔助線。

2. 使用者拖曳觸碰點時，十字輔助線隨之移動。

3. 當使用者手指離開螢幕結束觸碰，十字輔助線從畫面上消失，並下子 於該棋點。

提示線

(a) (b) (c) 圖 14. 提示線 (a) 活二 (b) 活三、死三 (c) 雙迫著、單迫著

22

在遊戲進行時，提示線能夠提示使用者六子棋棋局的盤面中較具有威 脅性的棋型。圖 14 列出幾個畫上提示線的六子棋棋型，其中(a) 活二提示 線為藍色； (b) 活三、死三提示線為綠色；(c) 標示迫著的輔助線為紅色。

在遊戲中，提示線能讓使用者作為攻擊或防守的參考依據，如下方圖 15 所示。

圖 15. 遊戲中六子棋棋局的提示線

動畫

在遊戲中，動畫效果透過 Animation 來實現。Animation 在遊戲中用於 棋子移動，滑出選項表及圖片或訊息的淡入淡出。本程式利用 iOS 提供的 API─UIView 實作動畫功能，例如在詰棋闖關中淡入或淡出關卡選項表，

實作一方法來實現動畫，在此方法中傳入以下參數：要移動的物件指標、

目的地座標及移動完畢時物件的透明度。座標用兩個浮點數表示，透明度 用一個浮點數─介於 0 到 1 之間的 alpha 值表示。

23