使用 Smart Shape 建立 OrbitRun｜第 1 部分：首次發射

在本教學中，你將製作一款以 Tiny Wings 為靈感的滑坡遊戲。按住螢幕讓飛船沿著山坡俯衝，到了谷底時放開，乘著慣性飛向天空。飛行時，Smart Shape 會產生後續山坡。

從空白專案開始，依照螢幕截圖和 GIF 一步步操作。

點一下螢幕截圖或示意圖，即可開啟原尺寸圖片並查看細節。

本系列的學習路線

1. **本頁（步驟 1–5）：**建立專案、加入飛船和介面，並產生你的第一段賽道。
2. 第 2 部分：控制飛行：控制、慣性、距離和倒數計時。
3. 第 3 部分：世界變化與重新遊玩：更換地形美術、結束飛行並儲存個人最佳紀錄。
4. 第 4 部分：音效與最後修飾：音樂、軌跡、粒子，以及載入時的備援處理。
5. 第 5 部分：掌握飛行節奏：更強勁的飛行、翱翔鏡頭，以及逐步加快的節奏。
6. 第 6 部分：電池拾取物：可重複使用的拾取物，以及可延長的能量計時器。

每加入一項功能，就花點時間試玩看看。你會更早發現錯誤，也能感受每項變更帶來的效果。如果你已熟悉編輯器，可以透過示意圖查看連線方式，並在製作過程中嘗試調整設定。

取得相同的素材

• 下載 OrbitRun 素材：PNG 美術圖、音訊和粒子檔案。
• 下載僅含素材的入門專案。這是已匯入素材的空白專案。
• 下載全部 20 個可編輯檢查點。每個 .tap 檔案的數字代表最後完成的步驟。
• 下載重新建置的完成專案，其中的行為群組已分開並命名。

在 iPad 上，使用 Safari 下載 ZIP 檔案，前往 檔案 → 下載項目 找到檔案，然後點一下解壓縮。若是 .tap 專案，請使用「檔案」的「分享」選單，並選擇在 hyperPad 中開啟。請將自己的作品和檢查點儲存為不同專案。你可以用檢查點比對設定，而不會遺失自己的進度。原始粒子資料夾可供重複使用；若要將現成的粒子效果加入素材庫，使用入門專案是最簡單的方法。

你需要使用提供 Generate Smart Shape，並具備 Terrain、Endless 模式和 Ready 觸發條件的 hyperPad 版本。如果找不到該行為，請改用包含 Smart Shape 的版本再繼續。

1. 建立空白橫向專案

1. 在 我的專案 中建立新的空白專案，命名為 OrbitRun Build Along。
2. 選擇橫向 iPad 版面，設定為 4:3。本教學使用 每公尺 32 像素的世界比例。
3. 開啟世界設定（編輯器工具列上的地球圖示）。將世界重力設為 X 0、Y 0。稍後會為飛船設定個別重力。
4. 保留一個世界圖層給飛船使用。選用 Scene UI 放置選單、按鈕和分數標籤；鏡頭移動時，這些物件應固定在螢幕上。
5. 熟悉 Play、物件屬性面板，以及右下角的素材庫按鈕。

點一下 Play。你應該會看到空白場景。使用玩家選單返回編輯器。

飛船應放在世界圖層，因為它會沿著賽道移動。標籤則應放在 Scene UI，讓它們在鏡頭移動時保持固定。

2. 匯入美術素材

1. 在「檔案」中解壓縮下載的素材。
2. 開啟編輯器的 Asset Library。在 Graphics 中使用 Import 匯入 PNG 檔案。請透過音訊素材庫匯入 .m4a 檔案。如果你開啟的是僅含素材的入門專案，這些素材已經匯入。
3. 對照下列清單確認名稱。保留這些名稱，之後設定行為時會更容易辨識。

• orbit-skimmer：玩家飛船
• orbit-space：場景背景
• luna-top、luna-fill：紫色起始地形
• aurora-top、aurora-fill：綠色第二世界
• ember-top、ember-fill：暖紅色第三世界
• orbit-panel：選單卡片和按鈕
• orbit-pixel：可拉伸的實心矩形
• orbit-trail：飛船的軌跡

4. 在 Scene Settings 中，選擇 orbit-space 作為背景。讓背景維持填滿螢幕。

開啟匯入的素材並確認飛船背景是透明的，而且每個地形世界都有頂部圖形和填充圖形。

