[大型專案：BK MOD] ~EP.01~ 自定義遊戲地圖編輯器的C#寫法淺談

Keaton凱特
2023年4月13日
讀畢需時 3 分鐘

已更新：5月8日

　　上一次寫遊戲製作進度的文章，已經是15年前的事情了。今天會執筆繼續寫相關文章，要感謝Twitch台的觀眾"虫馬蟻"大大的熱情推坑，讓小弟想要像小時候一樣，做一款超屌大型改版遊戲，這個想法又重新燃燒起來。其實小弟不知道能夠持續多久，畢竟上一個坑「凱特與繼承的靈」直接胎死腹中....嗯，這就是人生嘛(´・Å・`)

　　這回要來介紹的，是如何不用Unity內建的地圖編輯器，自己寫一個客製化的地圖編輯器。當然，這個編輯器只花了小弟兩天撰寫，勢必有很多地方不到位，但是也希望能夠拋磚引玉，讓更多的軟工朋友對這個專案有點興趣(●´ω｀●)ゞ

正文：

　　小弟寫Unity的經驗不多，但還是嘗試將以前在遊戲公司淺學、網路Youtube介紹文章、壓榨ChatGPT的結果做個說明。首先是Hierarchy的配置。除了初始的Main Camera、Directional Light等等以外，小弟多生了StageBG(準備放一堆C#自動生成的GameObject子物件用)、2DCanva(這次沒用到，理論上是用來放位置絕對不變的東東像是血條)、TmpObj > BGcell(準備用來複製的物件本人，先設定一開始看不到)。

　　接著是美工的部分，小弟將15多年前畫的美美的草皮platform拿來用，以60*60為一個sprite，用Sprite Editor做Slice(切割)，差不多就完成了~因為還是Prototype，圖檔都沒有一一命名，但時間允許的話，還是命名一下比較妥當(｡í _ ì｡)

　　接著，您可以觀賞以下影片的Unity撰寫介紹，會詳細告訴您怎麼做Grid System(方格系統)，小弟也是以這個C#寫法當作基礎去修改的。

[1] Youtube - Grid System in Unity (Heatmap, Pathfinding, Building Area)

https://www.youtube.com/watch?v=waEsGu--9P8

大致上的程序執行順序是：

StageBG所附加的元件MainStage.cs會首先被執行，透過private GridMap gridMap生成gridMap這個class，並在Start()時初始化方格地圖。
GridMap.cs會根據MainStage.cs傳入的Grid長、寬、方格大小、起始位置去跑2D巢狀迴圈。
巢狀迴圈最裡面會做兩件事：1.新產生TextMesh(for顯示文字) 2.新產生SpriteRenderer(for顯示圖片)，生成的物件全部丟到StageBG底下，未來管理遠近(z軸遠近)就靠StageBG底下的分門別類(也可以是z軸深淺)。
新生成的TextMesh物件連結到gridTextArray[x, y]，新生成的SpriteRenderer物件連結到gridSpriteArray[x, y]，未來在變更圖片跟文字，只要動這兩個array即可。至此完成Start()時初始化事件。
MainStage.cs接著跑到Update()並且每個frame都會執行一次。
Update()裡面一開始有個"設定目前Camera位置"的code，這段code會偵測是否持續按下wsad或是上下左右鍵，若是，則根據按鍵移動Camera的(x, y)，z則不動。
Update()接著跑到一段"用滑鼠鍵盤設定遊戲世界地圖"的內容。首先，先抓取滑鼠於螢幕上的位置，接著將此位置的z軸變更為Camera的z軸(為ScreenToWorldPoint鋪路)，最後透過ScreenToWorldPoint指令，將滑鼠座標轉換成遊戲世界座標。
然後，我們再用遊戲世界座標軟換成Grid System座標，gridMap.AddValue、gridMap.SubstractValue、gridMap.GetValue都寫在GridMap.cs裡面，會轉換成Grid用的x, y座標，並且根據此x, y座標改變gridTextArray[x, y]、gridSpriteArray[x, y]當中的特定物件，也就是最後會顯示的文字與圖片。