Unity 2D 瓦片地圖使用筆記

說明

這是一個很方便的功能，你可將圖片都變成一格格的瓦片，並在場景貼上瓦片，這之中包含很多技巧，沒辦法一一講完，我會從一張圖片變成瓦片開始說明。

圖片

你可使用自己的圖片或下載範例素材

• Sunny Land

首先找到你要製作瓦片的圖片，Sunny Land 素材在 Assets/Sunnyland/artwork/Environment/tileset.png

在 Inspector 設定

• Sprite Mode: Multiple 因為這張圖片內包含多張圖片
• Pixel Per Unit: 16 每單位像素，單位一圖片而定

接著按 Sprite Editor

點擊 Slice 下拉選單，設定

• Type: Grid By Cell Size
• Pixel Size:
  • x: 16
  • y: 16

再按 Slice 按鈕，最後記得按 Apply。

瓦片是一格一格的，所以如果 Type 選擇 Automatic 的話，會出現大於16x16的圖片，這樣在貼瓦片時就不會是你預期的大小跟格子搭配。

斜面碰撞

如果是斜面碰撞接觸會有誤差，可以使用 Custom Outline 選擇斜面圖片，按 Generate 按鈕，設定好接觸範圍，最後按 Apply 確定。

瓦片地圖

所有的瓦片都要在瓦片地圖上，瓦片地圖可以有多個，例如：地板瓦片、背景瓦片、裝飾物瓦片，等等…。

建立瓦片地圖在 Hierarchy 按右鍵 2D Object > Tilemap > Rectangular 就可建立一個矩形的瓦片地圖。

你可以先建立一個瓦片地圖，名稱自訂即可。

瓦片調色盤

瓦片調色盤就是存放瓦片的地方，用來在瓦片地圖貼上瓦片，點擊上方選單 Window > 2D > Tile Palette。

紅框 BricksMap 就是準備要上瓦片的瓦片地圖，紅框 BrickTiles 就是瓦片調色盤，你可以有多個瓦片調色盤，如果沒有的話點擊 Create New Palette 建立一個瓦片調色盤，儲存路徑可儲存在 Assets/TileMaps/Palettes/。

當你剛建立好瓦片調色盤時，不會有任何瓦片，將建立好的圖片拖曳到 Tile Palette 中，如上圖格子處，上圖是已經拖曳後的畫面，儲存路徑可儲存在 Assets/TileMaps/Tiles，你可以自己調整合適的位置，當你儲存後，你會看到資料裡面有每一張瓦片 asset 檔。

瓦片調色盤操作

首先在 Hierarchy 選擇瓦片地圖，你會在 Scene 場景看到一格一格的畫面，在上圖有很多圖標的紅框就是操作工具，接著就可以任選一張瓦片圖片開始操作，例如範例紅框選中一張瓦片圖片。

Select an area of the grid (S)

你可以在選取一或多個瓦片，選取後可以做以下操作

1. 在 Inspector 編輯瓦片資訊，Offset, Rotation, Scale 等等。
2. 點擊 Move Selection with active brush 移動選取的瓦片。

Move Selection with active brush (M)

你需要先用 Select an area of the grid 選取瓦片，接著再點擊 Move Selection with active brush 移動瓦片。

Paint with active brush (B)

在 Tile Palette 選擇 Paint with active brush。你可以先用 Pick or marquee select new brush 選取瓦片，或保持 Paint with active brush 用快捷鍵:

• 在調色盤選取一個或多個瓦片(按住拖拉)。
• 在場景中按住 Ctrl 選取瓦片。

接著就可以在場景中貼上瓦片。

Pick or marquee select new brush (I)

在 Tile Palette 選擇 Pick or marquee select new brush。你可以在場景中選取一個或多個瓦片，再用 Paint with active brush 在場景貼上瓦片。

清除瓦片

• 如果你在 Tile Palette 選擇 Pain with active brush，你可以按住 shift 點擊有瓦片的地方就可以清除。
• 你也可以在 Tile Palette 選擇 Erase with active brush (D)，點擊有瓦片的地方就可以清除。

編輯調色盤

啟動 Toggle Tile Palette Edit，你可以像在場景中編輯瓦片地圖一樣編輯調色盤，包括移動瓦片或者拿調色盤的瓦片再畫一個更大的瓦片等等。

參考

• Unity 官方認證中文教程 | Unity2021.x 全新 Visual Scripting 可視化編程 | 遊戲開發