Smart Shape 會使用頂部圖形沿著山坡排列，並以中間圖形填滿下方的地面。因此，每個世界都需要這兩個檔案。

3. 為 Skimmer 設定小型圓形本體

加入、選取並開啟 Collision Editor

1. 在 Asset Library → Graphics 中點一下 orbit-skimmer，將它加入底部素材列。
2. 選取 Main 世界圖層，然後將飛船從素材列拖曳到場景中。
3. 點一下已放置的飛船。在 Object Properties 中，點選屬性面板旁窄工具列上的 Collision Editor。這段錄影中的薄荷綠色圓環會標示點按位置；移動的圓環會跟著拖曳動作移動。

將碰撞本體設為圓形

4. 在 Collision Editor 中，點選左側的圓形工具。將圓形置於飛船中央，直徑大約與飛船圖像的寬度相同。點選綠色勾號套用設定。

將物件重新命名為 Skimmer。設定 X 8 m、Y 21.5 m、錨點置中，以及 85% 縮放比例。這些數值很重要：之後計算分數時會減去起始 X 值，而飛船的大小和高度會影響第一次著陸。請在 Physics 中選擇 Dynamic，設定 Mass 1 kg、Friction 0%、Bounce 0%。保持碰撞功能啟用。

加入兩個起始屬性

5. 在 Object Properties 中開啟 Attributes 分頁。點選 +，將屬性命名為 runState，並將值設為 menu。再新增一個名為 music、值為 1 的屬性。這些是文字鍵，請確保大小寫完全如上所示。

屬性是儲存在物件上的值。遊戲執行時，行為會讀取並變更這些值。完整的編輯器操作流程請參閱 物件屬性，物理控制項則請參閱 物件物理屬性。

騰出工作空間：調整編輯器畫面

6. 選取左側的 Hand 工具，然後拖曳空白處，直到綠色螢幕矩形和 Skimmer 都清楚顯示在畫面中。這會移動你的編輯器視圖，不會移動遊戲中的飛船。要選取物件時，請切回箭頭工具。

綠色矩形預覽螢幕範圍。不要只為了讓飛船在編輯器視窗中置中，就重新調整飛船的位置。步驟 5 會使用 Screen to Object、Screen Follow 和 Zoom Screen 設定遊戲鏡頭；第 5 部分會再加入翱翔縮放效果。編輯器工具請參閱 介面概覽。

按下 Play。由於重力為零，飛船應保持靜止。如果飛船移動或下墜，請再次檢查重力設定。

圓形碰撞本體可以讓飛船滑過山坡，而不會被機翼尖端卡住。稍後你會旋轉圖像，讓它跟隨飛行方向。圓形碰撞本體與地面接觸的方式仍會保持一致。

4. 在 Scene UI 中建立飛行儀表板

你的介面需要標題畫面、飛行資訊，以及結束時顯示的結果。請參考下方圖片；間距和顏色可以自行選擇。

開啟 Layers 並選取 Scene UI，這樣鏡頭移動時介面就會固定在螢幕上。將這些物件的物理類型設為 Scenery，並關閉碰撞功能。如果這是你第一次使用 UI 圖層，請參閱 圖層。

先放置卡片，再加入標籤

以下是標題畫面的完成效果：

1. 將 orbit-panel 拖曳到 Scene UI，並調整大小作為卡片。再新增一個較小的面板作為 Launch 按鈕。
2. 在 Asset Library → UI → Fonts 中選擇一種字型，將標籤拖到卡片上，然後編輯文字。GIF 展示了完整操作步驟。
3. 為其他標籤和音樂按鈕重複上述步驟。讓標題清楚易讀，並在按鈕周圍留出足夠空間。

**後續會用到的名稱：**將卡片命名為 Menu Card、標題命名為 Wordmark、小型副標題命名為 Subtitle，說明文字命名為 Howto。將 Launch 圖形命名為 Start，其標籤命名為 Start Label。在下方加入 Menu Best，並在角落加入 Music Button 和 Music Label。每個標籤都要放在對應的按鈕圖形前方。

HUD 和結果物件

HUD 將螢幕中央留給飛行使用：

在頂端加入名為 Distance、Speed 和 Clock 的標籤。在下方加入 Stage，並在底部附近加入 Cue。再加入用於顯示簡短獎勵訊息的 Flow Label，以及一條名為 Hud Rule 的細長 orbit-pixel 分隔線。佔位文字可照圖片輸入；字體大小和間距由你決定。

