Unity Tilemap System 瓦片地圖系統

可以使用Tilemap System (瓦片地圖系統)在網格上布置Tiles。

Environment 文件夾下有許多資源用于創建游戲地圖:

image.png

? 新建 Tilemap

在 Hierarchy 窗口右鍵 :選擇 2D Object > Tilemap > Rectangular 就會創建 Grid 和 Tilemap 兩個游戲對象:

image.png
  • 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

image.png

最終就是在這個網格形的 Tilemap 上繪制內容。

image.png

在Art文件夾下創建一個【Tiles文件夾】來存放 Tile 資源:

image.png

? 新建第一個 Tile

在Tiles文件夾下,右鍵選擇 Create > 2D > Tiles > Rule Tile

image.png

命名為“FirstTile”

image.png

要設置Tile (瓦片)引用的精靈,在Inspector中,點擊 “Select”:

image.png

然后搜索 “Tile” 并選擇 Tile1

image.png
image.png

? 新建 Tile Palette (瓦片調色板)

就像畫家在調色板上安排他們計劃用來繪畫的顏色一樣,Tile Palette 是一個工具,您將使用它來組織您的Tile并將它們繪制在Tilemap的網格單元。

打開 Tile Palette: Window |2D| Tile Palette

image.png

Tile Palette 窗口:

image.png

目前沒有有效的Palette,需要新建一個Palette。

選 No Valid Palette, 點擊 Create New Palette | 命名為 Game Palette | 點擊Create | 這個Palette的存放路徑設置為 Assets > Art > Tiles 文件夾下 :

image.png
image.png

Tile(瓦片)將出現在網格的一個單元格中:

image.png

?? Add another tile to the palette 向palette中添加其他的tile

比如,繼續在Tiles文件夾下,右鍵選擇 Create > 2D > Tiles > Rule Tile ,命名為 SecondTile:

image.png

瓦片精靈選擇 Tile2

image.png

然后把 SecondTile 也拖拽到 Game Palette 上:

image.png

? 在TileMap上繪制

Palette 是調色板,創建的FirstTile、SecondTile這些Tile就類似于顏料,把顏料拖拽到調色板上。
選中調色板上的顏料,使用畫筆就可以在TileMap上繪制了。

image.png

這一排工具雖然在 Tile Palette窗口下,但它們并不是操作Palette的,而是操作TileMap的。

比如,在“Tile Palette ”窗口中 Game Palette 調色板下,選擇 “FirstTile” 這個顏料 ,然后選擇“畫筆”工具。

image.png

?? 開始在Tilemap 上繪制:

image.png

?? 擦除

image.png

要擦除圖塊,請選擇【橡皮擦工具】或按住D并選擇包含要刪除的圖塊的單元格。

現在地圖現在看起來有點奇怪,每個圖塊精靈周圍都有一個間隙,而不是填充整個單元格;這是因為精靈比網格單元小。

?? 在tilemap上繪制地圖時一些快捷鍵

image.png

? 修復圖塊間隙

要將圖塊適合網格,請按照以下說明操作:

  1. 在Hierarchy中,選擇Grid 游戲對象。
  2. 在Inspector中,轉到Grid組件并找到Cell Size屬性。它的X和Y 值都設置為1 。這意味著每個單元格的寬度和高度都是一個單位。
image.png

在“Project” 中,選擇Tile1精靈。

image.png

在Inspector 中,找到Pixels Per Unit屬性,將其設置為100 。每單位像素 (PPU) 告訴 Unity 如何通過定義一個單位內應容納多少像素來調整精靈大小 - 在本例中,每個單位為 100 像素。

image.png

在Inspector底部,找到精靈的預覽圖像。精靈大小為 64 x 64 像素。精靈太小,放入 100 x 100 像素的網格單元中填充不滿,所以產生了間隙。

image.png

?? 有兩種方式可以修復間隙:

  • 【方式1】:將 Pixels Per Unit 設置為64 ,點擊 “Apply” 。這種方法將使精靈適合一個 Unity 單位,即一個網格單元的大小。
image.png

將Tile1的Pixels Per Unit 設置為64 后:

image.png

將Tile2的Pixels Per Unit 設置為64 后:

image.png
  • 【方式2】在Grid組件中,將Cell Size的x、y 值調整為0.64。
image.png

這兩種方式都可以達到一樣的效果:

image.png

但是【方式1】需要對每個圖塊精靈的Pixels Per Unit進行設置。

? Set the tilemap Order in Layer

?? 如何調整tilemap的繪制順序?

【繪制順序】是指游戲中不同的視覺元素在玩家屏幕上呈現(顯示)的順序。目前,玩家角色和您的瓦片地圖都具有相同的z軸(深度)位置值 0。這兩個游戲對象還在同一個Default Layer中。

image.png
image.png

這個共享的深度值和 Default Layer 可能導致瓦片地圖顯示在角色上方,這將導致游戲無法進行。更好的方式是明確告訴Unity正確的繪制順序。

要設置瓦片地圖的繪制順序,如下操作:

  • 選中Tilemap,在Tilemap Renderer 組件下找到Order in Layer屬性
image.png

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網格的鋪砌石路:

image.png

這個tilesets被分解為9個獨立的精靈時,每個精靈都是唯一的。

  1. 在“Project”窗口中,在所選資源包的文件夾中,導航至Art > Sprites 。此文件夾中名稱以“Floor_”開頭的所有文件都是圖塊集。

