Unity3D中Isometric Tilemap功能實踐

前言

最近出於興趣想本身作一個2D的遊戲，由於有着C#的基礎，因此決定使用Unity3D來作。

以前對於Unity3D其實瞭解很少，不過看了一些Unity3D的視頻和官方文檔後，暫時作起來也沒遇到什麼太大的困難。

本篇博客要說的是Unity 2018.3新增的一個東西——Isometric TileMap，通常用於作一個2.5D的地圖。

這個東西官方文檔講的並不詳細,而且有些配置徹底沒有說出來，致使始終沒法達到預期效果。

國內的各類中文社區和問答網站都沒有這方面的資料，最後仍是在Unity的英文社區找到了一篇答案纔有了進展：參考連接。

可是即便按照這篇答案中的方法進行操做，在我這裏依然無法成功實現這個2.5D的地圖。

後來本身慢慢摸索才最終實現，因此特此記錄下實現的步驟。

導入圖片生成紋理圖片

若是將使用TileMap畫地圖比做給牆貼瓷磚，那麼首先咱們須要爲瓷磚設置不一樣的花紋，因此咱們要導入一張圖片做爲花紋。

導入圖片生成紋理圖片後，須要將其紋理類型設置爲Sprite (2D and UI)，由於Tilemaps不支持其它的紋理類型。

注意到紋理屬性中的Pixels Per Unit (PPU)，它的值默認爲100。

這個屬性很關鍵，它決定了這個紋理圖片在Unity中顯示時，1個Unity的單元顯示多少個像素。

也就是說一張400 X 200的紋理圖片在Unity中，至關於4*2個Unity單元。

新建瓷磚

紋理就是一個花紋，不可能將花紋直接花在牆上，咱們須要根據花紋生成不一樣的瓷磚，而後再將瓷磚貼到牆上，Tile就是咱們的瓷磚。

經過Assets > Create > Tile生成一個Tile文件，而後將以前導入的紋理圖片與Tile文件關聯。

新建Isometric Tilemap

要貼瓷磚還須要一面牆，而Isometric Tilemap就是咱們的牆。

使用GameObject > 2D Object > Tilemap，建立一個帶有一個Tilemap子節點的Grid對象。

在這個Grid對象的屬性Cell Layout中，咱們發現關於Isometric Tilemap有兩個選項，一個是Isometric，而另一個是Isometric Z As Y。

Isometric實現的是至關於一個地形同樣的東西，可是想要在這個地形上放上房子和樹木之類的，那麼須要設置爲Isometric Z As Y。

在這裏咱們看到還有一個Cell Size的設置，我在這裏設置爲 X：1，Y：0.5，Z：1。（請注意，這裏的Z的大小務必爲1，不然一樣沒法在地形上放置房子）

Cell Size中的X爲1，表示一個Unity的單元格中X的長度至關於多少個Unity單元。

導入一張400 X 200的紋理圖片，它的PPU爲100，那麼至關於須要4 X 2的Unity單元。

由於咱們這裏講CellSize的X與Y設置爲1和0.5，因此這張紋理圖片在TileMap中的顯示佔4個單元格。

而對於Grid下的Tilemap對象，咱們只須要修改一個屬性，即將Tilemap Render的Mode改成Individual。

這麼作的緣由是隻有在Individual下，Scene視圖中Tilemap的各個Tile間才能正確排序。

若是是Chunk模式，不一樣的Tile在繪製時會出現下面這種遮擋的現象：

不過在咱們打包時，仍是須要將Mode改成Chunk，由於Chunk會按位置對Tiles進行分組，並將它們的Sprite一塊兒批處理以進行渲染，這樣會提升性能。

另外在Chunk模式下，還須要將不一樣的Sprite放到一個Sprite Altas中，這樣它們才能正確排序。

由於這篇博客的主題不是這方面因此只是捎帶提起，具體如何使用Chunk模式能夠查詢官方文檔，這裏再也不贅述，先將Mode設置爲Individual便可。

