2018年1月27日 星期六

2D Tilemap 資源的工作流程:從圖像到關卡。

在 Unity 2017.2,引入了 2D 功能集的新功能:Tilemap(鋪貼圖)!使用 Tilemap,你可以使用精靈圖(Sprite)和遊戲物件(GameObject)的組合快速的佈置和建立 2D 關卡,並可以控制如圖層排序、鋪貼圖碰撞器、動態化鋪貼等等的屬性。在這篇文章裡,將從匯入你的圖像到 Unity 中開始,到佈置 2D 平台遊戲關卡的所有方法,來解釋完整的工作流程。

取得 Unity



本文為 胡亂說・隨便寫 擅自翻譯,詳細內容以原文為準。

簡單來說,可以如此來總結這個工作流程,每個元素在 Unity 編輯器中與資源(Asset)或組件(Component)相關:

精靈圖(Sprite)->圖塊(Tile)->調色板(Palette)->刷畫(Brush)->鋪貼圖(Tilemap)

從非 Unity 的觀點來看,這些規則有點抽象。想像一下現實生活中在畫布上畫畫的過程:

顏色 -> 畫圖 -> 調色板 -> 畫筆 -> 畫布

這個過程的每個步驟都有類似的邏輯,每個步驟都有類似的名稱。

本文裡,將使用這個 GrassPlatform_TileSet 圖像做為主要的例子:


最終的結果是這些拼湊組成的的關卡,2D 角色能夠在這個「關卡」上運作:


1) 精靈圖(Sprite)

可以有幾種不同的方式來匯入圖像到 Unity 中:
  • 儲存所需的圖像檔案到專案中的 Assets 資料夾。
  • 從視窗上方選單列選擇 Assets > Import New Asset,然後選擇所需的檔案。
  • 從你的檔案瀏覽器拖拉圖像檔案到 Unity 編輯器中的專案(Project)視窗(這應該是最簡單的方法!)。

一旦圖像匯入到你的專案中,預設紋理類型(Texture Type)設定由你的專案當前設置為 2D 或 3D 的行為模式所定義。

這個模式最初是在新專案建立時設置:


或者可以從編輯器設置(Editor Settings)更改:


當專案已經設置為 2D 行為模式的時候,那麼 GrassPlatform_TileSet 將自動使用 Sprite(2D and UI) 的紋理類型(Texture Type)來匯入,這是鋪貼(Tile)資源引用精靈圖(Sprite)所需要的設置。

因為 GrassPlatform_TileSet 是在一張圖像中的一系列精靈圖(Sprite),我們需要將其分割為單獨的精靈圖(Sprite);這可以透過把精靈圖模式(Sprite Mode)從單個(Single)設置到多個(Multiple)並開啟精靈圖編輯器(Sprite Editor)來完成:


精靈圖編輯器(Sprite Editor)視窗讓你能夠將一張圖像切開(Slice)為多個精靈圖(Sprite);所以你可以使用你喜歡的圖像編輯軟體在一個精靈圖表上工作,並直接在 Unity 中定義圖像的哪些區域視為單獨的精靈圖(Sprite)。不需要去耍弄和管理上百個單獨的圖像檔案!

由於 GrassPlatform_TileSet 是一系列圖塊組成的圖像,因此我們可以使用精靈圖編輯器(Sprite Editor)的格子切割設定(Grid Slicing Settings)來自動地切開圖像為多個精靈圖(Sprite)。在這個圖塊設置中的每個單元圖塊的大小是 64x64 像素,所以我們可以輸入這些設置並讓精靈圖編輯器(Sprite Editor)自動產生所需要的精靈圖切片(Sprite Slices):


在切片(Slice)按鈕按下之後,我們現在有一組切開的精靈圖(Sprites)!


在精靈圖編輯器(Sprite Editor)視窗中,每個切開的精靈圖(Sprite)都可以選取和編輯。例如,你可以設置每個精靈圖(Sprite)的名稱以及手動調整位置和支點的值。

然後,我們必須套用(Apply)來對精靈圖(Sprite)資源進行更改(點擊 Sprite Editor 右上角的 Apply 按鈕),這將讓我們能夠在專案(Project)視窗中單獨的引用每個被切開的精靈圖(Sprite):


現在我們的精靈圖表(Sprite Sheet)已經被切開為單獨的精靈圖(Sprite),我們接下來需要將這些轉換(Convert)成鋪貼塊(Tile)。

2) 鋪貼塊資源(Tile Asset)

鋪貼塊(Tile)是 Unity 2017.2 中添加的全新資源。其目的是包存鋪貼圖(Tilemap)在格子上的特定單元使用的資料。

