如何製作 Tappy Plane（Flappy Birds 複製遊戲）

簡介：

大家好，歡迎來到本教學，一起在 hyperPad 中製作屬於自己的「Flappy Birds」風格遊戲。

我們的版本有些不同，所以將它稱為 Tappy Plane。

本教學適合想深入了解行為系統並學習視覺化程式設計的初學者。在整個教學中，你也會熟悉 hyperPad 的介面。

在本教學中，我們會製作一款簡單的 Flappy Bird 風格遊戲。遊戲玩法是玩家點擊螢幕來控制飛機上下移動，穿越一連串的懸崖。每成功越過一座懸崖，就能獲得一分；累積足夠分數後，玩家便能獲得獎牌。分數越高，獎牌的價值也越高，最高可獲得閃亮的金牌！誰不喜歡閃亮的東西呢！？

如果你還沒有 hyperPad，可以從 App Store 下載：https://itunes.apple.com/app/apple-store/id886106438?mt=8

你可以在我們的網站 http://www.hyperpad.com 進一步了解 hyperPad。

事不宜遲，讓我們開始吧！

第 1 部分：開始使用

建立專案：

首先，我們要開始建立一個新專案。載入 hyperPad 後，你應該會看到專案畫面。在這裡可以找到你製作的所有專案，以及下載的專案。目前，我們要建立一個新專案。點一下畫面右上方的「New Project」按鈕，如下圖所示。

完成後，畫面上會出現一個彈出視窗。在這裡，我們可以為專案命名，並視需要建立雲端備份。此外，你也可以點一下「Get Started with a Sample Instead」按鈕，匯入我們其中一個基礎專案。不過目前我們不會這麼做。將專案命名為 Tappy Plane，然後點一下「Next」按鈕。

在這個新畫面中，我們要設定設計目標裝置和方向。此專案請將方向設為橫向，並將裝置支援設為 iPad。如果之後需要更改設定，也不用擔心。你可以隨時在「Global Settings」選單中調整這些設定。

最後，我們可以選擇要製作哪一類型的遊戲。目前 hyperPad 支援兩種模式：俯視和側視。俯視（或稱鳥瞰視角）通常用於《The Legend of Zelda》轉為 3D 之前的作品、《Bejeweled》這類益智遊戲，以及俯視射擊遊戲。側視則常用於《Super Mario Bros.》這類平台遊戲。

這兩種模式的運作方式完全相同，只有一個小小的差異：鳥瞰視角會停用重力設定（改為依靠空氣阻力模擬物體朝螢幕深處移動時的重力效果），因此建立專案時請記住這點。你之後也可以在「Global Properties」選單中更改這項設定。

本教學會使用側視模式，請確認已選取該模式。接下來是重力設定和 PTM 比例。預設的重力值為 0 和 -25。

這些是遊戲世界的 X 和 Y 值，簡單來說就是水平和垂直方向。X 代表水平方向，也就是左和右；Y 代表垂直方向，也就是上和下。預設值 0 和 -25 表示沒有重力會將物件往左或右拉，但物件會以每秒 25 公尺的速度下落。本教學使用預設值即可。

PTM 比例代表 Points to Metres，簡單來說，就是 1 個 hyperPad 公尺包含多少像素（點）。預設值為 32 pt/m，也就是每公尺 32 像素。製作美術素材時，了解這點很重要，所有素材都應遵循這個比例。本教學會使用 hyperPad 素材庫中的免費素材，因此不需要更改比例。

完成後，點一下「Create」按鈕，我們就可以開始了！

編輯器：

現在我們已經進入專案，應該會看到如下畫面：

這是我們的畫布，也是製作遊戲的地方。畫面中央應該會看到一個細綠色方框輪廓，代表遊戲畫面。放在方框內的內容會在遊戲開始時立即顯示，方框外的內容則不會算繪。你可以先四處點一下，看看各項功能的用途，再進行下一步。

準備好後，點一下右下角的抽屜圖示，開啟素材瀏覽器。

素材庫：

這裡會存放遊戲中的所有素材。新的 hyperPad 專案預設只包含少數幾個入門素材。你需要匯入自己的素材，或從 hyperPad 素材商店下載素材包。本教學會著重使用 hyperPad 素材商店提供的素材。畫面左側會有一列包含四個按鈕的工具列。點一下「Get Assets」按鈕即可開啟 Hyperpad Shop。

在這裡，你會找到由 Hyperpad 提供的免費素材包，協助你開始製作專案。找到並點一下 Tappy Plane Asset Pack。

現在只要點一下「Get」按鈕即可開始匯入（注意：如果發生錯誤，只要再點一次即可重新開始匯入）。完成後，你會看到素材已成功匯入的訊息。只要點一下畫面右上角的「Close」，即可返回 Hyperpad。

就這麼簡單。現在你應該會在素材瀏覽器中看到一個名為 Downloads 的新資料夾。點一下它，就會看到 Tappy Plane Pack 資料夾，裡面就是我們的美術素材。

接下來，我們開始組裝遊戲。

第 2 部分：遊戲玩法

如果你熟悉 Flappy Bird，就會熟悉這種遊戲玩法。點擊螢幕，讓小鳥（在我們的遊戲中是飛機）保持在空中，同時設法避開迎面而來的障礙物。障礙物會以隨機組合出現，因此每次遊玩都會有所不同。成功避開障礙物即可獲得分數，而你的最高分也會被記錄下來。

加入飛機：

了解基本玩法後，我們就可以開始了。首先要把玩家角色放到畫面上。開啟素材瀏覽器中的下載資料夾，逐層找到美術素材。裡面應該會有一個名為 Planes 的資料夾。

開啟該資料夾，選擇你最喜歡的顏色，然後選取第一個飛機圖像。素材庫會關閉，並返回主編輯器畫面；此時你應該會在底部物件停靠列中看到飛機。這個 UI 區域稱為「物件停靠列」，會顯示你最近使用的 5 個素材。若要將飛機放進遊戲區，只要將它從停靠列拖曳到畫布上即可。

