3D Action RPG 工作日誌

今天要來介紹Unity的TileMap這套工具，在此之前，我將Unity的版本升級到2018.1.8f1，我之前用的Unity版本中的TileMap有Bug，所以無法使用。 首先，我新增了兩個資料夾，分別是『TileAsset』、『TilePalette』，『TilePalette』是用來儲存TileMap產生的存檔文件，而TileMap會將原始的2D Sprite另存成Asset檔案，所以這些Asset檔案要放在『TileAsset』。 使用這兩個資料夾名稱只是為了方便分類，並不一定要使用跟我相同的名稱。 然後我將場景中的地板都刪掉了，只留下背景。 開始使用TileMap  接著在Hierarchy中點右鍵，選擇2D Object/Tilemap。 這時，場景中會出現一個物件名為Grid，底下還有一個物件名為Tilemap。 接著，選擇Window/Tile Palette，開啟繪製Tilemap的視窗。 視窗如下圖，請選擇Create New Palette，我的名稱取為GroundTile，因為這個Palette是要用來繪製地面的。Grid與Cell Size的設定維持不變。 然後會跳出存檔訊息，這邊就選擇資料夾『TilePalette』吧。 接著最重要的一點，就是要把切割好的2D Sprite拉進Palette中，如下圖那樣操作。 然後會問你要在哪邊存檔？這邊是儲存Palette需要使用的Asset檔案。 接著Unity會進行處理，如下圖正在產生128個Asset檔案，這是因為我們的2D Sprite就是切割成128塊。 儲存好以後，應該就能在Tile Palette中看見如下圖的景象。如果你看不見任何圖樣的話，你有可能也使用了有Bug的Unity版本。接著選擇其中一個想要繪製的圖案，然後再選擇第三個畫筆功能。 在場景中會出現很多格子，接著請你畫上去吧，但是你會發現怎麼圖案那麼小，格子那麼大！ 請點選你使用的2D Sprite檔案，在Inspector視窗中可以看見Pixels Per Unit選項，預設為100。由於我的圖案是用16x16像素繪製的，如果使用預設值100的話，就會在旁邊產生許多空白的部分。 所以這邊要將數值調整為16，

今天要來製作攝影機跟隨角色的功能 ，首先，我們從素材庫找到back跟middle兩個背景圖檔，並拉進場景中。 拉進場景後，你會發現背景圖將我們的主角與其他佈置都遮住了。 我們可以透過調整Z軸來解決背景與主角的遮擋問題。 由於主角與其他場景的Z軸位於0，而背景的Z軸位於0.1，所以會比較靠後。 但此時，你可能會發現，場景中仍有部分物體被遮擋。 假設，我們繼續調整Z軸，把背景的Z軸調到1，問題是否就能解決了呢？ 然後繼續拓展我們的背景圖。 接著將middle的背景圖也加進來，這時會發生一個可怕的問題，middle與back的背景圖互相混淆在一起。即使你嘗試著調整Z軸數值，也一直會發生這個問題。 主因是我們的Main Camera的Projection設定為Perspective，這是在2D平面模擬3D視角所使用的攝影機種類，越遠越深的物品看起來越小，越近的物品看起來越大。由於我們現在要製作的是2D遊戲，考量到並不需要模擬3D視角的功能，所以將Projection調整為Orthographic。 關於更多Perspective與Orthographic的比較，可以參考下列影片： Perspective vs Orthographic Cameras in Unity https://www.youtube.com/watch?v=c_WVffzc6GU 此時，從遊戲畫面中，看起來是沒有問題了。使用Perspective或Orthographic都可以製作2D遊戲，如果你想要在某些畫面中模擬出3D的效果，就應該嘗試用Perspective。 再來，我們要在場景中建立一個Empty GameObject名為CameraRange，這是用來定義攝影機移動的範圍的。 替CameraRange設定Box Collider，由於Box Collider與Box Collider2D不會互相影響，所以不用擔心角色移動會受到影響。 接著，如下圖，替你的場景設定攝影機的拍攝範圍。由於原本的天空背景會擋住綠色的框框，我暫時關閉了。 到時候，我們可以使用Box Collider的bounds參數取得該範圍的最小值與最大值。 如下圖，我標示了bounds.min與bound

本章要繼續來建構我們的2D遊戲場景啦！接下來，請先到Sunnlyland/artwork/Environment資料夾底下，找到tileset-sliced檔案，這是一個已經切割好的場景圖檔。 選擇圖片以後，在Inspector選擇Sprite Editor。 接著會開啟編輯視窗，大家可以看到這邊已經切割好每一個小元件了。假設大家自己的素材是沒有切割好的話，就請先切割吧。 然後在tileset-sliced旁有一顆小箭頭，按下去後會展開所有小元件。然後我們將第一個小元件拉進場景吧。 拉進場景以後，再進行複製，可以使用下圖的方式進行排列。另一個更好的選擇，是使用Unity提供的TileMap，這是一個免費提供的工具，但因為我使用的Unity版本2018.1.0的TileMap無法正常使用，所以我才使用比較原始的方式佈置場景。 排列好以後，就會長得如下圖。 接著我又進行了更多的複製與排列，這結構看起來略為複雜。 最後，請在結構最上層的tileset-sliced_0新增一個Box Collider 2D。 player-idle-1新增Box Collider 2 D，以及Rigidbody2D。 然後請自己調整Box Collider 2 D的大小。 場景的Box Collider 2 D也是如此設置。 接著，在Animator中新增一個名為Jump的Boolean參數。 並將Animator如下佈置。 然後記得在Jump新增補間動畫，Samples設為6。如不會操作Animator與Animation的話，可以參考上一篇文章： 7-5 Creating A Simple 2D Game For Reinforcement Learning (1) https://3dactionrpg.blogspot.com/2018/07/7-5-creating-simple-2d-game-for.html 然後我在Animator中的每一個Transition，都關掉了Has Exit Time，並將Transition Duration(s)設為0。這樣就會快速切換不同的動畫，由於2D動畫的影格變化很急速，跳起來就應該要立即換成跳躍的圖片，並不會像