【Unity 插件推薦】瓦片地圖工具高效打造 Unity2D 場景,TileMap 功能全面解析!

目錄
【Unity 插件推薦】瓦片地圖工具高效打造 Unity2D 場景,TileMap 功能全面解析!

 

前言

 

2D 遊戲開發中,是否曾苦惱如何快速構建複雜的遊戲場景?如果是的話,那麼 Unity 的  TileMap 工具絕對是你的理想選擇!作為 Unity 官方提供的一款強大場景構建工具,TileMap 讓你能夠輕鬆編輯、設計與管理 2D 瓦片地圖,極大地提升場景開發的效率與靈活性。本篇文章將帶你全面解析 TileMap 的功能,並分享實用案例與進階技巧,幫助你在短時間內上手並充分發揮這款工具的潛力。

除了介紹【基礎功能】,還提供了【額外補充】,幫助你深入了解 TileMap 的應用方式,讓你能靈活運用這款工具,構建更加吸引人的 2D 遊戲場景。希望這篇文章能成為你的學習指南,為你的 2D 遊戲開發之路增添更多創意與靈感!

 

你是否曾想過如何輕鬆實現【攝影機追蹤】、【推拉鏡頭】、或是【分鏡效果】?如果是的話,那麼 Unity 的 Cinemachine 插件絕對是你不可或缺的開發利器!作為一款功能強大且靈活的攝影機工具,Cinemachine 不僅能讓你的遊戲場景更具表現力,更是許多開發者的首選的官方插件。本篇文章將帶你深入探索 Cinemachine 的實用功能,並分享多種精選案例,幫助你快速上手並靈活運用。為了讓內容更加實用,我會持續優化文章,補充更精煉的要點,讓每位讀者都能獲益匪淺。除了詳細的【案例分享】,文章中還附加了許多實用的【補充說明】,以協助大家更全面地掌握這款工具,從而提升開發過程中的創意和效率。

 

 

Unity TileMap 插件介紹

 

TilemapUnity 官方推出的一款專業 Unity2D 地圖構建工具插件,專為提升遊戲開發中的【地圖設計效率】與【場景構建表現力】而設計。無論是【快速繪製地圖】、【動態調整瓦片屬性】,還是【多層場景處理】,Tilemap 都能輕鬆實現。它可以讓開發者專注於遊戲創作,而非繁瑣的地圖製作流程,極大地提升了工作效率和美術表現,並且適用於多種 2D 遊戲類型,是 Unity 開發者打造優質場景的首選插件。

 

Tilemap Logo 圖片

 

功能特色

  • 快速繪製與編輯地圖
    提供直觀的【瓦片繪製工具】,開發者可以像拼圖一樣快速構建地圖,支持【矩形】、【圓形】等多種繪製模式。並且可以隨時拖動、調整瓦片位置,靈活性極高。
  • 多層管理與靈活組合
    支持多層地圖結構,例如【前景層】、【背景層】與【碰撞層】,讓場景更加立體且易於管理。同時還能根據需求隨時添加新層,實現更加複雜的場景設計。
  • 動態瓦片屬性調整
    瓦片支持設置多樣化屬性,例如【碰撞】、【動畫】與【交互效果】。無需編寫大量代碼即可讓場景充滿生機,例如【水流動畫】或【門的觸發機制】。

 

適用場景 

  • 2D 平台跳躍遊戲
    在【平台跳躍遊戲】中,Tilemap 可用於快速構建關卡,設計不同的跳躍區域、陷阱與道具位置,並添加碰撞屬性,讓遊戲更加具有挑戰性。
  • RPG 遊戲地圖構建
    在【角色扮演遊戲 (RPG)】中,Tilemap 能快速生成村莊、迷宮等大型場景,並搭配交互式瓦片實現例如【傳送門】或【隱藏區域】等機制,極大提升遊戲趣味性。
  • 戰棋類與模擬經營遊戲
    使用 Tilemap 可以輕鬆設計【棋盤】樣式的遊戲場景,或創建複雜的城鎮佈局,並結合動畫瓦片設計生動的動態效果,例如【流水】、【火焰】等場景點綴。

 

