可以使用Tilemap System (瓦片地圖系統)在網格上布置Tiles。
Environment 文件夾下有許多資源用于創建游戲地圖:
? 新建 Tilemap
在 Hierarchy 窗口右鍵 :選擇 2D Object > Tilemap > Rectangular
就會創建 Grid 和 Tilemap 兩個游戲對象:
Grid, which you will use to lay out tiles evenly. The grid will appear in the Scene view when this GameObject is created. 網格(Grid),您將使用它來均勻地布置瓦片。當創建這個游戲對象時,在場景視圖中會顯示網格。
Tilemap, a child GameObject of the Grid GameObject, which you will use to render (display) the tiles that you set up. 瓦片地圖(Tilemap),是網格游戲對象的子游戲對象,您將使用它來渲染(顯示)您設置的瓦片。
一個Grid下可以創建多個Tilemap
最終就是在這個網格形的 Tilemap 上繪制內容。
在Art文件夾下創建一個【Tiles文件夾】來存放 Tile 資源:
? 新建第一個 Tile
在Tiles文件夾下,右鍵選擇 Create > 2D > Tiles > Rule Tile
命名為“FirstTile”
要設置Tile (瓦片)引用的精靈,在Inspector中,點擊 “Select”:
然后搜索 “Tile” 并選擇 Tile1
? 新建 Tile Palette (瓦片調色板)
就像畫家在調色板上安排他們計劃用來繪畫的顏色一樣,Tile Palette 是一個工具,您將使用它來組織您的Tile并將它們繪制在Tilemap的網格單元。
打開 Tile Palette: Window |2D| Tile Palette
Tile Palette
窗口:
目前沒有有效的Palette,需要新建一個Palette。
選 No Valid Palette, 點擊 Create New Palette | 命名為 Game Palette | 點擊Create | 這個Palette的存放路徑設置為 Assets > Art > Tiles 文件夾下 :
Tile(瓦片)將出現在網格的一個單元格中:
?? Add another tile to the palette 向palette中添加其他的tile
比如,繼續在Tiles文件夾下,右鍵選擇 Create > 2D > Tiles > Rule Tile ,命名為 SecondTile:
瓦片精靈選擇 Tile2
然后把 SecondTile 也拖拽到 Game Palette 上:
? 在TileMap上繪制
Palette 是調色板,創建的FirstTile、SecondTile這些Tile就類似于顏料,把顏料拖拽到調色板上。
選中調色板上的顏料,使用畫筆就可以在TileMap上繪制了。
這一排工具雖然在 Tile Palette窗口下,但它們并不是操作Palette的,而是操作TileMap的。
比如,在“Tile Palette ”窗口中 Game Palette 調色板下,選擇 “FirstTile” 這個顏料 ,然后選擇“畫筆”工具。
?? 開始在Tilemap 上繪制:
?? 擦除
要擦除圖塊,請選擇【橡皮擦工具】或按住D
并選擇包含要刪除的圖塊的單元格。
現在地圖現在看起來有點奇怪,每個圖塊精靈周圍都有一個間隙,而不是填充整個單元格;這是因為精靈比網格單元小。
?? 在tilemap上繪制地圖時一些快捷鍵
? 修復圖塊間隙
要將圖塊適合網格,請按照以下說明操作:
- 在Hierarchy中,選擇Grid 游戲對象。
- 在Inspector中,轉到Grid組件并找到Cell Size屬性。它的X和Y 值都設置為1 。這意味著每個單元格的寬度和高度都是一個單位。
在“Project” 中,選擇Tile1精靈。
在Inspector 中,找到Pixels Per Unit屬性,將其設置為100 。每單位像素 (PPU) 告訴 Unity 如何通過定義一個單位內應容納多少像素來調整精靈大小 - 在本例中,每個單位為 100 像素。
在Inspector底部,找到精靈的預覽圖像。精靈大小為 64 x 64 像素。精靈太小,放入 100 x 100 像素的網格單元中填充不滿,所以產生了間隙。
?? 有兩種方式可以修復間隙:
- 【方式1】:將 Pixels Per Unit 設置為64 ,點擊 “Apply” 。這種方法將使精靈適合一個 Unity 單位,即一個網格單元的大小。
將Tile1的Pixels Per Unit 設置為64 后:
將Tile2的Pixels Per Unit 設置為64 后:
- 【方式2】在Grid組件中,將Cell Size的x、y 值調整為0.64。
這兩種方式都可以達到一樣的效果:
但是【方式1】需要對每個圖塊精靈的Pixels Per Unit進行設置。
? Set the tilemap Order in Layer
?? 如何調整tilemap的繪制順序?
【繪制順序】是指游戲中不同的視覺元素在玩家屏幕上呈現(顯示)的順序。目前,玩家角色和您的瓦片地圖都具有相同的z軸(深度)位置值 0。這兩個游戲對象還在同一個Default Layer中。
這個共享的深度值和 Default Layer 可能導致瓦片地圖顯示在角色上方
,這將導致游戲無法進行。更好的方式是明確告訴Unity正確的繪制順序。
要設置瓦片地圖的繪制順序,如下操作:
- 選中Tilemap,在Tilemap Renderer 組件下找到Order in Layer屬性
This property defines the order in which GameObjects in the same layer are drawn.
這個屬性定義了在同一層中的游戲對象繪制的順序。
游戲對象 Order in Layer 的值越小,越先被繪制。值越大越后被繪制。所以需要確保Tilemap的 Order in Layer 的值,要比PlayerCharacter 的 Order in Layer 的值小。
PlayerCharacter 的 Order in Layer 的值為0。所以將Tilemap的 Order in Layer 改為 -10。就可以確保先被繪制。
? 使用tilesets(圖塊集)
tilesets 是一個【包含多個精靈的單個圖像文件】,您可以使用這些精靈來創建 Tile Palette。
它在一個圖像文件中包含多個精靈紋理。將Tile組合在一起意味著您可以批量對它們進行調整。相也更容易讓Unity以節省資源的方式在您的游戲中進行渲染。
tilesets 中的精靈通常排列在規則的網格中。 以下是Ruby's Adventure資源包中的tilesets示例,其中包含珊瑚地面上的一條3x3網格的鋪砌石路:
這個tilesets被分解為9個獨立的精靈時,每個精靈都是唯一的。
- 在“Project”窗口中,在所選資源包的文件夾中,導航至Art > Sprites 。此文件夾中名稱以“Floor_”開頭的所有文件都是圖塊集。
選擇FloorBricksToGrassCorner圖塊集,然后選擇箭頭以查看圖像文件的精靈。
目前只有一個精靈可見,因為【該圖塊集尚未被切片】。
? tilesets(圖塊集)切片
比如,要把這6個tilesets 切片,每個tilesets 都切割成 3 x 3 的9張小圖片。
選中這幾個tilesets | 將Sprite Mode 先改成 Multiple
然后選中第一個tilesets,點擊 【Sprite Editor】 按鈕打開編輯面板。 然后點擊Slice后的箭頭,打開小面板:
- Grid By Cell Size 按照Cell大小切割
- Grid By Cell Count 按照Cell數量切割
選擇 Grid By Cell Size
也可以選擇 Grid By Cell Count 按照行列切割,比如3行3列:
然后點擊右上角的Apply 按鈕,關閉面板,就切好了,再次展開查看第一個tilesets發現變成9張圖了:
然后就可以把切割后的圖,拖拽到 Tile Palette上了
如果拖拽到 Tile Palette上發現圖塊有間隙:
需要調整一下圖片像素大小。因為 tilesets原圖片大小是 192 x 192像素:
變成9張圖后,每張圖的大小應該是 64 x 64像素,只需要把這里的填充像素,改成 64 就可以了,然后點擊下面的Apply 就可以了。
按照同樣方式把其他幾張tilesets也搞定就OK了: