iT邦幫忙

2023 iThome 鐵人賽

DAY 15
0
自我挑戰組

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

2D像素遊戲設計經驗分享 - 2D 場景基本設置教學

  • 分享至 

  • xImage
  •  

這次我們會開始嘗試建立一個場景,可以去理解 Unity 渲染順序、圖層、遊戲物件等的一些概念。

製作一個 2D 橫軸遊戲的場景,至少需要有一層背景以及一層玩家活動的圖層,視美觀情況可能需要更多層的前景或者背景。所以我們可以在 SunnyLand 的 Environment 資料夾中,找到 back 的天空圖檔,把他的每單位像素數改成 16 後拉到場景中。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146dm6AOtexUw.png

然後我們可以打開 Environment 中的 Tileset 資料夾,在 Tileset-sliced 檔案中按箭頭展開地形圖,選擇一個並拖到場景中。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146uZ0qZUMKyK.png

你會發現,剛剛放進場景中的圖片會被back背景圖覆蓋著,即使調整左邊遊戲物件的順序也沒有作用。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146yIyQycPgTZ.png

因為 Unity 的 2D 遊戲中我們需要設定圖層以及渲染順序,點擊場景中的 back 圖檔,在檢查器中找到排序圖層選項並新增圖層。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146kVmGMVxUmp.png

新增一個background圖層並放置在 default 前面,圖層愈前會愈先被渲染,因此在畫面中會排在後面。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146Vd5Mn6lKAX.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146mnYksBt6tb.png

之後便可以在畫面中放置更多地形圖片而不會被背景阻擋。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146PkiuJ40Bio.png

接著我們可以打開 Environment 中的 Props 資料夾,在場景中放置房子、樹木等裝飾,同樣需要把每單位像素數設為16。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146I4PW6WfYzW.png

如果出現房子順序不正確的情況 我們可以更細緻的設定圖片在同一個圖層中渲染的順序,數字愈大順序愈後。
https://ithelp.ithome.com.tw/upload/images/20230930/201631468mfZX21qGI.png

最後我可以可以利用遊戲物件對場景圖片進行整理,在左邊階層中右鍵建立2個空物件,命名為Ground及Props代表地型及裝飾,並把位置資料重設到0, 0, 0。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146XGQFtavXqc.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146UnPoQcf7tg.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146QueS4pdimd.png

然後選取場景中相關的圖檔拖到相關的遊戲物件底下。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146eXCLlMxOIj.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146QoqcmKe9R6.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146F889t6rlAp.png

這樣我們可以透過點擊最外層的Props遊戲物件的眼睛去暫時隱藏所有地型,或者在檢查器取消打勾去直接停用。
https://ithelp.ithome.com.tw/upload/images/20230930/20163146QTpIPj7nP5.png
https://ithelp.ithome.com.tw/upload/images/20230930/20163146VCJEpMJPsC.png


上一篇
2D像素遊戲設計經驗分享 - 匯入素材方法和設定
下一篇
2D像素遊戲設計經驗分享 - 使用 Tilemap 製作場景
系列文
2D像素遊戲設計經驗分享30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言