飛機放進遊戲後，我們需要快速調整一項設定。點一下飛機以選取它，並開啟右側的屬性頁籤。我們要將飛機設為可穿透的牆壁物件。很簡單，只要找到「Passable」開關，點一下將它開啟即可。這麼做是因為我們不希望玩家開始遊戲之前，飛機就先掉下去。我們也將它設為可穿透，因為目前不希望它發生任何碰撞。

完成後，讓我們繼續製作可玩的遊戲。

飛機下墜：

我們需要一種開始遊戲的方式。為此，需要一個按鈕。我們可以用簡單的圖像提示玩家點擊哪裡，但這款遊戲希望玩家可以點擊螢幕上的任何位置。該怎麼做呢？我們會讓整個螢幕都變成按鈕！

首先需要建立一個新圖層。不過，在此之前，我們要先取消選取飛機。只要點一下任意空白處即可。取消選取後，物件屬性會關閉，右側應該會顯示圖層頁籤。如果沒有顯示，只要從畫面右側往左滑動手指，即可將它展開。

如你所見，預設會有三個圖層：Global UI、Scene UI，然後是分隔線下方的 Main。提醒一下，Global UI 圖層上的內容會出現在遊戲的每個場景中。其他圖層則只會出現在各自的場景中。若要建立新圖層，只要點一下圖層頁籤底部的 + 圖示。畫面會提示你為新圖層命名。輸入 Button，然後點一下「OK」。

新建立的圖層預設會成為目前作用中的圖層。使用圖層時，只有作用中圖層中的物件可以被選取。這是整理遊戲內容的好方法，可以避免不小心移動到不想移動的物件。請隨時留意目前正在使用哪個圖層。也要記住，位於其他圖層上方的圖層會顯示在該圖層之上。這樣就能避免背景遮住遊戲區域。

建立按鈕非常簡單。點一下物件停靠列右下角的「Special Objects」按鈕（燒杯圖示），畫面會顯示物件類型選單。我們要使用「Empty Object」。點一下它，就會在專案中央建立一個小型空白方塊。不過，我們希望它佔滿整個畫面。點一下方塊內部以選取它。

選取物件時，物件邊緣會出現小綠點。我們可以用這些綠點手動縮放 Empty Object。只要點住角落並拖曳，即可等比例縮放。拖曳角落，直到物件涵蓋整個畫布。側邊的綠點可以用來微調物件大小，以便更貼合畫布。最後你應該會看到類似下圖的畫面（注意：如果縮放物件有困難，可以用兩指向外滑動來放大，向內滑動來縮小）：

點一下畫布上的任意空白處，取消選取 Empty Object，然後切回 Main 圖層並重新選取飛機。點一下「behaviours」按鈕，開啟行為畫面。

這就是行為畫面，也是施展魔法的地方。hyperPad 不使用傳統程式碼，而是使用視覺化邏輯區塊，透過動作和事件來編寫互動功能。你可以先看看各個分類，了解有哪些選項。點一下左側頁籤中的某個行為，即可開啟視窗，查看該行為的簡短說明。你也可以查閱 hyperPad 說明文件，了解每個行為的詳細說明。

目前我們只需要開始遊戲，並將飛機從可穿透的牆壁物件轉換成物理物件。這樣一來，飛機就會受到物理效果影響，並在重力作用下下墜。

首先，我們要使用「Interaction」分類下的「Started Touching」行為。只要將它從選單拖曳到空白區域即可。完成後，這個行為就會附加到物件上。你可以點一下該行為來開啟其屬性，但我們不需要更改任何設定。

當然，只有這個行為不會發生任何事，因為觸碰飛機後並沒有接續的動作。我們來補上動作。前往「Physics」分類，往下滑動，直到看到「Modes」區段。將「Make Physics」行為拖曳到「Started Touching」行為下方。現在我們只要將它連接到「Started Touching」即可。在「Started Touching」底部，你應該會看到一個圓圈中的小閃電圖示。點住並拖曳它，你會看到一條線跟著手指移動。將這條線拖到「Make Physics」行為上，即可完成連接。

就這麼簡單。提醒一下，在 hyperPad 中，行為的結構是事件 -> 動作。在這個例子中，事件是我們開始觸碰飛機，動作則是讓飛機變成物理物件。現在先測試一下，確認一切運作正常。點一下畫面上方的播放按鈕，開始測試。測試完畢後，點一下右上角的三條橫線，開啟選單並選擇「Quit」。

如果一切正常，點一下飛機後，它應該會掉出畫面。

現在我們要讓飛機觸碰地面時結束遊戲。目前場景中還沒有地面，我們可以用 Empty Object 來代替。點一下畫面左上角的返回箭頭，回到畫布。

取消選取飛機，然後點一下停靠列右下角的 Special Objects 圖示（燒杯），開啟視窗並建立另一個 Empty Object。接著將它放在畫布底部，並拉伸至覆蓋整個底部。

選取飛機，再次開啟行為視窗。現在我們要加入「失敗」條件。回想一下前面提過的，hyperPad 行為採用「事件 -> 動作」的運作方式。在這裡，事件是飛機與地面碰撞。我們來設定它。前往「Object」頁籤，在「Collision Detection」下方將「Collided」拖曳到工作區。完成後，點一下該行為以開啟屬性。最上方會看到兩個方框，一個已填入飛機，另一個是空的。點一下空白方框即可開啟畫布。點一下畫面底部的 Empty Object 來選取它，然後點一下底部的勾號套用。

接下來，我們需要設定動作。希望飛機與地面物件碰撞時，載入遊戲結束畫面。前往「Scenes」分類，往下滑到「Overlay」區段，選取「Load Overlay」行為，並將它拖曳到「Collided」行為下方。