新建Tile Palette

有了瓷磚和牆，那麼咱們還須要一個裝瓷磚的箱子。

這個瓷磚箱裝着各類各樣的瓷磚，當咱們貼瓷磚時，就從這個瓷磚箱中取出來用。

Tile Palette就是咱們瓷磚箱。

使用Window > 2D > Tile Palette，打開Tile Palette視圖。

點擊Create New Palette建立一個Tile Palette，請保證這個Tile Palette的屬性和Isometric Tilemap的屬性匹配，即：

• Cell Size爲Manuel，值爲 X：1，Y：0.5，Z：1
• Grid爲Isometric Z As Y

若是你的圖片是矩形圖片那麼就是，那麼這裏的Y爲0.5，若是基於等距投射的圖片，那麼Y爲0.57735。

建立了Tile Palette後，咱們將以前導入的Tile文件拖動到Tile Palette上，也就至關於將瓷磚放到了瓷磚箱中。

若是拖動紋理圖片到Tile Palette上，也會自動生成一個Tile文件，這樣方便得多。

開始繪製Tilemap

貼瓷磚就是從瓷磚箱中選擇瓷磚，而後貼到牆上。

而繪製地圖，就是在Tile Palette中選擇不一樣的Tile，而後選定Active Tilemap爲指定的TileMap後就能夠繪製了。

可是當咱們準備畫圖的時候發現，一個Unity單元格實在過小了，就至關於一個像素那麼大。

這裏能夠經過設置TileMap對象的scale，將其X和Y放大100倍來處理。（固然也能夠經過同時調節Grid的Cell Size的X爲100，Y爲50，而後再將圖片的PPU從100改成1）

此時能夠看到咱們的Tile大小正好合適。

那麼咱們能夠在兩個單元格內繪製不一樣的Tile，可是這裏注意到，Tile之間的遮擋存在問題。

解決Tile間的遮擋問題

上面Tile間的遮擋問題，我經過以前提到的Unity英文社區的參考連接解決了。

操做就是經過Edit > Settings > Graphics，修改Transparency Sort Mode爲Custom Axis，並將其值設爲X：0，Y：1，Z：-0.49。

不一樣Z Position下Tile的繪製

上面咱們實現了基本地形的繪製，如今咱們須要在地形上面繪製房子。

以前咱們繪製Tile時，Tile Palette的Z Position爲0。

如今咱們須要在地形上繪製房子，那麼就須要調高Z Position,將Z Position設爲1。

繪製後發現遮擋順序不對，我們的Z Position爲1的房子居然被Z Position爲0的地形給遮擋了。

到這裏參考以前的帖子也沒辦法處理這個事，沒有任何文檔和資料有關於這個事情的處理。

我這裏也糾結了好久，搞了一兩個晚上都沒搞出來，最後直接加了幾個QQ羣，把問題甩在那裏，而後打Dota2去了。

而果真期望別人也不怎麼靠譜，結果最後仍是本身去研究。

雖然不清楚內部工做原理，可是按照排除法去想了一下相關的幾個設置點，問題應該就是出如今透明度排序那裏。

因而調節XYZ這三個值，發現將Z進一步調小到-26後就沒有問題了，雖然不知道發生了什麼，可是終究是搞定了。

如下是最終效果：

總結

不知道爲何最後一個那麼大的坑在官方文檔上徹底沒有說起，並且這個功能從這個角度來看，不像是徹底作完了的樣子。

但願個人這篇博客對後來的趟坑者有用吧，固然若是有用也別忘了點個贊。

如文中有謬誤，還望不吝賜教。

PS：

本身建了一個QQ羣328544641，用於Unity2D技術的學習交流羣，裏面暫時就我一我的。

若是您對Unity的2D技術有興趣，能夠互相學習交流。

人不在多，只但願進羣的人能夠獲得本身想要的答案，也一樣但願您能在瞭解的狀況下給予一些Unity菜雞幫助，好比身爲菜雞的我。