DEFOLD入門#1：編輯器介紹與場景製作

最近開始研究能在手機上運行的HTML5遊戲，所以了接觸Defold。相比其他html5引擎(例如 Phaser, PixiJs, BabylonJS)，Defold的IDE比較完整，而且和我習慣的Unity引擎的開發模式大致相同。我已經研究了一會，想把一些知識紀錄一下並和大家分享。

學習前提與重點

學習Defold，其實不需太多前提知識，只需要對遊戲開發和編程有一點認識就可以。

不過進入以下內容之前，希望大家可以在Defold網站下載和安裝Defold:
下載地址：https://defold.com/download/
下載後，執行安裝檔就可以安裝了，很簡單的。

以下是這篇文章分享的的東西：

• 如何使用Defold編輯器
• Defold遊戲的架構
• 製作多重滚动的遊戲場景

系列介紹

這系列的課題，會教大家如何製作一個簡單的跑步遊戲（Endless Runner），遊戲設計是複製Chrome在離線時的那個恐龍遊戲。

試玩遊戲

整個系列文章包含以下內容：

• Part 1: 編輯器與場景製作 – 這篇文章
• Part 2: 遊戲角色與遊戲物件
• Part 3: 遊戲界面與遊戲流程
• Part 4: 遊戲音效和視覺特效

這次文章會主要分享場景製作的部分。

範例項目

本文章的範例項目，包含了項目需要的素材和代碼，項目內容主要分2部分：

• Runner-Starter: 這個是一個未完成的項目，讓大家動手實踐，包含了需用的素材。
• Runner-Final: 這個一個完成了的項目，讓大家體驗最終的效果和參考。

大家可以在這裏下載：
https://drive.google.com/file/d/12UfyWacLketxabskInNzWwraJcvQYTyu/view?usp=sharing

而範例的最後效果如下：

如何使用Defold編輯器

這部分會介紹在Defold中如何建立新項目和如何使用它的編輯器。

創建項目

打開Defold應用後，等待載入畫面結束後，你會看到這個界面：

右邊是最近打開的項目，點擊就可開啟；而在左點”New Project"就是創建新項目；

創建項目時，Defold給你幾個選項：

1. From Template:
   使用Template, Defold會幫你自動加入最簡單assets; 一般來說，都會使用這個選項。
2. From Tutorial/From Samples: 這個選項，Defold會複製一個比較完整的項目讓繼續你修改和開發。

創建新項目時候，有以下幾步：

1. 選擇使用那個Template，或者從那個Tutorial/Sample修改。
2. 定義項目的名字和項目位置，這一步十分重要。
3. 點擊"Create New Project"把目錄和主要文件創建出來。

編輯器界面

創建項目後，就會看到Defold編輯器，編輯器有以下幾個主要的視窗：

1. 資源視窗 (Assets)：這裏是擺放資源的地方，例如圖像，聲音等，而Defold創建的Script(腳本）和GameObject(遊戲物件)等，也是放在這裏。
2. 編輯器（Editors）:不同類型檔案的編輯器，例如遊戲設定，腳本，圖像等，都是在這裏，
3. 大綱（Outline）: 這裏會列出正在編輯資源相關的資訊，如果是遊戲物件或Sprite Altas，會列出相關的架構；製作遊戲物件或場景時，我們需要常常用到Outline。
4. 屬性（Properties) ：這裏可以設定物件的屬性。
5. 控制台 (Console)：這裡可以看到編譯中發生的問題，或者在運行中出現的錯誤。

編輯器操作說明

介紹幾個使用編輯器時，常常用到的快捷鍵（Hot Key)

快捷鍵	效果
F	把可視範圍拉到合適的大小
空白鍵	暫停/繼續播放動畫或特效
W，E，R	移動、旋轉、大小工具
Option+移動	移動編輯器的視點

F鍵的示範

空白鍵的示範

Defold遊戲的架構

使用 Defold 製作遊戲，其中很重要的事情，就是需要了解一下它的架構；

和Unity引擎一樣，Defold也是以GameObject+Component為基礎，GameObject是組成遊戲的基本元素。

這是另一個很重要的元素叫Collection，用來合不同GameObject；而在Defold中，只能在Collection中定義的物件架構(Hierarchy)。 Collection常應用在場景，或者比較複雜的物件上。

而令物件有不同外觀和行為的，就是使用Component。Defold提供了很多不同的Components，各自有不同的功用，而最常用的Component，就是Script和Sprite了。

最後組成遊戲的元素，還有GUI和GUI Script，他們是用來製作用戶界面的。

簡單來說，使用Defold製作遊戲，第一，就是使用GameObject、Collection和Component等製造遊戲場景；第二，使用Script來定義GameObject或Collection上的行為。
第三，然後使用Gui 和 Gui script製作界面；
最後，就是處理不同物件之間，及物件與界面之間的互動。

製作多重滚动的遊戲場景

介紹了Defold的基本操作，現在我們開始實踐一下，這次會先教大家如何製作遊戲的場景，場景的設計如下：

由於想模擬不同圖層有著不同距離，它們會用不同的速度移動，遠景移動慢，近景移動快；而這個技巧我們稱為多重滚动背景（Parallax Scrolling)。

項目架構

開發之前，講解一下項目的架構。

打開Runner-Starter這個範例項目，打開後，查看Asset目錄，你會看到這些內容：

以下是主要目錄的解說：