用相同方式建立結果卡片：

再使用一個面板並命名為 Results Card，加入 Results Title、較大的 Results Score，以及 Results Tip。加入一個名為 Replay 的按鈕圖形和名為 Replay Label 的標籤，文字設為 FLY AGAIN。這些名稱能讓你在後續的行為步驟中找到正確的物件。

加入觸控區域

在其他 Scene UI 物件後方放置一個名為 Input Plane 的 orbit-pixel 圖形，並拉伸至覆蓋整個螢幕。將顏色不透明度設為 0%，但保持 Visible 開啟，這樣它才能接收觸控。

將 HUD 和結果物件的 Visible 設定關閉，直到行為將它們顯示出來為止。標題畫面和音樂按鈕則保持顯示。

按下 Play。確認標題清晰易讀、按鈕容易點選，而且 HUD 和結果物件都已隱藏。LAUNCH 按鈕會在下一步開始運作。

5. 產生賽道，然後起飛

如果選單擋住了 Skimmer，請開啟 Layers，點一下 Scene UI 的眼睛圖示，在編輯時隱藏該圖層。選取 Main，點一下 Skimmer，再點選 Behaviors。按下 Play 前，記得重新開啟 Scene UI 的眼睛圖示，讓選單和觸控控制項可以使用。

選取 Skimmer → Behaviors。本系列的所有遊戲邏輯都會放在 Skimmer 上，即使某個行為的目標是 UI 物件也一樣。這樣你就能在同一處檢視整個遊戲。

行為連線快速指南

要了解編輯器控制項，請參閱 Behavior Editor Rundown。建立前兩個行為時，請保持本教學開啟以便參考。

在左側面板搜尋 Started Touching。點兩下搜尋結果以加入它，然後拖曳行為，為下方留出空間。你也可以直接從清單中將它拖出來。

接著搜尋 Set Behavior State，將它加入，再把 Started Touching 的底部輸出拖到它上面。注意連線出現，第二個行為也會貼齊到第一個行為的下方。

現在點選每個行為以開啟其屬性。你可以使用頂端的欄位為它命名。這些名稱是用來辨識用途的別名。例如，你會搜尋 Started Touching，再將它命名為 Start Touch。

白色連線會告訴 hyperPad 接下來要執行什麼。將底部的白色圓圈拖到另一個行為上，即可建立連線。如果同一事件需要啟動第二個動作，請使用另一個未連接的圓圈。

值的連接方式則不同。選取接收值的行為，再將來源行為的綠色輸出圖示拖到輸入欄位。從清單中選取所需的輸出。這會傳遞來源的結果；只有在自己的執行連線觸發時才會執行。你會在第 2 部分透過錄影範例練習這個操作。

示意圖會一次加入一個行為。REUSE 表示你已經有該行為。反白標示和數字徽章都是教學輔助內容。遇到 If 時，它的底部輸出代表條件為真，右側輸出則代表條件為假。

依照示意圖中的流程操作，並預留足夠空間以便追蹤每條連線。使用 Comments 將不同的行為群組分開。

連接開始按鈕

1. 加入 Set Gravity，並將別名設為 Menu Gravity。目標為 Skimmer，重力類型設為 Object，X 0、Y 0。不要在頂層替它建立連線，讓它在場景開始時執行。

先處理 Launch 按鈕。第一次點按後，它會停用自身，確保每次飛行只產生一段賽道。

以靜態圖片開啟完成的示意圖。

1. 使用上方錄影中的 Started Touching 行為；如果你只是觀看錄影，現在就加入它。將它命名為 Start Touch。
2. 使用你已在旁邊加入的 Set Behavior State 行為，將它命名為 Disarm Start。保留錄影中建立的連線。如果你是從這裡開始，請加入此行為，並將 Start Touch 底部的白色圓圈拖到它上面。
3. 加入 Generate Smart Shape，並命名為 Generate。將 Disarm Start 上另一個未使用的底部白色圓圈拖到 Generate 行為上。
4. 加入 Change Label，並命名為 Loading。將 Disarm Start 上另一個未使用的底部白色圓圈拖到 Loading 行為上。

設定如下：Start Touch 的目標為 Start，Touch Anywhere Off，Absorbs Touch On。Disarm Start 停用 Start Touch。Loading 的目標為 Start Label，文字設為 PREPARING ORBIT...。Generate 的設定請見下一節。