將「Collided」行為連接到「Load Overlay」。接著，點一下畫布中的「Load Overlay」行為以開啟屬性。在行為屬性中，點一下「Select Overlay」。畫面會顯示覆疊清單。選擇 Game Over。這是預設自動建立的覆疊（你可以在 hyperPad 說明文件中進一步了解覆疊）。如果你想要增添一些效果，也可以加入轉場。

完成後，按下播放按鈕進行測試。點一下飛機後，它應該會下墜並顯示 Game Over 畫面。

遊戲邏輯：

繼續之前，我先簡單說明如何整理行為。為了避免行為雜亂，並讓日後修改更加容易，我們會將遊戲邏輯從飛機物件中分離出來。簡單來說，當飛機與地面碰撞時，我們不直接載入 Game Over 覆疊，而是建立自訂事件並廣播訊息。

為什麼要這麼做？如前所述，這樣能讓內容更有條理，也能讓日後調整容易許多。可以這樣思考：如果邏輯只影響附加它的遊戲物件，就把邏輯保留在該物件中。如果需要參照其他物件，或使用與該物件沒有直接關係的邏輯，就將其分開。例如，飛機與物件碰撞時播放墜毀音效，這項邏輯可以留在飛機上。但如果飛機碰撞後，該物件會發生變化，就應該將這段邏輯分開處理。

為此，我們會建立一個中介物件，負責協調各種動作，並將它們整理在方便存取的地方。

回到飛機的行為畫面，選取「Load Overlay」行為。屬性旁邊會出現一個小頁籤。點一下垃圾桶，刪除「Load Overlay」行為。這麼做是因為我們不會直接載入覆疊，而是廣播訊息，由遊戲邏輯接收訊息後再載入 Game Over 畫面。雖然這在技術上多了幾個步驟，但長遠來看會對我們有幫助。

若要廣播訊息，請前往「Custom」分類的「Broadcast」區段，將「Broadcast Message」拖曳到「Collided」行為下方（也就是先前放置「Load Overlay」的位置）。將「Collided」連接到「Broadcast Message」，然後開啟其屬性。在「Event Key」中輸入 Did Lose。這種情況下，「Broadcast Value」可以留白，因為我們只是在廣播失敗狀態。如果你的遊戲需要判斷玩家是否存活，就可以設定一個代表狀態的值（例如 Did Lose: Yes/No）。

加入廣播訊息後，即可返回主編輯器。

接下來，我們需要建立一個物件來存放遊戲邏輯。可以再建立一個 Empty Object，但我們希望能輕鬆找到遊戲邏輯，而場景中加入更多素材後，Empty Object 很容易被忽略。因此，我們會改用標籤。

建立標籤的方式與建立 Empty Object 相同。選取燒杯，在視窗中選擇「Label」。標籤就是一個包含文字的遊戲物件，除此之外，它的運作方式和其他物件一樣。點一下以選取它，在屬性下方標示「Label」的方框中輸入 Game Logic。如果你想要更醒目，可以調整對齊、外框和陰影屬性。請注意，文字會受到其邊界方框大小限制。

現在將 Game Logic 移到可見畫面範圍（綠色矩形）之外，避免玩家看見它。把 Game Logic 想像成幕後的舞台監督。只要它把工作做好，你就永遠不會看見它，但一切都會順利運作。

現在開啟 Game Logic 的行為。我們需要一種接收訊息的方式。在「Custom」分類中找到「Receive Message」行為並拖曳進來。開啟屬性，點一下「Event Key」，輸入 Did Lose，並確認拼法與「Broadcast Message」完全相同。接著前往「Scene」分類，將「Load Overlay」拖曳進來，並將它設為 Game Over。將兩個行為連接起來。

「Receive Message」行為是一種「監聽器」類型的行為。它會等待訊息，直到收到指定的訊息為止。在這個例子中，指定的訊息是「Did Lose」。收到訊息後，它就會觸發連接的動作。

按下播放按鈕進行測試。和剛才一樣，飛機撞到地面時，Game Over 畫面應該會立即顯示。

飛機跳躍：

在這款遊戲中，我們希望飛機在水平方向保持靜止，也就是說，它不會左右移動，只會上下移動。我們不會讓飛機在遊戲世界中水平飛行，而是讓場景繞著飛機移動，營造出飛機在水平前進的效果。這種設計是為了配合單鍵操作玩法。點擊螢幕，飛機就會上升，接著開始下墜。

回到飛機的行為畫面，在「Custom」分類中加入新的「Behaviour Bundle」。開啟它的屬性。與其他行為不同，這個行為組合一開始是完全空白的。不過，我們可以更改它的名稱。在屬性最上方，點一下「Behaviour Bundle」名稱並將它改為 Jump。接著，我們要讓這個行為組合預設為關閉。在屬性旁邊的小側欄中找到「On」，點一下將它關閉。此時行為組合應該會變成灰色。

行為組合可用來將一組行為連接在一起。此外，其中的行為會依照由左至右的順序執行。這樣我們就能更妥善地控制各種行為何時、如何執行。我們會先將這個行為組合關閉，因為在遊戲開始之前，不希望它及其連接的動作啟動。

現在要將一些行為連接到行為組合。首先加入「Physics」頁籤下的「Set Velocity」。開啟屬性，將 X 和 Y 設為 0。這麼做是為了消除施加在飛機上的重力，並取消仍在作用中的先前跳躍。

接著需要加入「Physics」頁籤下的「Apply Force」。X 值留白，並更改 Y 值。目前先設為 5。之後我們可以調整這個數值，找出最適合飛機的效果。

在行為組合上方加入新的「Started Touching」行為，並將它連接到 Jump 行為組合。現在要讓這個「Started Touching」對應到我們先前建立的按鈕。開啟它的屬性，點一下飛機以切換到畫布。將圖層改為 Button，然後點一下按鈕內部。

你的行為現在應該會類似下圖：