【Unity 插件推薦】瓦片地圖工具高效打造 Unity 2D 場景,TileMap 功能全面解析!

 

 

Unity TileMap 插件導入

 

Tilemap 的工作原理就是用一張張的小圖排列組合為一張大地圖,它和 2D Sprite Shape 的異同如下,之後有機會我也會撰寫一篇文章專門介紹 2D Sprite Shape 的應用。

共同點:

  • 他們都是用來功能強大的 2D 遊戲場景、地圖工具,能快速構建關卡,節省手動繪製和對齊的時間。
  • 都能與 Unity 的  2D RendererCollider 系統等無縫結合,實現視覺效果和物理行為的協調。

不同點:

  • SpriteShape 可以讓地形有弧度,Tilemap 不行。
  • Tilemap 可以快速製作有偽「Z」軸的地圖,SpriteShape 不行。

在 Window  --> Package Manager 中搜尋 2D,選擇 2D Tilemap Editor,導入項目。

 

在 Window  --> Package Manager 中搜尋 2D,選擇 2D Tilemap Editor,導入項目。

 

 

Unity TileMap 瓦片資源

 

Tilemap 的最小單位:“瓦片”,其建立方式有兩種:

 

方法一:

在 Assets -->  Create  --> Tile 中創建,或在 Project 視窗中按一下右鍵 --> Create  --> Tile。

 

在 Assets -->  Create  --> Tile 中創建,或在 Project 視窗中按一下右鍵 --> Create  --> Tile。

 

方法二:

在 Tile Palette 瓦片調色盤視窗創建,點擊 Window  --> 2D  --> Tile Palette。

 

在 Tile Palette 瓦片調色盤視窗創建,點擊 Window  --> 2D  --> Tile Palette。

 

1.先新建一個瓦片地圖編輯文件,建立時的預設參數不動。

 

先新建一個瓦片地圖編輯文件,建立時的預設參數不動。

 

2.將圖片資源拖曳到視窗中選擇要儲存的路徑。

 

將圖片資源拖曳到視窗中選擇要儲存的路徑。

 

參數介紹:

 

參數介紹:

 

  1. Preview:預覽圖。
  2. Sprite:瓦片關聯的精靈紋理。
  3. Color:瓦片色調顏色。
  4. Collider Type:碰撞器類型。
    1. None:不產生碰撞器。
    2. Sprite:基於精靈輪廓產生碰撞器形狀。
    3. Gird:基於瓦片單元格產生碰撞器形狀。

 

 

Unity TileMap 瓦片調色盤窗口

 

(一)建立瓦片調色器相關參數

 

建立瓦片調色器相關參數

 

  1. Name:瓦片調色器的名稱。
  2. Grid:瓦片的網格佈局。
    1. Rectangle:矩形瓦片。
    2. Hexagon:六角形瓦片。
    3. Isometric:等距瓦片,單元格為菱形。
    4. Isometric Z as Y:等距瓦片並且將單元格 Z 軸轉換為局部 Y 座標。
  3. Hexagon Type:六角形瓦片地圖類型,決定了六角形的旋轉位置。
    1. Point Top:點朝頂部的六邊形。
    2. Flat Top:面向頂部的六邊形。
  4. Cell Size:瓦片繪製到單元格的大小。
    1. Automatic:基於瓦片資源的精靈大小自動設置。
    2. Manual:自訂大小。


(二)瓦片調色盤面板

編輯的時候注意打開 Editor 開關:

 

編輯的時候注意打開 Editor 開關:

 

編輯的時候注意打開 Editor 開關:

 

  1. 選擇(S)。
  2. 移動(M)。
  3. 畫筆(B),使用選取器後會自動切換到畫筆工具,單一填充。
  4. 框填(U),使用選取器後切換到框填工具,範圍填充。
  5. 選取器(I),選取填入樣本。
  6. 橡皮擦(D),單一擦除。
  7. 填滿(G),使用選取器後再切換到填滿工具,批次填充。
  8. Active Tilemap:目前啟動的瓦片層。


創建地圖

1.將所有資源圖片一起匯入瓦片調色盤中。

 

