作者：Yumir

哈嘍~大~家~好~我是Yumir~

馬老師最近發(fā)布了一系列從零開始做橫板游戲的教程，用的都是unity近期的新功能，其中最有意思的就是Tilemap這個(gè)功能啦，系列傳送門：

【萌新圖形學(xué)】TileMap瓦片地圖簡介，以及它的優(yōu)化原理

現(xiàn)在的Tilemap不僅可以實(shí)現(xiàn)正方形的瓦片，還有六邊形瓦片，斜45度瓦片，基本涵蓋了所有的2D游戲地圖類型，目前看來還是邏輯簡單的正方形瓦片最受歡迎，但是正方形瓦片要怎么做出層次感呢？

大部分情況下美術(shù)會(huì)將所有的透視投影關(guān)系都畫在一個(gè)方格子中，于是這些地圖都是薄墻，稍一對比就會(huì)發(fā)現(xiàn)元?dú)怛T士的墻是比較特別的——他們看起來全都是正方體。我把這種正方體的正面正交+投影的效果在PS里面模擬了一下：

接下來是我在Unity中實(shí)現(xiàn)該效果的過程：

首先需要準(zhǔn)備好要用到的瓦片素材，我是用UnityAssetStore的免費(fèi)資源2D PixelArt - Isometric Blocks自行修改得到的，已上傳到網(wǎng)盤：
https://pan.baidu.com/s/1GALEo-zXO1L94A7jjdDyDg

打開Unity，開始烹制我們的食材（劃掉）開始畫元?dú)怛T士的地圖。

1、素材預(yù)設(shè)：

新建一個(gè)2D項(xiàng)目，將素材文件拖拽到項(xiàng)目中。將SpriteMode設(shè)置為Multiple，PixelsPerUnit設(shè)置為32（表示一個(gè)單位為32像素），F(xiàn)ilterMode設(shè)置為Point。

點(diǎn)擊SpriteEditor打開SpriteEditor窗口，點(diǎn)擊Slice設(shè)置Type為GridByCellSize，設(shè)置PixelSize為32*32（素材就是32*32），點(diǎn)擊Slice再點(diǎn)擊Apply保存，圖片設(shè)置完畢。

2、制作瓦片調(diào)色板：

點(diǎn)擊Window>2D>TilePalette打開TilePalette面板，點(diǎn)擊CreateNewPalette新建一個(gè)調(diào)色板，再將上一步切割好的素材文件一并拖拽到Palette面板的空白處，系統(tǒng)會(huì)自動(dòng)生成瓦片（Tile），這些就相當(dāng)于是我們的顏料啦。

3、繪制地圖：

從前文的示意圖可以分析出這個(gè)地圖需要多層疊加，并且上下層錯(cuò)開，這個(gè)通過修改上層Tilemap的Transform>Position>y偏移0.5個(gè)單位即可。

為了有前后關(guān)系需要新建幾個(gè)SortingLayers，用于設(shè)置渲染順序。

我將地圖分為四層（另有一層純色背景）分別是地板層、墻側(cè)面層、墻陰影層、墻頂面層。我畫了一張圖來表示各個(gè)層之間的位置關(guān)系以及SortingLayers設(shè)置，當(dāng)然只要能把層分開怎么設(shè)置都行。

首先繪制地板，房間的位置更加清晰明了：

再沿著地板鋪上側(cè)邊的墻以及柱子：

添加頂面和陰影，可以看到效果有很大的不同：

地圖繪制很簡單，但是這樣繪制出來的地圖還缺少一點(diǎn)靈魂，作為一面墻他得可以擋住墻內(nèi)的角色，所以我在墻側(cè)面層上添加了TilemapCollider2D組件，這時(shí)候會(huì)出現(xiàn)如下效果。

這密密麻麻的格子，實(shí)在是不忍直視，這時(shí)候我勾選了UsedByComposite，unity會(huì)提示需要一個(gè)CompositeCollider2D，通過搜索組件添加即可。

由于這個(gè)組件會(huì)自動(dòng)附帶Rigidbody2D，看看我們的墻，他怎么能往下掉呢，BodyType應(yīng)該是Kinematic才對，找一個(gè)“player”放到場景里面看一看效果，多好啊，我真是個(gè)小機(jī)靈鬼~

當(dāng)然roguelike游戲不可能是手繪地圖，而Unity也提供了Tilemap繪制地圖的方法，可以通過代碼控制地圖生成，但是我們想要做一些簡單的游戲固定地圖的話，本文的內(nèi)容已經(jīng)完全夠用了，推薦到B站去看該系列的其他視頻，畢竟一個(gè)游戲可不僅僅只用到地圖哦。

歡迎加入游戲開發(fā)群歡樂攪基：869551769

對游戲開發(fā)感興趣的童鞋可戳這里進(jìn)一步了解：http://www.levelpp.com/