如需更多詳細資訊，請參閱 在行為之間傳遞值。執行連線和資料輸入的用途不同。

設定 Generate Smart Shape

• Shape type / Action：Terrain / Generate
• Generation mode / Follow object：Endless / Skimmer
• Hill height / Hill spacing：15 m / 32 m
• Hill variation / Ground depth：38% / 35 m
• Top / Middle：luna-top / luna-fill
• Friction / Bounce：0.08 / 0
• Placement：X 0 m、Y 12 m、world layer
• Collision mode（若有顯示）：Surface
• Trigger on：Ready

Generate Smart Shape 參考指南說明了每項地形設定。

開啟 Position and layer 輸入放置位置，即使之後要將該區塊收合也一樣。側邊和底部圖形留空，並使用提供的中間圖形。

加入 Ready 分支

將 Generate 的輸出連接到以下每個動作。這些動作會在初始地形準備就緒時啟動，而不是在第一次點按 LAUNCH 時啟動。

• Hide Menu (Set Visibility)：隱藏 Menu Card、Wordmark、Subtitle、Howto、Start、Start Label、Menu Best
• Show Hud (Set Visibility)：顯示 Distance、Speed、Clock、Stage、Cue、Hud Rule
• Running (Set Attribute)：Skimmer；runState = running
• Launch (Set Velocity)：Skimmer；X 20、Y 0；兩個 Maintain Velocity 開關都設為 Off
• Camera (Screen to Object)：Skimmer；啟用兩個軸；持續時間 0
• Zoom (Zoom Screen)：85%，持續時間 0
• Release (Set Gravity)：Skimmer；Object gravity；X 0、Y −12

Follow 使用 Screen Follow，目標為 Skimmer，並啟用兩個軸。Glide Cue 將 Cue 的文字改為 GLIDING / HOLD ON THE DOWNSLOPE。

賽道準備就緒後，隱藏選單並顯示飛行資訊。

以靜態圖片開啟完成的示意圖。

1. 重複使用 Generate。
2. 加入 Set Visibility，並命名為 Hide Menu。將 Generate 上另一個未使用的底部白色圓圈拖到 Hide Menu 行為上。
3. 加入 Set Visibility，並命名為 Show Hud。將 Generate 上另一個未使用的底部白色圓圈拖到 Show Hud 行為上。
4. 加入 Set Attribute，並命名為 Running。將 Generate 上另一個未使用的底部白色圓圈拖到 Running 行為上。

再使用兩條 Ready 連線啟動飛船並設定滑翔重力。

以靜態圖片開啟完成的示意圖。

1. 重複使用 Generate。
2. 加入 Set Velocity，並命名為 Launch。將 Generate 上另一個未使用的底部白色圓圈拖到 Launch 行為上。
3. 加入 Set Gravity，並命名為 Release。將 Generate 上另一個未使用的底部白色圓圈拖到 Release 行為上。
4. 加入 Change Label，並命名為 Glide Cue。將 Release 上另一個未使用的底部白色圓圈拖到 Glide Cue 行為上。

設定鏡頭的起始視角，然後讓鏡頭開始跟隨 Skimmer。

以靜態圖片開啟完成的示意圖。

1. 重複使用 Generate。
2. 加入 Screen to Object，並命名為 Camera。將 Generate 上另一個未使用的底部白色圓圈拖到 Camera 行為上。
3. 加入 Zoom Screen，並命名為 Zoom。將 Generate 上另一個未使用的底部白色圓圈拖到 Zoom 行為上。
4. 加入 Screen Follow，並命名為 Follow。將 Camera 上另一個未使用的底部白色圓圈拖到 Follow 行為上。

按下 Play，再點一下 LAUNCH。紫色賽道出現時，選單應會切換成 HUD，而飛船也會開始移動。你已完成第一次起飛。分數和時鐘要到第 2 部分才會開始運作。

所有動作都從 Ready 開始，這樣飛船移動前，下方就已經有地面。該輸出也會提供產生物件的 ID，你會在第 3 部分用它來更換圖形。

繼續之前，試著將 Hill Spacing 設為 40，而不是 32。觀察較寬的山坡如何改變飛行，再將設定恢復為 32，以便進行下一課。

繼續閱讀第 2 部分：控制飛行。