不過，在測試之前還有幾件事要處理。首先，我們需要啟用行為組合。前往「Custom」分類，加入「Behaviour On」，並將它連接到「Started Touching」按鈕。開啟屬性，點一下「Select Behaviour」區段，然後從清單中選取 Jump 行為組合。如此一來，第一次碰觸按鈕時，Jump 行為組合就會啟動並開始對飛機施力。當然，這樣會遇到我們先前建立的第一個「Started Touching」行為所造成的問題。我們來處理一下。

在第一個「Started Touching」下方加入「Behaviour Off」（位於「Custom」分類），並將它連接到原本的「Started Touching」。在其屬性中，選取你想要關閉的行為，也就是同一個「Started Touching」。這樣一來，飛機會先變成物理物件，然後再停用觸碰飛機的功能。不過還沒完成。接下來要加入「Broadcast Message」，表示遊戲已經開始。加入「Broadcast Message」，並將它連接到「Make Physics」行為下方。這樣可以確保訊息在停用行為之前先送出。將「Event Key」設為 Did Start。

最後，我們可以加入最後幾個行為。新增「Receive Message」行為，但不用將它連接到任何行為，因為我們希望它自行執行。將「Event Key」設為 Did Start。接著加入「Behaviour On」，並將它連接到「Receive Message」。讓它開啟我們新增的第二個「Started Touching」。

等等，你可能會問，那個行為不是已經啟用了嗎？沒錯！我們把它關掉吧。這樣就不會有按鈕重疊而造成錯誤的問題。完成後，飛機的行為應該會類似下圖：

來測試一下。你可能會注意到，即使點了螢幕，飛機還是像石頭一樣往下掉。這是因為「Apply Force」設定為 5，但重力的作用值為 -25。若要讓飛機飛起來，我們必須克服重力。開啟「Apply Force」的屬性，將 Y 值改為 50，並將乘數設為 5。這應該能給飛機足夠的升力，讓它在空中短暫停留。你可以花點時間調整數值，直到找到理想的效果。

加入障礙物：

接下來，我們要加入玩家必須避開的障礙物。遊戲中主要有兩種障礙物：懸崖和天花板。沒錯，是天花板。不，我們不會把場景設定在洞穴裡。原因很簡單：如果沒有天花板，玩家理論上可以瘋狂點擊螢幕，讓飛機飛出畫面，甚至完全避開所有障礙物。那可就不好玩了，對吧？

先從天花板開始，這部分很簡單。和地面一樣，我們會使用 Empty Object。確認目前位於 Main 圖層，加入 Empty Object，將它拉伸至螢幕寬度，然後移動到畫布上方。這樣飛機可以在畫面範圍內飛行，但超出範圍就會撞上天花板。在 Empty Object 的屬性中，點一下「behaviours」按鈕下方，你會看到三個圖示：火箭、磚塊，以及直向風景圖。這些按鈕會決定 Empty Object 的類型。從左到右分別是 Physics Object、Wall Object 和 Scenery Object。

Physics Object 會受到物理效果影響，我們不希望它受到影響。Wall Object 是實心並具有碰撞效果，但不會受到外力影響。Scenery Object 沒有碰撞效果，也不會與任何物件互動。一般來說，純粹用來裝飾的物件都應設為 Scenery，以節省記憶體並提升遊戲效能。

將 Empty Object 設為 Wall Object，然後在這些按鈕下方找到「Passable」，開啟開關。如此一來，方塊就不會掉到地面，但飛機仍可以穿過它。這樣飛機碰到方塊時不會直接停下，而是可以稍微飛出畫面後才開始下墜。

為了保持整潔，趁 Ceiling 物件仍被選取時，將它重新命名為 ceiling。在屬性選單頂端，點一下「Empty-#」並輸入 Ceiling。保持整齊總是有好處的。

接下來，我們要為 Ceiling 加上標籤。只要多個物件共用同一個標籤，就可以用標籤一次參照這些物件。例如，你有一個電燈開關，使用時會開啟場景中的多盞燈。只要為所有燈加上相同標籤，就可以一次參照它們，並同時開啟所有燈。在我們的例子中，希望飛機撞到天花板或懸崖時下墜，因此會加上標籤來觸發此效果，並節省設定行為的時間。

選取 Ceiling 物件並開啟屬性頁籤後，往下看，你會看到一列五個按鈕。第一個按鈕應該是灰色的，接著是火箭圖示（預設會開啟）、四個箭頭、一疊四條線，以及標籤圖示。點一下標籤圖示，開啟標籤視窗。在這裡，你可以搜尋既有標籤或建立新標籤。我們要建立一個新標籤。點一下 + 號，輸入 Wall，然後點一下「OK」。Wall 就會出現在搜尋列下方，右側會有一個綠色圓圈。這個圓圈表示標籤已套用至物件。如果想更換標籤，只要點一下標籤名稱即可移除。

現在，我們要讓飛機與標記為「Wall」的物件碰撞，並在碰撞時停用玩家輸入。這樣飛機就會下墜並結束遊戲。選取飛機並進入行為畫面。在「Objects」分類中選取「Collided」，然後開啟屬性。現在，我們不要點一下「Select Object」並在畫布上選取 Ceiling，而是改為檢查標籤。若要這麼做，請前往屬性底部，點一下標籤圖示。畫面會顯示標籤清單，目前只有 Wall。選取它，再點一下由三條水平滑桿組成的圖示，返回主屬性視窗。現在你會在「Select Object」方框中看到標籤圖示。

完成後，只要從「Custom」頁籤加入「Behaviour Off」，並在其屬性中選取控制 Jump 行為組合的「Started Touching」即可。這樣碰到天花板時，飛機就無法繼續飛行。來測試一下吧。按下播放按鈕，持續點擊螢幕，直到飛機飛出界外。你應該會看到它接著下墜，並載入 Game Over 畫面。