將所有資源圖片一起匯入瓦片調色盤中。

 

  1. 在 Hierarchy 視窗中右鍵選擇 2D Project  --> Tilemap 創建,此時 Scene 視窗中將出現網格。
  2. 用選取器選取調色盤中的圖片,直接在 Scene 視窗中點選建立即可。
  3. 可以建立多個 Tilemap,將其層級排序。

 

等距瓦片地圖的編輯

建立模式為 Isometric Z as Y 的瓦片調色板,將資源拖入其中,會發現高度不同的圖片並沒有對齊。

 

建立模式為 Isometric Z as Y 的瓦片調色板,將資源拖入其中,會發現高度不同的圖片並沒有對齊。

 

原因是在調色盤中預設會將圖片的中心點和菱形的中心點重合,我們這裡需要在 Sprite Editor 視窗中調整 Sprite 的中心點即可。

 

原因是在調色盤中預設會將圖片的中心點和菱形的中心點重合,我們這裡需要在 Sprite Editor 視窗中調整 Sprite 的中心點即可。

 

調整好後,方塊的上表面即可與菱形平面對齊。

 

調整好後,方塊的上表面即可與菱形平面對齊。

 

也可以開啟 Tile Palette 視窗中的 Can Change Z Position,為每個圖片手動設定高度。按下 “+”  和 “-” 可以快速修改 Z 的高度。

 

也可以開啟 Tile Palette 視窗中的 Can Change Z Position,為每個圖片手動設定高度。按下 “+”  和 “-” 可以快速修改 Z 的高度。

 

但此時在 Scene 視窗中繪製不同的方塊時,其渲染情況會很奇怪。

 

但此時在 Scene 視窗中繪製不同的方塊時,其渲染情況會很奇怪。

 

因為 Unity 內部設定的原因,我們需要修改 Edit  --> Project Setting  --> Graphics  --> Camera Settings 中的 Transparency Sort Mode 為 Custom Axis,並將 X、Y、Z 設定為 0、1、-0.26。同時,將該 Tilemap 的 Tilemap Renderer 的模式切換為 individual,此時渲染情況將會變得正常。

 

因為 Unity 內部設定的原因,我們需要修改 Edit  --> Project Setting  --> Graphics  --> Camera Settings 中的 Transparency Sort Mode 為 Custom Axis,並將 X、Y、Z 設定為 0、1、-0.26。同時,將該 Tilemap 的 Tilemap Renderer 的模式切換為 individual,此時渲染情況將會變得正常。

 

因為 Unity 內部設定的原因,我們需要修改 Edit  --> Project Setting  --> Graphics  --> Camera Settings 中的 Transparency Sort Mode 為 Custom Axis,並將 X、Y、Z 設定為 0、1、-0.26。同時,將該 Tilemap 的 Tilemap Renderer 的模式切換為 individual,此時渲染情況將會變得正常。

 

 

Unity TileMap 瓦片地圖關鍵腳本與碰撞器

 

(一)Grid

 

Grid

 

  1. Cell Size:網格單元格的大小。
  2. Cell Gap:網格之間的間隔大小。
  3. Cell Layout:網格單元的形狀與排列。
    1. Rectangle:矩形瓦片。
    2. Hexagon:六角形瓦片。
    3. Isometric:等距瓦片,單元格為菱形。
    4. Isometric Z as Y:等距瓦片並且將單元格 Z 軸轉換為局 部 Y 座標。
  4. Cell Swizzle:Unity 將 XYZ 單元格座標重新排序為你選擇的類型。


(二)Tilemap

 

Tilemap

 

  1. Animation Frame Rate:播放瓦片動畫的速率,相當於倍速。
  2. Color:瓦片色調顏色。
  3. Tile Anchor:瓦片的錨點偏移。
  4. Orientation:瓦片地圖上瓦片的方向,相當於 2D 平面使用的是 Unity 中的哪兩個軸。

 

(三)Tilemap Renderer

 

