[Unity] WebGL 以固定比例填滿畫面

2023.10.19 / Unity
在開發 Unity 網頁遊戲時,我們需要確保指定的顯示區域比例能與美術素材的比例相同,才不會意外導致變形。因此,在將 Unity 編譯為 WebGL 網頁版本時,需要對 Template 進行手動調整,以確保遊戲畫面能夠完整呈現。

設定 Canvas Scaler

Canvas 是 Unity 中建立 UI 的一種方式,由於網頁視窗的尺寸會被使用者縮放,所以需要調整 Canvas 的設定來讓元素間能隨著視窗大小自動調整大小。

請先選取 Canvas 物件,再將 Canvas Scaler 組件的 UI Scale Mode 調整為「Scale With Screen Size」。

匯入 WebGL 模板

接下來我們要在 Assets 下新增 WebGLTemplates 資料夾,待會才能來改它的輸出模板。模板拿預設樣板改就好,除了有特殊需求,不然沒必要自己重寫,浪費時間。

請開啟檔案總管,移動到編輯器的安裝資料夾中,將其中的 Default 資料夾拉進去 WebGLTemplates 資料夾中,並把它改名以方便辨識。

以 2022.3.8f1 版本舉例,預設的位置會在這裡:

C:/Program Files/Unity/Hub/Editor/2022.3.8f1/Editor/Data/PlaybackEngines/WebGLSupport/BuildTools/WebGLTemplates

最後匯入到專案中的結構會長這樣:

客製化 WebGL 模板

開始來改預設模板,建議用 VS Code 或 Notepad++ 來編輯,如果對打程式碼有信心的同學也可以用記事本。

首先看到約 15 行的地方,有個 Canvas 容器。

<canvas id="unity-canvas" width={{{ WIDTH }}} height={{{ HEIGHT }}} tabindex="-1"></canvas>

把它改成這樣,以畫面的高度來決定畫面的寬。如果你是要輸出成手機遊戲,就反過來,width 設定為 100%、height 設定為 auto。

aspect-ratio: 16 / 9 代表使容器能維持 16:9 的比例,如果要 4:3 的畫面就把它改為 aspect-ratio: 4 / 3。

<div id="unity-container" class="unity-desktop" style="width: auto; height: 100%; aspect-ratio: 16 / 9; overflow: hidden;">

接下來在 24~31 行可以看到一個 ID 是 unity-footer 的 div 容器,就是下面這串,把它全部刪掉。

<div id="unity-footer">
  <div id="unity-webgl-logo"></div>
  <div id="unity-fullscreen-button"></div>
#if SHOW_DIAGNOSTICS
  <img id="diagnostics-icon" src="TemplateData/webmemd-icon.png">
#endif
  <div id="unity-build-title">{{{ PRODUCT_NAME }}}</div>
</div>

再來看到 117 行,這邊是設定 Unity 渲染畫面到 Canvas 的大小的程式碼,由於我們在前面已經直接讓外部容器能自適應比例與解析度了,這邊就要改掉。

canvas.style.width = "{{{ WIDTH }}}px";
canvas.style.height = "{{{ HEIGHT }}}px";

都改成 100%。

canvas.style.width = "100%";
canvas.style.height = "100%";

最後看到 138~140 行,將這段 onClick 監聽的程式碼全部刪掉。

fullscreenButton.onclick = () => {
  unityInstance.SetFullscreen(1);
};

建置輸出

完成以上步驟就搞定了,回到 Unity 專案,點擊 Ctrl + B 建置輸出,出來的結果就會是這篇文章第一張圖的樣子(圖片自己加):

參考資料

  1. 使用 CSS 製作等比例縮放區塊- aspect-ratio | 文章 | DeTools 工具死神 (wingzero.tw)
  2. Unity WebGL Full Screen in web browser Simple and fast. - YouTube

相關文章

Ted Liou

雲科碩士在讀中,專注於 Unity C#、TouchDesigner 技術,常把技術筆記分享到部落格,偶爾還直接挪用文章來當教材的研究生。

留言板

歡迎提問或分享觀點!