基本預設的鋪貼塊(Tile)資源(可以從 Project 視窗的 Create > Tile 產生)能夠將精靈圖(Sprite)附加給它,以及自定義其它在鋪貼圖(Tilemap)上使用的精靈圖(Sprite)著色和碰撞器(Collider)的類型(稍後會解釋)。


3) 鋪貼塊調色板(Tile Palette)視窗

Unity 2017.2 導入一個新的視窗:鋪貼調色板(Tile Palette)!這個視窗於使用新的鋪貼圖(Tilemap)系統是不可或缺的,因為它是用來選擇要使用的鋪貼塊以及鋪貼塊如何編輯鋪貼圖的介面。


在我們能夠添加 TopGrassTile 鋪貼塊(Tile)到鋪貼調色板(Tile Palette)視窗之前,我們首先必須建立一個新的調色板(Palette)。調色板(Palette)能夠用於組織你的鋪貼塊集,而不將它們全部(可能有上百或更多!)「儲存」到視窗裡的一個工作區上。


在調色板(Palette)的下拉選單有個選項來建立一個全新的調色板(Palette):


簡單又輕鬆的使用拖拉的方式來添加 TopGrassTile 到這個新建立的調色板(Palette)!


然而,在某些情況下,我們可能使用數百個精靈圖(Sprite)來建立我們的 2D 場景。為每個精靈圖(Sprite)手動建立一個鋪貼塊(Tile)資源,然後再個別拖拉進調色板(Palette)是非常耗時的。

值得慶幸的是,有個能夠用於自動產生鋪貼塊(Tile)並將它們全部配置到調色板(Palette)的工作流程。而且也像拖放那樣簡單又輕鬆!拖拉已經切割好的精靈圖集(Spritesheet)資源取代拖拉鋪貼塊(Tile)資源到調色板(Palette)。在這裡是 GrassPlatform_TileSet:


4) 格子(Grid)與鋪貼圖(Tilemap)

現在,我們的 GrassPlatform_TileSet 精靈圖集(Spritesheet)已經成功地設置到鋪貼塊調色板(Tile Palette)視窗中,是時候要開始建構 2D 關卡了!

首先,我們需要能夠在當前的場景中建立一個全新的鋪貼圖(Tilemap);這可以從 GameObject > 2D Objects -> Tilemap 選單完成。然而,這不只會建立一個鋪貼圖(Tilemap)遊戲物件(具備相關的組件),而是建立一個自動將鋪貼圖(Tilemap)遊戲物件做為其子物件的格子(Grid)遊戲物件。

與 Grid <-> Tilemap 設置最相似的遊戲物件結構就是 Unity 的 UI 系統;其中畫布(Canvas)父項遊戲物件充當其所有的子項 UI 遊戲物件(如 Text 與 Image)的佈置容器。格子(Grid)遊戲物件使用 Grid 組件來定義它的所有子項鋪貼圖(Tilemap)遊戲物件的範圍。有一些選項來在佈置中進行一些自定義:


子項的鋪貼圖(Tilemap)遊戲物件是由 Tilemap 組件和 Tilemap Renderer 組件所組成;前者包含繪製在其上的鋪貼塊資料,後者則定義了它如何呈現的視覺設置。


鋪貼圖(Tilemap)系統的設計旨在使多個鋪貼圖(Tilemap)遊戲物件能夠是同一個格子(Grid)遊戲物件的子項,這意味著你的關卡的最終結果可以很容易地由多層不同的鋪貼塊(Tiles)所組成。


每個 Tilemap Renderer 使你能夠控制用於渲染其鋪貼塊(Tile)的材質、其使用的排序層(Sorting Layer)(相同於 Sprite Renderer、UI 的 Canvas 以及 Particle System 的層次系統),以及如何對精靈圖遮罩(Sprite Mask)做出反應。

5) 在鋪貼圖(Tilemap)上繪製

在能夠繪製到鋪貼圖(Tilemap)之前,有兩件事必須選擇:當前正在使用哪個鋪貼圖(Tilemap)以及當前使用的筆刷(Brush)。

首先可以從鋪貼塊調色板(Tile Palette)視窗編輯選項下方的現行鋪貼圖(Active Tilemap)下拉選單挑選:


這個下拉選單列表將顯示所有在場景中的 Tilemap 組件的實例並讓你能夠選擇一個來繪製和編輯。上面截圖只顯示一個 Tilemap 選項,並以預設的鋪貼圖遊戲物件(Tilemap GameObject)的名字來命名,而具備多個鋪貼圖(Tilemap)的更複雜場景會顯示可能的現行鋪貼圖(Active Tilemap)列表,例如這樣:


針對 GrassPlatform_TileSet 的例子,將 Tilemap 遊戲物件更準確地重新命名也將會更新現行鋪貼圖(Active Tilemap)列表的名稱:


接下來要選擇當前的筆刷(Brush)。鋪貼塊(Tile)資源決定單元圖塊包含什麼資料(視覺上、碰撞類型等),筆刷(Brush)資源定義鋪貼塊(Tile)如何放置到鋪貼圖(Tilemap)。目前,Unity 只有一個內建的筆刷(名為 Default Brush)可選取;並且有如其名稱所預期的功能,例如在鋪貼圖(Tilemap)放置、抹除、搬移和填充撲貼塊(Tile)。不過,在 Unity Technologies 團隊的 GitHub 上有個 2D Extras’ Repository,裡面有噷多關於如何編寫自己的自定義筆刷(Brush)和鋪貼(Tile)腳本的範例!一旦把這些匯入到你的專案中,當前的筆刷(Brush)選單(在 Tile Palette 下方)將讓你能夠選擇這些筆刷來使用:


雖然本文不會投入可編寫腳本筆刷(Scriptable Brush)和腳本化鋪貼(Scriptable Tile)的使用,但它是學習和整合進你基於鋪貼圖的關卡設計工具集的一個非常強大的領域。

使用現行鋪貼圖(Active Tilemap)和當前筆刷(Current Brush)設置,我們可以在鋪貼塊調色板(Tile Palette)視窗選擇一個特定的鋪貼塊(Tile),然後將它繪製到場景中的鋪貼圖(Tilemap)!你還需要確認在編輯工具中的畫筆(Paintbrush)圖示也有被選取。


成功!鋪貼塊(Tile)正被繪製到鋪貼圖(Tilemap)上!然而,你可能注意到鋪貼塊(Tile)比格子的單元尺寸略小。這不是個錯誤,但是我們需要退一步來解釋為什麼 - 以及你能夠如何更改預設值。

Grid 組件的單元大小(Cell Size)使用 Unity 的世界空間距離單位(例如,原始的 Unity立方體具有每個軸預設縮放比例為 1,在預設的 Grid 的一個單元將會是相同的大小)。每個精靈圖(Sprite)資源在它的匯入設置(Import Settings)有一個每單位像素(Pixels Per Unit)值,預設值為 100:


由於每個 GrassPlatform_TileSet 的精靈圖(Sprite)有 64x64 像素的大小,因此設置每單位像素(Pixels Per Unit)值將自動調整所有已切開精靈圖(Sprite)實例的比例;從而將相關的鋪貼塊(Tile)準確的放入格子(Grid)的單元(Cell)中!


現在我們可以開始使用在鋪貼塊調色板(Tile Palette)視窗上的各種編輯工具來建立我們的鋪貼圖(Tilemap)關卡。

值得注意的是,也可使用鋪貼塊調色板(Tile Palette)選擇多個鋪貼塊(Tile)範圍並做為群組來一起繪製:


6) 鋪貼圖碰撞器(Tilemap Collider)與綜合碰撞器(Composite Collider)

現在你已經漲或了所有必要的知識來手動繪製一個像這樣的基本關卡:


然而,如果你添加一個物理驅動的 2D 角色並進入播放模式(Play Mode),在預設情況下,它們將會掉落穿過地面。慶幸的是,Unity 2017.2 還導入了非常有用的 Tilemap Collider 2D 組件,當套用到鋪貼圖遊戲物件(Tilemap GameObject)時,將會自動圍繞鋪貼塊(Tile)生成碰撞器(基於 Tile 的 Collider Type 設置)。


在播放模式(Play Mode)裡,我們的 2D 角色能夠在鋪貼圖(Tilemap)上跑步和跳躍!


如果你決定改變你的關卡佈置(例如繪製更多或刪除一些鋪貼塊),那麼鋪貼圖碰撞器(Tilemap Collider)將會自動更新!


另一個添加到 2D 物理工具集的有用組件是綜合碰撞器(Composite Collider)。添加這個到 Tilemap Collider 2D 將合併所有的鋪貼塊的碰撞器到一個更加最佳化的幾何碰撞器網格!

最後的調整,我們能做的是在 Y 軸偏移(Offset)鋪貼圖碰撞器(Tilemap Collider)。這將會降低碰撞器(Collider),使其看起來像是 2D 角色沿著草坪跑步,而不是直接漂浮在草坪上方:


到這裡就要結束這個鋪貼圖(Tilemap)資源和組件工作流程上的教學;從圖像檔案到擁有自動生成碰撞器的基本建構關卡!

鋪貼圖系統(Tilemap System)還有涵蓋更多的領域;針對一些更多的訊息,我會建議觀看 Matt Schell 的 Live Training Video on 2D World Building

取得 Unity

本文為 胡亂說・隨便寫 擅自翻譯,詳細內容以原文為準。