Tilemap Renderer

 

  1. Sort Order:設定所選瓦片地圖上的瓦片排序方向。
  2. Mode:渲染器的渲染模式。
    1. Chunk:按位置將瓦片分組,並將瓦片精靈一起批次渲染,效能較好。
    2. Individual:單獨渲染每個瓦片,會考慮他們的位置和排序順序。會讓瓦片精靈和場景中其他渲染器或自訂排序軸進行交互等距瓦片一般選擇此項。
  3. Detect Chunk Culling:渲染器如何剔除瓦片地圖的邊界。
    1. Auto:自動偵測。
    2. Manual:手動設定拓展邊界。
  4. Mask Interaction:遮罩交互。
    1. None:不要與場景中任何精靈遮罩交互。
    2. Visible Inside mask:精靈遮罩覆蓋的地方可見,而遮罩外部不可見。
    3. Visible Outside mask:精靈遮罩外部的地方可見,而遮罩覆蓋處不可見。
  5. Material:材質,預設選擇的是不受光照效果的材質。
  6. Chunk Culling Bounds:當選擇手動設定剔除拓展邊界時,可以在這裡填寫自己拓展的值。
  7. Sorting Layer:所在排序層。
  8. Order in Layer:排序層的序號。

 

瓦片地圖碰撞器

為掛載 TilemapRenerer 腳本的物件加入 Tilemap Collider 2D 腳本,會自動加入碰撞器。

注意:想要產生碰撞器的瓦片 Collider Type 類型要進行設置,不能為 None。

 

 

Unity TileMap 官方拓展包導入

 

拓展套件為 Tilemap 新增新的瓦片類型和筆刷類型,幫助我們更方便的編輯 2D 場景。

解壓縮後直接拖曳到 Assets 資料夾即可。

Unity TileMap 官方拓展包下載點

注意選擇對應的 Unity 版本進行下載。

下載好後,在 Project 視窗中右鍵,會發現多出來這些選項。

 

下載好後,在 Project 視窗中右鍵,會發現多出來這些選項。

 

 

Unity TileMap 新增瓦片類型

 

(一)規則瓦片 Rule Tile

定義不同方向是否存在連接圖片的規則,讓我們更快速的進行地圖編輯。

 

定義不同方向是否存在連接圖片的規則,讓我們更快速的進行地圖編輯。

 

  1. Default Sprite:預設圖片。
  2. Default GameObject:預設遊戲對象,一般不關聯。
  3. Default Collider:預設碰撞器規則。
    1. None:不產生碰撞器。
    2. Sprite:基於精靈輪廓產生碰撞器形狀。
    3. Gird:基於瓦片單元格產生碰撞器形狀。
  4. Tiling Rules:平鋪規則,可以自行新增刪除。

在右邊的九宮格內左鍵可以選取✔️,表示這個九宮格位置有圖片;右鍵可以選取❌,表示這個九宮格位置沒有圖片,雙擊可以切換選取形態。

當整個九宮格都滿足自己設定的條件時,九宮格中央區域將顯示最右邊選擇的圖片。

 

(二)動畫瓦片 Animated Tile

可以指定序列幀,產生可以播放序列幀動畫的瓦片。

 

可以指定序列幀,產生可以播放序列幀動畫的瓦片。

 

  1. Number of Animated Sprites:動畫有多少張圖構成。
  2. Minimum Speed:最小播放速度。
  3. Maximum Speed:最大播放速度。
  4. Start Time:開始播放的時間。
  5. Start Frame:從哪一格開始播放。
  6. Collider Type:碰撞器規則。
    1. None:不產生碰撞器。
    2. Sprite:基於精靈輪廓產生碰撞器形狀。
    3. Gird:基於瓦片單元格產生碰撞器形狀。

 

(三)管道瓦片 Pipeline Tile

根據自己相鄰瓦片的數量更換顯示的圖片。

 

根據自己相鄰瓦片的數量更換顯示的圖片。

 

One —— Four:相鄰 1 ~ 4 張圖片時使用的圖片。


(四)隨機瓦片 Random Tile

根據你設定的圖片,隨機從中選取一個進行繪製。

 

根據你設定的圖片,隨機從中選取一個進行繪製。

 

  1. Number of Sprites:有多少張圖構成。
  2. Color:疊加的顏色。
  3. Collider Type:碰撞器規則。
    1. None:不產生碰撞器。
    2. Sprite:基於精靈輪廓產生碰撞器形狀。
    3. Gird:基於瓦片單元格產生碰撞器形狀。

 