你可能會想：「飛機為什麼只會上下移動？它不能前進的話，要怎麼飛過障礙物？」很簡單，我們會讓遊戲世界朝飛機移動。如果這聽起來有點奇怪，也不用擔心，遊戲進行時你不會察覺。

接著加入懸崖。回到素材瀏覽器，往下滑找到懸崖素材。有多種版本，你可以選擇自己喜歡的版本。本教學會使用基本的岩石版本。

將懸崖拖曳到畫布上，然後把它移到右側，讓它不會顯示在畫面中。接著將它設為可穿透的牆壁物件。現在我們要更改錨點。hyperpad 會將錨點視為物件的中心位置，因此在計算位置時會參照錨點，而不是物件實際的幾何中心。

要更改錨點，我們需要開啟變換屬性。在屬性視窗底部，選取四個箭頭以開啟變換選項。找到錨點並解除鎖定。此時懸崖上應該會出現一個藍色錨點。點住並拖曳錨點，將它放在盡可能接近懸崖頂端的位置。完成後再次鎖定錨點。

現在，我們需要讓懸崖朝玩家移動。開啟懸崖的行為，加入「Physics」分類下的「Set Velocity」。將 Y 速度設為 0，X 設為 -2。這會讓懸崖慢慢向左移動。提醒一下，在 X 軸上，負值會讓物件向左移動，正值則會讓物件向右移動。Y 軸也是如此：負值向下，正值向上。

不過，這個速度實在太慢了。每次都得回到懸崖的行為中調整數值，很快就會讓人厭煩。我們可以改用「屬性」來加快這個流程。前往 Game Logic 標籤並開啟其屬性。還記得底部那個由四條線堆疊而成的圖示嗎？點一下它即可開啟「Attributes」視窗。建立屬性的方式和標籤類似，因此建立一個新屬性，並命名為 Speed。

你會注意到，和標籤不同，新屬性下方有一個輸入框。我們可以在這個欄位中輸入數值，讓其他物件參照它。目前先將 Speed 設為 5。現在可以回到懸崖的行為，在「Objects」頁籤下加入「Get Attribute」行為。

開啟「Get Attribute」屬性，點一下出現的懸崖圖示。在畫布上選取 Game Logic 標籤，並在「Attribute Key Type」中選擇「Predefined」，然後在輸入框中選取 Speed。

接著，我們要確保懸崖往左移。還記得我說過 X 軸上的正值會讓物件往右移嗎？現在我們要反轉這個方向。前往「Logic」頁籤，選取「Multiply Values」。將它連接到「Get Attribute」，並開啟其屬性。現在你會看到兩個輸入框。第一個方框是數值，第二個方框是要乘上的數值。注意，選取「Multiply Values」時，某些行為的角落會出現帶有向上箭頭的小綠色圓圈。這代表我們可以在輸入框中使用這些行為的輸出值。只要點住「Get Attribute」行為上的圓圈，拖曳至「Multiply Values」屬性的第一個輸入框即可。（若想進一步了解，請參閱共用值說明文件）

接著，在第二個方框中輸入 -1。這樣一來，Speed 的值 5 會乘以 -1，結果為 -5。因此懸崖現在應該會以每秒 5 公尺的速度向左移動。稍等片刻就會看到效果。回到「Set Velocity」行為，將原本輸入的 -2 替換為「Multiply Values」的輸出值，Y 值維持 0。

測試遊戲，看看懸崖如何從畫面中移動而過。現在懸崖的速度應該恰到好處；你也可以回到 Game Logic 標籤的屬性，快速調整它的速度。比起每次都開啟懸崖的行為來得方便，對吧？

不過你會注意到，飛機直接穿過懸崖了。這是因為我們將它設為可穿透。雖然要保留這項設定，但我們仍可以讓飛機撞上懸崖。只要套用 Wall 標籤即可。開啟懸崖的屬性，前往標籤頁籤，選取 Wall 並測試遊戲。記得要讓飛機撞上懸崖。

是不是發生奇怪的事？飛機在還沒碰到懸崖之前就開始失控下墜。這是因為懸崖的碰撞方框沒有正確設定。物件的碰撞區域預設會與邊界方框（可以點選物件的區域）尺寸相同。邊界方框由物件圖像的最大寬度和高度決定。因此，不論物件外形如何，邊界方框及其碰撞區域都會延伸成能包住整個物件的方框。

要如何修正呢？很簡單。

hyperPad 內建碰撞編輯器，讓我們能輕鬆微調物件的碰撞區域。若要開啟，請進入懸崖的屬性，在左側找到熟悉的小視窗，裡面有三個選項：兩個箭頭指向彼此、兩個重疊方框，以及垃圾桶。

我們要選第一個選項。點一下即可開啟碰撞編輯器。

你會立刻在側邊工具列上看到一系列工具。前兩個工具用於導航和移動。選取箭頭後，就可以像縮放物件一樣縮放方框，輕鬆調整懸崖的碰撞區域。不過，如果希望碰撞區域盡可能精確，方框可能不是最理想的形狀。

接下來的三個工具可以幫上忙。前兩個工具分別是圓形和正方形，可以將邊界方框改成對應的形狀。第三個工具看起來像不規則多邊形，讓我們只要點擊螢幕並連接各個點，就能建立自訂碰撞方框。這次使用這個工具。

選取該工具，然後點一下懸崖尖端。原本的碰撞區域會消失，並出現一個小綠點。接著點一下懸崖左下角，建立第二個點，並以黑線連接。再點一下右下角，建立第三個點，最後連回原本的點。如果沒有完全對準也沒關係，我們可以輕鬆修正。只要點一下箭頭工具，就能拖曳各個點，讓它們更貼合懸崖外形。最後你應該會看到類似下圖的形狀：

最後，點一下勾號來儲存變更。如果設定錯誤，可以使用橡皮擦工具，或點一下 X 取消所有變更並重新操作。完成後再次測試遊戲。飛機撞上懸崖時，現在應該會正常下墜。