• assets/sprite : 圖片的位置
• assets/atlas: Atlas/Spritesheet的位置
• main: 遊戲物件(GameObject、Collection)和代碼會集中在這裏
• main/scene：這裏是場景的物件和代碼，這次的課題，主要在這裏工作
• input：輸入的設定
• game.project：這是遊戲的設定，例如開始場景，視窗大小等都在這裏設定。

製作背景和平台

首先，我們會製作背景層，這一步很簡單，只需要：創建Atlas，Atlas是把不同的圖像(Sprite)組合在一起的大圖片，Defold不能直接在GameObject加入Sprite，所以必須先創建Atlas，才能加入圖像；

創建Altas:

1. 選擇 assets/atlas 的目錄；
2. 滑鼠右鍵打開菜單，然後選擇New；
3. 在 New 對話框，中選擇 Atlas；
4. 輸入 Name 為 scene, 然後按 Create Altas；
5. Atlas 創建後，在Outline視窗中，按滑鼠右鍵打開菜單；
6. 選擇 Add Images，選擇assets/sprite/scene內所有的圖片，然後按 OK；

完成，就會生產以下的圖像：

加入背景：
在 main/scene 目錄，創建 scene.collection，然後：

1. 在 Outline，按 A 創建新的物件；
2. 把剛剛創建物件的名字改為 background；
3. 選擇 background，然後按 A 加入 Sprite Component；
4. 選擇剛剛創建的Sprite，把屬性修改為：
   • image: /assets/atlas/scene.altas
   • Default Animation: backgroundCastles
   • Position: (512，256）
5. 複製剛剛創建的Sprite，並把新的Sprite的位置改為(1536，256）；
6. 把background物件的位置改為(0, -80, -0.2) ；

加入平台

1. 在 Outline，按 A 創建新的物件；
2. 把剛剛創建物件的名字改為 ground；
3. 選擇 ground，然後按 A 加入 Sprite Component；
4. 選擇剛剛創建的Sprite，把屬性修改為：
   • image: /assets/atlas/scene.altas
   • Default Animation: ground
   • Position: (320，32）
5. 複製剛剛創建的Sprite，並把新的Sprite的位置改為(960，32）；
6. 把ground物件的位置改為(0, -80, -0.2) ；

加入樹林層（平台和背景之間的一層）

1. 在 Outline，按 A 創建新的物件；
2. 把剛剛創建物件的名字改為 tree；
3. 選擇 tree，然後加入3個Sprite Component；
4. 選擇剛剛創建的Sprite，把屬性修改為：
   • image: /assets/atlas/scene.altas
   • Default Animation: tree_layer
   • Position: (300, 0)，(x:900, 0)，(600, 0）
5. 把tree物件的位置移動到(0, 110, -0.1) ；

完成後，scene.collection的設定如下：

最後，還需要加入scene.collection到主場景 (main.collection)內。

開打 main.collection，然後：

1. 在 Outline 使用滑鼠右鍵打開菜單
2. 選擇 Add Collection File
3. 選擇 scene.collection

使用Build編譯並運行遊戲，就能看到這個效果。

加入捲動效果

現在，我們有3層背景（遠，近和平台），現在將會增加一個腳本來近他們用不同速度捲動。

首先，在main/scene目錄中，加入新腳步（Cmd+N）並且命名為scene.script

代碼內容如下：

-- 1
go.property("speed", 100)

-- 2
local function move_layer(self, dt, layer_name, speed_ratio, tile_width)

    -- 3
    local final_speed = self.speed * speed_ratio
    local move_delta = dt * final_speed

    -- 4
    local pos = go.get_position(layer_name)
    pos.x = pos.x - move_delta

    -- 5
    if(pos.x < -tile_width) then
        pos.x = pos.x + tile_width
    end

    -- 6
    go.set_position(pos, layer_name)
end


function update(self, dt)
  -- 7
    move_layer(self, dt, "background", 0.3, 512)
    move_layer(self, dt, "ground", 1, 128)
end

以下是不同部份的說明：

1. 定義捲動的速度，這個速度是以平台為基礎的。
2. 定義移動Layer的功能，注意使用local來定義這個是本地功能，不會被其他script使用。而各參數的的意思如下：
   • self: 當前腳本的reference
   • dt: Delta時間，即是和上次update之間的時間
   • layer_name: 目標layer的名字
   • speed_ratio: 速度比率
   • tile_width: 瓦片寬度，這個設定能令讓背景不斷無縫地循環
3. 計算Layer需要移動的距離。
4. 計算Layer新的位置。
5. 處理循環效果，當layer超出一定範圍，就退回到起點。
6. 把設定Layer設定到新的位置。
7. 移動不同的Layer。

編輯Script後，還需要把Script附加到物件；

先打開scene.collection，由於script只能加到Game Object，所有需要增加一個新的Game Object （命名為scene），然後使用Add Component File把 scene.script 加到 scene object中。

完成後，Outline的內容如下：

編譯運行後，就能看到這個捲動效果了。

完成這部分，大家應知道連結script(腳本)和Game Object(遊戲物件)。

總結

完成以上教程後，大家應該學會以下東西：

• Defold編輯器的基本操作；
• 如何組裝遊戲場景；
• 如何使用遊戲腳本控制物件；

這是開發Endless Runner類型遊戲其中一個部分，下次會分享遊戲角色的部分；
如果想了解多些Defold，可以去看看以下官方的文檔，這裡展示了不同功能的效果和程序範例：

• Defold Example

希望大家喜歡這次的分享，如果大家什麼提問，歡迎留言告訴我的。

另外，如有什麼問題，歡迎留言或者聯繫我的臉書帳號。