(五)地形瓦片 Terrain Tile

有點類似規則瓦片,只不過地形瓦片是幫助你設定的規則。

 

有點類似規則瓦片,只不過地形瓦片是幫助你設定的規則。

 

  1. Filled:填滿。
  2. Three Sides:三個面。
  3. Two Sides and One Corner:兩面一角。
  4. Two Adjacent Sides:相鄰兩側。
  5. Two Opposite Sides:兩個相對的側面。
  6. One Side and Two Corners:一側和兩個角。
  7. One Side and One Upper Corner:一邊與上角。
  8. One Side:一面。
  9. Four Corners:四個角。
  10. Three Corners:三個角。
  11. Two Adjacent Corners:兩個相鄰角。
  12. Two Opposite Corners:兩個相反的角。
  13. One Corner:一個角。
  14. Empty:空。


(六)權重隨機瓦片 Weighted Random Tile

可以不平均隨機選擇圖片的瓦片。

 

可以不平均隨機選擇圖片的瓦片。

 

  1. Number of Sprites:有多少張圖構成。
  2. Weight:每種圖片的權重。
  3. Color:疊加的顏色。
  4. Collider Type:碰撞器規則。
    1. None:不產生碰撞器。
    2. Sprite:基於精靈輪廓產生碰撞器形狀。
    3. Gird:基於瓦片單元格產生碰撞器形狀。
       

(七)規則覆蓋瓦片 Rule Override Tile

在規則瓦片的基礎上,改變已經設定的規則對應的圖片。

 

在規則瓦片的基礎上,改變已經設定的規則對應的圖片。

 

(八)高級規則覆蓋瓦片 Advanced Rule Override Tile

在規則瓦片的基礎上,改變已經設定的規則與對應的圖片。

 

在規則瓦片的基礎上,改變已經設定的規則與對應的圖片。

 

 

Unity TileMap 新增筆刷類型

 

(一)自訂筆刷

1.預設體筆刷-用於快速刷出想要建立的精靈。

可以關聯預製體,用於快速建立該預製體。

 

預設體筆刷-用於快速刷出想要建立的精靈。

 

2.預設體隨機筆刷-用於快速隨機刷出想要建立的精靈。

Perlin Scale:柏林演算法參數,一般不需要改。

 

預設體隨機筆刷-用於快速隨機刷出想要建立的精靈。

 

3.隨機筆刷-可以指定瓦片進行關聯,隨機刷出對應瓦片。

  • Random Tile Set Size:隨機瓦片設定大小,每次繪製 X * Y 個瓦片。
  • Random Tile Sets:隨機瓦片設置。
  • Pick Random Tiles:隨機選擇瓦片,效果不明顯。
  • Add To Random Tiles:加入隨機瓦片,效果不明顯。

 

隨機筆刷-可以指定瓦片進行關聯,隨機刷出對應瓦片。


(二)拓展筆刷

筆刷記錄了額外的信息,使用時相當於把這些信息顯示出來。

1.Coordinate Brush 座標筆刷- 可以即時看到格子座標。

2.Game Object Brush 遊戲對象筆刷- 可以在場景中選擇和擦除遊戲對象,僅限於選定的遊戲對象的子級。

3.Group Brush 組合筆刷- 可以設定參數,當點選一個瓦片樣式時,會自動向後選取一個範圍內的瓦片。

  1. Gap:從筆刷向後看,遇到 Gap 個瓦片空格時停止選擇。
  2. Limit:從筆刷往後看 Limit 個瓦片,共選 Limit + 1 片。

 

Group Brush 組合筆刷- 可以設定參數,當點選一個瓦片樣式時,會自動向後選取一個範圍內的瓦片。

 

4.Line Brush 線性筆刷- 決定起點和終點畫一條線出來。

  • Line Start Active:起點是否已啟動。
  • Fill Gaps:擴充線的寬度。
  • Line Start:線的起點座標。

5.Random Brush 隨機筆刷- 和之前的自訂隨機畫筆類似,可以隨機畫出瓦片

類似自訂筆刷中的 Random Brush

 

.Random Brush 隨機筆刷- 和之前的自訂隨機畫筆類似,可以隨機畫出瓦片。

 

