iT邦幫忙

2023 iThome 鐵人賽

DAY 16
0
自我挑戰組

2D像素遊戲設計經驗分享系列 第 16

2D像素遊戲設計經驗分享 - 使用 Tilemap 製作場景

  • 分享至 

  • xImage
  •  

在之前的 Tilemap 繪製介紹中為大家解釋過它的作用以及便利性,這次我們會嘗試在 Unity 裹面實踐。

匯入 Tilemap

要匯入 Tilemap 圖檔,你需要先把圖檔進行切割 Slice,在檔案區中選擇你的圖檔,調整好檢查器中每單位像素數、過濾模式、壓縮等,然後針對 Tilemap,我們要把圖片模式設定為多個,套用後再使用 Sprite Editor。
https://ithelp.ithome.com.tw/upload/images/20231001/201631468Xu5hHbp7v.png

圖片編輯器打開後,我們可以利用它的自動切片功能去把圖像切成一份一份瓦片的大小。在切片中選擇 Grid by Cell Size 然後像素大小 X Y 填入你的每一格瓦片大小,即與你的每單位像素數一樣,然後點擊切片並檢查切片是否正確。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146ewBxdf2cdR.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146JeoiOMEHxK.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146xsAXk7L5Wm.png

如果在檔案區中看見自己的圖片有箭頭,展開後有每一份瓦片的圖檔,就代表成功。
https://ithelp.ithome.com.tw/upload/images/20231001/2016314630SE8B4n7b.png

以 Tilemap 方式繪製場景中

要在場景中新增 Tilemap,我們要先在階層中新增 2D 物 > 磁磚地圖 > 矩形,然後就會出現一個 Grid 以及 Tilemap 遊戲物件。Grid 是設定網格用的遊戲物件,Tilemap 則是繪製場景的圖層,一個場景可以用多個 Tilemap 圖層作前景後景等不同用途,只要再次再次建立 Tilemap 並各自設定它的排序圖層或者圖層順序即可。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146C9eMfa1wgc.png
https://ithelp.ithome.com.tw/upload/images/20231001/201631465HQOe8jmJN.png

點擊 Grid 或者 Tilemap 後,場景右下角會顯示 Open Tile Palette,或者可以在視窗 > 2D > 平鋪調色器來打開。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146ajyxGNsYyU.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146uXH7X2HRNp.png

打開後,如果是使用 SunnyLand 素材的話可能己經出現一個 Tilemap 調色板,但假設我們要建立自己一個的話,可以點擊 Create New Palette,取名後找一個位置儲存。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146AMd3w1xq8k.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146sLGgHTaOc3.png

接普就可以把你剛剛切片好的圖檔拖進調色板。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146gga2HyJXQk.png

把上一次製作的 Ground 遊戲物件刪除後,我們便可以開始繪製場景。利用滾輪調整調色板大小,然後點擊上方的的筆刷圖案,再點擊你要繪製的地形後,你便可以像繪圖一樣在畫面中填上你選擇的地形。
https://ithelp.ithome.com.tw/upload/images/20231001/201631469I6NyOo7gN.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146NvgwtkTn76.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146NPLxBcVQ1E.png

也可以一次在調色板中選取多於一格的地形,繪製時也會一次畫出多於一格的地形
https://ithelp.ithome.com.tw/upload/images/20231001/201631468rHAMWtMFv.png
https://ithelp.ithome.com.tw/upload/images/20231001/2016314643UTbqMkUt.png

要清除地形也只要點擊橡皮刷,再在場景中擦掉。
https://ithelp.ithome.com.tw/upload/images/20231001/20163146oMSZU0T76M.png
https://ithelp.ithome.com.tw/upload/images/20231001/20163146NLYeDm5u2N.png

各位可以利用以上功能開始製作自己的場景了。

如果在畫面移動時看到瓦片之間出現空隙,可以參考這部影片,是和 Tilemap 圖檔本身被切割的邊界相關,可能需要修改你的圖檔,如果是使用 Sunny Land 素材的話也需要自行修改圖檔才有辦法處理。

https://www.youtube.com/watch?v=QW53YIjhQsA&ab_channel=gamesplusjames
https://ithelp.ithome.com.tw/upload/images/20231002/20163146UIsX1AZaR2.png


上一篇
2D像素遊戲設計經驗分享 - 2D 場景基本設置教學
下一篇
2D像素遊戲設計經驗分享 - 匯入動畫及設定
系列文
2D像素遊戲設計經驗分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言