iT邦幫忙

2026 iThome 鐵人賽

DAY 7
0
Software Development

Unity進階——做一個完整的遊戲系列 第 7

Day 7:重新切 16×16 Tile,鋪出村莊地面與道路

  • 分享至 

  • xImage
  •  

在第六天建立 VillageScene 後,我已經完成了主村莊場景的基本架構,包括 GroundTilemap、RoadTilemap、BuildingTilemap 和 DecorationTilemap 四個 Tilemap 分層,也建立了村莊主要區域的 Marker。第七天的目標,就是開始讓這個場景真正出現村莊地面與道路。

不過在第六天測試時,我發現 Floors_Tiles.png 雖然可以放進 Tile Palette,但 Unity 自動切圖後只產生了幾個大型 Sprite,並不是我需要的 16×16 小格。這會導致畫地圖時一次出現很大一塊圖,而不能像一般 RPG 地圖那樣一格一格鋪設。因此 Day 7 的第一步,就是重新處理地板素材的切圖方式。

https://ithelp.ithome.com.tw/upload/images/20260905/20178373bxz6LttRaF.png

從 Sprite Editor 中可以看到,Unity 原本使用的是自動依照圖形外框切割的方式,所以 Floors_Tiles.png 被切成了幾個大型區塊。這種方式適合單獨拖拉大型 Sprite,但不適合用在 Tilemap 製作村莊地圖。

由於 Anokolisa 的素材本身是 16×16 像素風格圖塊,所以我改用 Sprite Editor 裡的 Grid 切圖方式,讓它按照固定尺寸切成小格。

https://ithelp.ithome.com.tw/upload/images/20260905/20178373ACIv4XSr9h.png

在 Sprite Editor 中,我將切片方式設定為 Grid By Cell Size,Pixel Size 設定為 X 16、Y 16,Offset 與 Padding 都設定為 0,並使用 Delete Existing 取代原本的自動切圖結果。完成後,原本的大型 Sprite 被重新切成大量 16×16 小格,這樣才適合後續用 Tile Palette 一格一格畫地圖。

重新切圖完成後,我沒有繼續使用第六天建立的舊 Palette,因為舊 Palette 裡面仍然是原本的 6 個大型 Tile。為了避免混亂,我另外建立了一個新的地面用 Tile Palette,命名為 Village_GroundPalette_16x16。

https://ithelp.ithome.com.tw/upload/images/20260905/20178373eRTN0MD25S.png

這個新的 Palette 專門用來放 16×16 的村莊地板 Tile。接著我將重新切好的 Floors_Tiles.png 小格加入到這個 Palette 中,並將 Tile asset 儲存在 Tiles_16x16 資料夾裡。這樣可以和第六天測試用的舊 Tile 分開管理,避免之後不知道哪些是正式素材,哪些只是測試產物。

完成 Palette 後,我開始在 GroundTilemap 上測試正式鋪地面。這次因為素材已經正確切成 16×16,所以可以用筆刷一格一格繪製,不會再出現整張大圖被畫進場景的問題。

https://ithelp.ithome.com.tw/upload/images/20260905/20178373vze44npU2n.png

我先在 VillageCenterPoint 附近畫出一塊小型地面區域,作為主村莊的初步地基。這一步確認了兩件事:第一,Village_GroundPalette_16x16 可以正常使用;第二,GroundTilemap 能夠正確接收 Tilemap 繪製資料。

完成地面測試後,我接著處理道路素材。原本我以為 Wall_Tiles.png 可以直接作為牆面或道路素材使用,但它一樣需要先重新切成 16×16 小格。因此我使用和地板素材相同的方式,將 Wall_Tiles.png 重新以 16×16 Grid 切圖。

https://ithelp.ithome.com.tw/upload/images/20260905/20178373WpUB3oG7kT.png

切圖完成後,我建立了另一個新的 Palette,命名為 Village_WallPalette_16x16。這個 Palette 主要用來放道路、牆面或邊界類 Tile。雖然名稱中有 Wall,但實際使用時不一定只代表牆,也可以從裡面挑出適合作為村莊道路或地面邊界的 Tile。

一開始在選道路 Tile 時,我先選到了一組比較深色的灰色 Tile。放到草地上後,看起來比較像石牆或地牢邊界,而不像村莊道路。因此我重新挑選比較偏棕色、比較接近泥土路的 Tile,改在 RoadTilemap 上繪製。
這次選用的道路 Tile 比較接近泥土地面,和草地放在一起後比較像村莊小路。雖然這還不是最終美化版本,但已經能夠看出地面與道路分層的效果:草地放在 GroundTilemap,道路放在 RoadTilemap,兩者不會混在同一層。

最後,我將道路稍微延伸成十字形,讓它看起來像村莊中心的交叉路口。這個十字路之後可以往上連接村長家,往右連接商店,往下連接玩家從新手教學區回村的入口。

https://ithelp.ithome.com.tw/upload/images/20260905/201783731R6x7zDSTF.png

目前這條路的邊緣線條還比較明顯,整體也還沒有加入建築、樹木或其他裝飾,所以它仍然只是村莊雛形。不過從場景結構上來看,Day 7 已經完成了很重要的基礎:地面可以正常鋪設,道路也可以獨立放在不同 Tilemap 層上。

透過第七天的製作,我解決了第六天留下的素材切圖問題,並建立了兩個正式使用的 Tile Palette:Village_GroundPalette_16x16 和 Village_WallPalette_16x16。接著也成功在 GroundTilemap 上畫出草地區域,在 RoadTilemap 上畫出村莊道路。

下一步 Day 8 就可以在這個村莊地基上加入建築與裝飾,例如房屋、樹木、農田、工作站或村莊物件,讓場景從單純的地面與道路,逐漸變成真正可以探索的主村莊。


上一篇
Day 6:建立 VillageScene 的 Tilemap 基礎與村莊草圖
系列文
Unity進階——做一個完整的遊戲7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言