6.Tint Brush 著色筆刷- 可以為瓦片著色,瓦片的顏色鎖要開啟(Inspector 視窗切換 Debug 模式,修改 Flags 為 None)。

7.Tint Brush(Smooth) 光滑著色筆刷- 可以為瓦片進行漸變著色,需要依要求改變材質。

 

 

Unity TileMap 程式碼管理

 

Tilemap 元件:用於管理瓦片地圖。

TileBase 元件:瓦片資源物件基底類。

Grid 元件:用於座標轉換。

使用它們需要引用命名空間:using UnityEngine.Tilemaps;

 

// 瓦片地圖信息 可以通過它得到瓦片格子

public Tilemap map;

// 格子位置相關控制 可以通過它 進行坐標轉換

public Grid grid;

// 瓦片資源基類通過它可以得到瓦片資源

public TileBase tileBase;

// Start is called before the first frame update

void Start()

{

   // 1.清空瓦片地圖

   map.ClearAllTiles();

   // 2.獲取指定坐標格子

   TileBase tmp = map.GetTile(Vector3Int.zero);

   // 3.設置刪除瓦片

   map.SetTile(new Vector3Int(0, 2, 0), tileBase); // 設置

   map.SetTile(new Vector3Int(1, 0, 0), null);     // 刪除

   // 4.替換瓦片

   map.SwapTile(tmp, tileBase); // tmp 的所有瓦片將變成 tileBase

   // 5.世界坐標轉格子坐標

   //   屏幕坐標轉世界坐標

   //   世界坐標轉格子坐標

   // 傳入的參數是世界坐標

   grid.WorldToCell();

}

 

 

Unity TileMap 相關介紹 & 教學影片

 

 

 

 

 

瓦片地圖工具網站

 

【Tilemap】

官方網站:Tilemap

GitHub 下載連結:Tilemap 官方拓展包 

————————————————

以上內容改編節錄 CSDN 作者:weixin_53163894

 

更多好用插件:【Unity 好用插件推薦】持續更新,一起讓遊戲開發事半功倍!

 

 

 

本文原創(或整理)於亞洲電玩通,未經作者與本站同意不得隨意引用、轉載、改編或截錄。

特約作家簡介

X
A
Y
B
JamXu的頭像
JamXu
十年遊戲研發
二十年遊戲台主
三十年遊戲玩家

經中華網龍遊戲企劃進入遊戲圈,然後被雷打到去學程式前後端又學了點設計帶帶幾個研發團隊,見證了 3D 渲染技術及遊戲引擎互相進步,也見證了研發代理的更迭與博弈遊戲的興起,再毅然研究起 SEO 網路行銷社群廣告投放,深信自研自賣才是最大贏家,期望能為台灣研發重回輝煌時光貢獻一點力量。如果你也有遊戲夢,歡迎交流認識。


支持贊助 / DONATE

 

亞洲電玩通只是很小的力量,但仍希望為復甦台灣遊戲研發貢獻一點動能,如果您喜歡亞洲電玩通的文章,或是覺得它們對您有幫助,歡迎給予一些支持鼓勵,不論是按讚追蹤或是贊助,讓亞洲電玩通持續產出,感謝。

亞洲電玩通AsiaGameMaster - Steam 遊戲鑑賞家
亞洲電玩通AsiaGameMaster - FB 粉絲專頁
亞洲電玩通AsiaGameMaster - IG 粉絲專頁
亞洲電玩通AsiaGameMaster - Twitter
亞洲電玩通AsiaGameMaster - Yoytube 粉絲專頁
亞洲電玩通AsiaGameMaster - Tiktok

BTC

亞洲電玩通AsiaGameMaster - BTC 鏈贊助地址

352Bw8r46rfXv6jno8qt9Bc3xx6ptTcPze

 

ETH

亞洲電玩通AsiaGameMaster - ETH 鏈贊助地址

0x795442E321a953363a442C76d39f3fbf9b6bC666

 

TRON

亞洲電玩通AsiaGameMaster - TRON 鏈贊助地址

TCNcVmin18LbnXfdWZsY5pzcFvYe1MoD6f

延伸閱讀