但現在遊戲還是有點太簡單了。只有一座懸崖，而且位置永遠不變。我們得讓遊戲更有趣！計畫是讓懸崖生成時的 Y 軸位置隨機變化，並由 Game Logic 控制位置和生成頻率。懸崖本身則負責控制移動。這時，前面提到的分離遊戲邏輯就派上用場了。

首先，回到 Game Logic 的「Attribute」清單，建立一個名為 Cliff Bottom pos 的新屬性。

接著進入 Game Logic 的行為，建立一個新的「Behaviour Bundle」，並命名為 Calculate Positions。然後前往「Logic」頁籤，找到「Random Number」行為。開啟屬性，將數值設為 4 和 14。將它連接到 Calculate Positions 行為組合。

你可能會想知道這些數字是怎麼來的。要了解原因，請回到素材瀏覽器，再次找到懸崖。點住懸崖片刻，開啟選項視窗。點一下「Preview」，即可開啟影格預覽。在這裡可以看到懸崖尺寸為 8 公尺 x 16 公尺。

我們將數值設為 4 和 14，是因為懸崖生成時，它的 Y 軸位置會在 4 到 14 公尺之間隨機變化，也就是上下移動的範圍。我們也設定了這些限制，避免懸崖生成得太高或太低。

回到 Game Logic 的行為畫面，前往「Objects」頁籤，找到「Set Attribute」行為。將它連接到「Random Number」行為。開啟「Set Attribute」屬性，將「Attribute Keys」設為「Predefined」，並選擇 Cliff Bottom pos。至於「Attribute Value」，從「Random Number」行為右上角取得輸出值，並將它放入「Attribute Value」輸入框。

目前這部分已完成。接著回到懸崖的行為畫面。

在懸崖的行為中，從「Objects」頁籤加入新的「Get Attribute」行為。開啟屬性並點一下懸崖圖像，將目標改為 Game Logic。回到畫布後，點一下 Game Logic，再點一下勾號。將「Attribute Keys」設為「Predefined」，並選擇 Cliff Bottom pos。

現在我們要設定懸崖的起始位置。前往「Transform」行為分類，開啟「Advanced」頁籤。在行為清單底部可以看到 Basic 和 Advanced 兩個選項。點一下 Advanced，顯示所有行為。往下滑到 Position，選取「Move to Point」，並將它連接到剛加入的「Get Attribute」。開啟「Move to Point」屬性。Transition 和 Position Type 維持原設定。X 值要設為畫面外的位置，目前先輸入 40。Y 值則指定為「Get Attribute」的 Cliff Bottom pos。最後將 Duration 設為 0。

測試一下。

很可能懸崖位置沒有改變。這是因為位置是在它生成後才計算的。因此，我們要生成更多懸崖，看看隨機位置的效果！要這麼做，請回到 Game Logic 的行為畫面。

加入新的「Random Number」行為（位於「Logic」分類），並將數值設為 1.5 和 3。這些數值會成為生成計時器，因此每隔 1.5 到 3 秒就會生成一座新懸崖。生成間隔越短，懸崖之間的距離就越近，反之亦然。接著，從「Custom」頁籤加入「Wait」行為。在它的屬性中，將時間設為剛加入的「Random Number」。

接著，我們要加入「Behaviour On」，並指定 Calculate Positions 行為組合。如此一來，每生成一座懸崖，我們都會計算新的位置。現在要生成懸崖了。

前往「Objects」分類，開啟「Advanced」頁籤，找到「Spawn on Area」。將它拖曳到「Behaviour On」下方並連接。開啟屬性頁籤，應該會看到 Game Logic 圖像。點一下圖像並選擇懸崖。現在我們生成的會是懸崖，而不是更多 Game Logic。接著，在屬性底部開啟「Recycle」開關，並將「# Alive Objects」設為 5。開啟「Recycle」後，達到懸崖數量上限時，較舊的物件就會自動移除。本例的上限為 5 個。

如果不確定某些屬性的用途，別忘了可以隨時點一下底部的 i 圖示，查看該行為的快速參考說明。

接下來，我們要讓這個流程不斷循環，持續生成懸崖。加入新的「Behaviour On」，並將它指定為用作計時器的「Random Number」。

生成完成後，「Random Number」就會再次啟動，形成無限循環，不斷生成試圖撞死玩家的懸崖！太棒了！來測試一下。

現在應該會看到懸崖以隨機方式朝我們移動。不過還有些問題，我們來整理一下。

建立新的「Behaviour Bundle」（位於「Custom」分類），開啟屬性並點一下名稱，將它重新命名為 Initial Cleanup。接著前往「Objects」頁籤，取得「Destroy Object」行為。在屬性中，將目標設為懸崖。另外還有一個問題：玩家甚至還沒點擊螢幕，懸崖就已經開始移動了。

要解決這個問題，首先將控制懸崖生成的「Random Number」預設設為關閉。點一下以開啟屬性視窗，在小視窗中找到「On」並點一下將它關閉。若要開啟它，只要告訴生成器遊戲已經開始即可。

開啟「Custom」頁籤，找到「Receive Message」。我們先前已經設定好所需的廣播訊息（建立飛機時設定的）。在「Event Key」中輸入 Did Start。現在加入新的「Behaviour On」，並指定為該「Random Number」。

按下播放按鈕。現在應該運作正常了……不過難度還是不高，對吧？我們來提高難度。

回到主編輯器，選取 Game Logic，並開啟「Attributes」頁籤（位於屬性底部，由四條線堆疊而成的圖示）。建立新屬性，命名為 Cliff Top pos。接著前往「Logic」頁籤，找到「Add Values」行為。我們要將它加入 Calculate Positions 行為組合。點一下連接「Random Number」（4-14）與「Set Attribute」的線，將兩者分開，這樣就能把「Add Values」行為插入其中。將「Add Values」連接到「Random Number」，再將「Set Attribute」連接到「Add Values」。開啟「Add Values」屬性，從「Random Number」取得輸出值（行為右上角），並放入第一個輸入框。第二個方框則輸入 8。