選擇FloorBricksToGrassCorner圖塊集,然后選擇箭頭以查看圖像文件的精靈。

image.png

目前只有一個精靈可見,因為【該圖塊集尚未被切片】。

? tilesets(圖塊集)切片

比如,要把這6個tilesets 切片,每個tilesets 都切割成 3 x 3 的9張小圖片。

image.png

選中這幾個tilesets | 將Sprite Mode 先改成 Multiple

image.png

然后選中第一個tilesets,點擊 【Sprite Editor】 按鈕打開編輯面板。 然后點擊Slice后的箭頭,打開小面板:

image.png
  • Grid By Cell Size 按照Cell大小切割
  • Grid By Cell Count 按照Cell數量切割

選擇 Grid By Cell Size

image.png

也可以選擇 Grid By Cell Count 按照行列切割,比如3行3列:

image.png

然后點擊右上角的Apply 按鈕,關閉面板,就切好了,再次展開查看第一個tilesets發現變成9張圖了:

image.png

然后就可以把切割后的圖,拖拽到 Tile Palette上了

image.png

如果拖拽到 Tile Palette上發現圖塊有間隙:

image.png

需要調整一下圖片像素大小。因為 tilesets原圖片大小是 192 x 192像素:

image.png

變成9張圖后,每張圖的大小應該是 64 x 64像素,只需要把這里的填充像素,改成 64 就可以了,然后點擊下面的Apply 就可以了。

image.png

按照同樣方式把其他幾張tilesets也搞定就OK了:

image.png
最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
  • 序言:七十年代末,一起剝皮案震驚了整個濱河市,隨后出現的幾起案子,更是在濱河造成了極大的恐慌,老刑警劉巖,帶你破解...
    沈念sama閱讀 227,488評論 6 531
  • 序言:濱河連續發生了三起死亡事件,死亡現場離奇詭異,居然都是意外死亡,警方通過查閱死者的電腦和手機,發現死者居然都...
    沈念sama閱讀 98,034評論 3 414
  • 文/潘曉璐 我一進店門,熙熙樓的掌柜王于貴愁眉苦臉地迎上來,“玉大人,你說我怎么就攤上這事。” “怎么了?”我有些...
    開封第一講書人閱讀 175,327評論 0 373
  • 文/不壞的土叔 我叫張陵,是天一觀的道長。 經常有香客問我,道長,這世上最難降的妖魔是什么? 我笑而不...
    開封第一講書人閱讀 62,554評論 1 307
  • 正文 為了忘掉前任,我火速辦了婚禮,結果婚禮上,老公的妹妹穿的比我還像新娘。我一直安慰自己,他們只是感情好,可當我...
    茶點故事閱讀 71,337評論 6 404
  • 文/花漫 我一把揭開白布。 她就那樣靜靜地躺著,像睡著了一般。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發上,一...
    開封第一講書人閱讀 54,883評論 1 321
  • 那天,我揣著相機與錄音,去河邊找鬼。 笑死,一個胖子當著我的面吹牛,可吹牛的內容都是我干的。 我是一名探鬼主播,決...
    沈念sama閱讀 42,975評論 3 439
  • 文/蒼蘭香墨 我猛地睜開眼,長吁一口氣:“原來是場噩夢啊……” “哼!你這毒婦竟也來了?” 一聲冷哼從身側響起,我...
    開封第一講書人閱讀 42,114評論 0 286
  • 序言:老撾萬榮一對情侶失蹤,失蹤者是張志新(化名)和其女友劉穎,沒想到半個月后,有當地人在樹林里發現了一具尸體,經...
    沈念sama閱讀 48,625評論 1 332
  • 正文 獨居荒郊野嶺守林人離奇死亡,尸身上長有42處帶血的膿包…… 初始之章·張勛 以下內容為張勛視角 年9月15日...
    茶點故事閱讀 40,555評論 3 354
  • 正文 我和宋清朗相戀三年,在試婚紗的時候發現自己被綠了。 大學時的朋友給我發了我未婚夫和他白月光在一起吃飯的照片。...
    茶點故事閱讀 42,737評論 1 369
  • 序言:一個原本活蹦亂跳的男人離奇死亡,死狀恐怖,靈堂內的尸體忽然破棺而出,到底是詐尸還是另有隱情,我是刑警寧澤,帶...
    沈念sama閱讀 38,244評論 5 355
  • 正文 年R本政府宣布,位于F島的核電站,受9級特大地震影響,放射性物質發生泄漏。R本人自食惡果不足惜,卻給世界環境...
    茶點故事閱讀 43,973評論 3 345
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望。 院中可真熱鬧,春花似錦、人聲如沸。這莊子的主人今日做“春日...
    開封第一講書人閱讀 34,362評論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽。三九已至,卻和暖如春,著一層夾襖步出監牢的瞬間,已是汗流浹背。 一陣腳步聲響...
    開封第一講書人閱讀 35,615評論 1 280
  • 我被黑心中介騙來泰國打工, 沒想到剛下飛機就差點兒被人妖公主榨干…… 1. 我叫王不留,地道東北人。 一個月前我還...
    沈念sama閱讀 51,343評論 3 390
  • 正文 我出身青樓,卻偏偏與公主長得像,于是被迫代替她去往敵國和親。 傳聞我的和親對象是個殘疾皇子,可洞房花燭夜當晚...
    茶點故事閱讀 47,699評論 2 370

推薦閱讀更多精彩內容