【遊戲開發日誌 #13】文字遮罩、視窗風格樣式、選單操作配置

錄製影片時長較長的 .mkv 原始檔一個就幾十上百 GB 起跳，加總起來就變成下面那張圖的樣子了。

撇除掉那些舊資料，實際需要保留的檔案也還有大約 2TB 上下，並非一朝一夕能整理得完的。

直到上方提到的那個消息，通知說 3 月底前母校那邊會將帳號逐漸停用並刪除，這邊也只好加緊腳步，大概上星期才終於備份完畢，還真的謝謝你了 Google。

這次的進度集中的 UI 的架構處理上，能拿出來寫的項目可能稍微少了些。

---

◆【陰影文字】

字面上的意思，就是常見的替文字加上陰影特效。

實測之後，決定不使用 Unity 預設的 shader 來達成，主要有兩個考量。

① 字型尺寸較小且 Font Render Mode 為 Raster Hinted

遊戲內主要以像素字型為主，加上上述的特性，預設 shader 中的 Underlay 屬性經測試無法達到理想的效果。

② fallback 字型無法繼承自訂 material

前篇有所提及的後備字型，TextMesh Pro 預設 shader 中，像是文字外框、陰影等屬性是能夠一併作用到 fallback 的文字之上的。

我們將不使用預設 shader 來製作陰影特效，但使用自訂 shader 時，又會導致效果無法作用到 fallback 文字。（可能有方法能辦到，但至少這邊經過第一時間測試無法生效）

方法是人想出來的，不能透過 shader 來實現的話，就只好土法煉鋼，直接再製複數個 TextMesh Pro 物件偏移到定位，來直接實現文字陰影的效果。

Δ 加入 sprite asset 與 fallback 文字進行測試

如此一來可確保所有顯示內容都能有陰影效果，但這也包含了文字間的 sprite asset，這時可透過將陰影文字物件 sprite asset 進行透明化，可用以下 rich tag 來達成。

<color=#00000000> </color>

注意 sprite asset 本身需要加入「tint」屬性標籤才會有所作用。

◆【文字遮罩】

對 TextMesh Pro 物件使用遮罩處理需要留意的部份，是以我手邊的遮罩插件為基準來寫的，不一定適用於全部場合。

TextMesh Pro 物件的 material 性質較不同於 SpriteRenderer 等元件，受遮罩影響時，不會 instance 出額外的獨立材質，而是永久性地作用到 font asset 上綁定的 material。

這意味著，若針對一 TextMesh Pro 物件使用遮罩，所有使用相同 font asset 的物件都會受到影響，而且該影響不會隨退出 Play Mode 而解除，使該 font asset 的 material 受到「汙染」般。

此時，應透過 Create Material Preset 的功能，讓遮罩的目標使用獨立專屬的 material，避免牽累其他同字型物件。

sprite asset 也同樣會有此情形，但不像 font asset 能夠利用 Create Material Preset 功能，只能透過再製整個 sprite asset 來實行，幸好單個 sprite asset 檔案的大小不會像 font asset 那麼龐大。

◆【視窗風格樣式】

把當初原版的視窗框架規格化外，也另外製作了另一個風格樣式。

Δ 原版／新版

以前還在使用 RPG Maker 時，有 windowskin 這個調整視窗樣式的設置，不確定現今的 MV/MZ 版還有沒有類似功能。如法炮製，做了個能即時調整視窗樣式的功能，不過感覺未來可能用不太到就是。

◆【選單操作配置】

此次進度的重點，即是將當初的選單類操作系統完全改寫。

介面中不使用 UGUI，且遊戲主要靠鍵盤／手把操作，這邊寫的系統架構可以說是要確立好將來所有非角色操作的控制基礎了。

● [項目置替 Prefab]

就是普通的 Prefab，但是加上了控制元件可以存取其中的指定部份，主要用以替換其中的圖像或是文字。像是商店介面中，一個商品的選項就可以透過該功能達成，以快速存取並替換選項上的圖像、品名還有價格等等。

此外，就是要統一調整 Prefab 內 Sprite 的相對圖層關係、顏色和不透明度了。

● [選項列與選項]

選單介面的基礎單位由「選項列」組成，每個選項列集合又包含一個以上的「選項」。

Δ 選項關係概念草稿

■ [選項]

每個選項單位中，也承載了不少內容，包括但不限於：

【追蹤位置】

選項追蹤的座標，可以是指定座標或是跟隨特定物件。

【操作內容】

操作的規則，如：鍵位組合、選項切換目標（至上／下個、特定選項，甚至跨越至其他列）、音效及內容反饋。

【選項條樣式】

當選單指示到此選項時，選項條應顯示的樣子和規格，亦支援過渡動畫處理。

■ [選項列]

選項的集合體，同樣包含了：

【選項記憶】

當選單的指示離開此列時，會自動記憶最後指向的選項位置，等到下次再指示到這個列時，能以該選項作為選擇目標。

【可視範圍】

此列當中的選項們，當指示到任意選項上時，若該選項在此範圍設置之外，則會將此列所有選項進行座標的偏移過渡處理，使其顯露於該範圍內。

換言之，可用來實現選單中的頁面捲動功能，或是尺寸超出整個畫面的地圖介面。

Δ 橘框為可視範圍（固定）、藍框為最大涵蓋範圍（下述）

【捲動條控制】

附屬於可視範圍的功能，目的是控制捲動條物件之用。

捲動條是當初因時間不足（加上我忘了）而未實現的部分，想想也是該來實作了，畢竟是個呈現一個清單中內容數目總量的指標，可以說還挺重要的。

有了可視範圍後，還需要取得該選項列中，所有選項所形成的「最大涵蓋範圍」。

有了這兩個範圍後，就可以透過計算相對位置來轉換成捲動條的位置和尺寸狀態了。

Δ 可呈現於不只一個捲動條

---

選單類的系統架構大致上都完成了，趁這個機會，打算把舊版的設置介面也套用上新系統，隨後再重新設計選單介面還有 HUD 區塊吧。

是說我 PC 的配備已經連法環的最低配備都到不了，這幾天只能掛著實況來雲通關了。