我們要在現有懸崖上方生成第二座上下顛倒的懸崖。這樣就能讓新懸崖固定生成在另一座懸崖上方 8 公尺處，為飛機留出穿越懸崖的空間。接著前往「Objects」頁籤，再加入另一個「Set Attribute」行為。將它連接到「Add Values」，並開啟屬性。將「Attribute Key」設為 Cliff Top pos，「Attribute Value」設為「Add Values」的輸出值（行為右上角）。

不過，這樣還不會看到任何變化。首先回到編輯器並選取懸崖。開啟屬性後，找到物件選單（在 Object 屬性中）的第二個圖示，也就是兩個上下重疊的方框或紙張。這是複製按鈕。點一下它，現在就會有兩座懸崖。

開啟新懸崖的行為。你會發現連行為也一起複製了，這樣更方便。開啟第二個「Get Attribute」的屬性（連接到「Move to Point」的那個），將「Attribute Key」改為 Cliff Top pos。

回到編輯器，選取懸崖後，你應該會在右上角看到一個圓圈中的彎曲箭頭和兩個點。這是旋轉工具。我們要將懸崖旋轉 180 度，使它朝下。但直接使用旋轉工具幾乎不可能精準轉到 180 度。我們要開啟吸附功能。

只要啟用格線，吸附功能就會自動開啟。格線工具位於左側工具列，在螢幕解析度設定下方。點一下它，接著旋轉懸崖，直到它上下顛倒。（另外，你也可以在 Object Properties 的 Transform 頁籤中旋轉物件。）

這部分快完成了。回到 Game Logic，開啟 Initial Cleanup 行為組合。前往「Objects」分類，再加入第二個「Destroy Object」行為，將它連接到行為組合，並將目標設為新懸崖。

最後，我們要加入第二個「Spawn on Area」，讓這座懸崖也能正常運作。若要節省時間，只要複製現有的「Spawn on Area」，將它連接到「Behaviour On」（Calculate Positions），並將目標設為新懸崖即可。

按下播放按鈕進行測試。

你的飛機可能太大，無法安全通過兩座懸崖之間。如果遇到這種情況（我就是如此），我們來快速修正。回到編輯器並選取飛機。在屬性底部，點一下四向箭頭以開啟 Transform 屬性。在 Scale 區段中，點一下斷開的鏈結圖示。這會鎖定等比例縮放，讓你更改一個數值時，另一個數值也會跟著變更。

雖然也可以拖曳物件角落來手動縮放，但透過 Transform 屬性來縮放會更加精確、簡單。鎖定等比例縮放後，點一下 X 軸的輸入框並輸入 50。這會將飛機縮小一半。按下播放按鈕再次測試。飛機現在應該可以安全地穿過懸崖之間。

現在我們已經有一款可以玩的遊戲了！不過，光是穿越懸崖還不夠刺激。接下來，我們要加入分數，讓玩家有更多動力繼續遊玩。

加入分數：

為什麼要加入分數？因為這是遊戲中歷史最悠久，也最有效的玩家動機之一。分數能讓玩家一玩再玩。誰不想挑戰自己的最高分呢？我們稍後會加入更多鼓勵玩家的內容，例如根據得分頒發獎牌，但這部分之後再說。

要如何計算遊戲中的分數呢？我們只需要建立一個感應器，確認玩家成功穿越懸崖後，便為分數加一。做法和建立上方懸崖時類似。我們會建立一個 Empty Object（不希望玩家看見它，只要讓遊戲能偵測飛機已穿越感應器即可），並加入現有行為，讓感應器和懸崖一起生成，且始終保持相對位置不變。

首先，在編輯器畫面中選取 Game Logic，並開啟 Object Properties 中的「Attributes」頁籤（由四條線堆疊而成的圖示）。建立一個新屬性，命名為 Cliff Score pos。接著進入行為，開啟 Calculate Positions 行為組合。

現在我們要加入「Subtract Values」，因為要計算感應器相對於上方懸崖的位置。首先，按住連接「Set Attribute」和「Add Values」的線，將它們分開。

接著開啟「Logic」分類，將「Subtract Values」行為拖曳進來。將它連接到「Add Values」，然後將「Set Attribute」連接到「Subtract Values」。接著，將「Add Values」的輸出值放入「Subtract Values」第一個輸入框，並在第二個方框中輸入 4。現在前往「Objects」頁籤，加入新的「Set Attribute」。將它連接到「Subtract Values」，然後將「Attribute Key」設為 Cliff Score pos，「Value」設為「Subtract Values」的輸出值。

現在可以回到主編輯器，建立感應器物件。點一下燒杯並選取 Empty Object。接著在它的屬性中開啟 Transform 頁籤（四個箭頭），將縮放值設為 X 50、Y 350。

接著開啟感應器的行為。我們要做的事情和懸崖非常相似（感應器需要和懸崖一起生成並移動），你可以參考懸崖的設定。

首先從「Objects」分類加入「Get Attribute」行為，並在行為屬性中將目標物件設為 Game Logic，將「Attribute Key」設為 Speed。前往「Logic」頁籤，加入「Multiply Values」並連接到「Get Attribute」。在屬性中，將第一個輸入框設為「Get Attribute」的輸出值（右上角），並將它乘以 -1。

接著前往「Physics」頁籤，加入「Set Velocity」，並將它連接到「Multiply Values」。在屬性中，將 X 設為「Multiply Values」的結果（同樣位於右上角），Y 設為 0。

現在再從「Objects」分類加入第二個「Get Attribute」，在屬性中再次將目標物件設為 Game Logic，並將「Attribute Key」改為 Cliff Score pos。接著在「Transform」分類中開啟「Advanced」頁籤，加入「Move to Point」。將 X 位置設為 41，Y 位置設為「Get Attribute」的輸出值（Cliff Score pos）。這樣可以確保感應器會在懸崖缺口後方進場。將 Duration 設為 0。

如果仍然不確定，也可以回到懸崖，仔細檢查行為設定。這裡的行為幾乎完全相同。

回到 Game Logic 的行為畫面，找到生成器行為。我們需要為感應器建立新的「Spawn on Area」。選取其中一個現有的「Spawn on Area」，開啟行為屬性，然後在側邊選單中點一下重疊方框圖示進行複製。接著將目標物件（Object A）從懸崖改為 Empty Object。

最後，我們要在 Initial Cleanup 行為組合中加入感應器的清理動作。和之前一樣，加入「Destroy Object」並連接到行為組合。開啟它的屬性，將目標設為 Empty Object。

完成後，下一步是為飛機得分建立事件。這表示我們需要建立一個行為，偵測飛機穿過感應器，然後增加計分器的分數。

首先回到感應器物件並開啟行為。開啟「Objects」分類並加入「Collided」行為。將碰撞物件 B 設為飛機。這麼做可以省去使用標籤的需要；如果什麼都用標籤，整個設定可能會變得太複雜。接著前往「Custom」分類，加入「Broadcast Message」並連接到「Collided」行為。將訊息的「Event Key」設為 Did Score。

現在我們需要一種方式來顯示分數。為此，我們需要建立一個標籤。

回到主編輯器，切換至 Scene UI 圖層，然後點一下停靠列中的燒杯。選取「Label」，並將它移到遊戲區域上方中央。將字體大小設為 120 pts（可能需要調整對齊方式才能看到文字），並加上 4 點的黑色外框（記得將不透明度調到最大）。接著點一下三個彩色相交的圓圈來更改文字顏色。在新展開視窗的頂端，你會看到色碼，輸入 9B8766FF。

接著我們要更改字型。要使用 Futura Condensed Extra Bold。若要取得這個字型，需要快速匯入一次。開啟分數標籤的屬性後，點一下顯示大型 Helvetica 字樣的方框，開啟素材瀏覽器。在左側找到「Import」，點一下以開啟新視窗。接著點一下「System Fonts」。往下滑，或點一下右側的 F，找到 Futura- Condensed Extra Bold。點一下它，再點一下右上角的「Done」。現在這個字型應該會出現在瀏覽器中。若要套用，只要點一下它即可。最後，更改遊戲中顯示的文字。在文字框中刪除 Label，直接輸入 0。

開啟新標籤的行為，前往「Custom」分類。加入「Receive Message」，並將「Event Key」設為 Did Score。接著前往「UI」分類，加入「Add to Score」行為並連接到「Receive Message」。

按下播放按鈕，看看自己能得到幾分！

最高分：

現在我們應該要儲存最高分，因為目前關閉遊戲後，分數就會消失。最高分也能增加遊戲的重玩價值。玩家更有可能回來遊玩，努力打破自己的紀錄。

回到 Game Logic 並開啟行為（別忘了切回 Main 圖層，或存放 Game Logic 的其他圖層）。開啟「Custom」分類，加入新的「Receive Message」，並將「Event Key」設為 Did Start。接著往下滑至「Permanent Storage」區段，加入「Load from File」，並將它連接到「Receive Message」。

開啟「Load from File」的屬性，將「Default Value」設為 0。「Key Type」先保持原樣，目前還不需要設定。

接著加入另一個「Receive Message」行為，並將「Event Key」設為 Did Lose。這樣每次遊戲結束時，就會更新儲存資料。開啟「UI」分類，加入「Get Label」行為，並將它連接到 Did Lose 的「Receive Message」。將物件設為分數標籤（選取時可能需要切換圖層）。接著前往「Logic」分類，加入「If」行為並連接到「Get Label」。現在將「Get Label」的輸出值放入「If」行為的第一個輸入框，將「Load from File」的輸出值放入第二個輸入框。接著將中間的「Is Equal to」改成「Is Greater Than」（「>」符號）。

這麼做是因為我們只想在目前分數高於先前儲存的最高分時儲存分數。現在要真正儲存這個值。在「Custom」分類中，往下滑至「Permanent Storage」區段，加入「Save to File」，並連接到「If」行為。在屬性中，將「Key Type」設為「Existing」。接著點一下「Select Key」，在新視窗中按下 + 號並輸入 Highest Score。現在我們建立了一個新 Key，可以搭配「Load from File」參照。接著將「Value to Save」設為「Get Label」行為的輸出值。

回到「Load from File」，開啟屬性，將「Key Type」設為「Existing」，並將「Select Key」設為 Highest Score。

我們也應該儲存目前分數，方便稍後呼叫。

在「Get Label」下方加入新的「Save to File」。開啟屬性，將「Key Type」設為「Existing」。點一下「Select Key」，再按下 + 圖示。輸入 Previous Score，並將「Value to Save」設為「Get Label」的輸出值。

接下來，我們要調整 Game Over 畫面，顯示分數、獎牌等資訊。

Game Over 畫面：

此時，遊戲基本上已經完成，剩下唯一重要的部分就是設定合適的 Game Over 畫面。之後的工作就只是潤飾。在這裡，我們要加入玩家目前的分數、最高分、達到高分時顯示的小小成就指示器，最後再加入重新開始按鈕。

好消息是，我們不需要從頭建立 Game Over 畫面，因為我們已經使用 hyperPad 預設建立的覆疊。不過目前的畫面太單調、太無聊了，我們需要美化一下。

若要存取覆疊，需要開啟 Scene Menu。在主編輯器中點一下左上角的三條橫線即可。畫面會顯示遊戲中所有場景的清單（目前只有一個場景）。底部會看到標示為「Overlays」的頁籤。點一下開啟後，就會看到 hyperPad 預設建立的兩個覆疊：Pause Menu 和 Game Over。點一下 Game Over，切換場景並載入它。

載入後，你應該會看到一個相當單調的場景：黑色背景上只有一些文字。