設計標題畫面

在接下來的兩個教學中,我們將使用 Godot 的 UI 系統來一步一步製作兩個回應式 UI 界面:

  1. 主選單。

  2. 有血槽、精力槽、炸彈數與金錢量的遊戲 UI。

接著我們將學習如何有效率地設計遊戲 UI,以及如何使用 Godot 的 Control 節點。這一頁將著重於視覺部分:所有在編輯器上做的事。要瞭解如何以程式碼編寫血槽,請參考 使用程式控制遊戲的 UI

../../_images/ui_main_menu_design_final_result.png

接著要做的 GUI。

先下載專案檔: ui_main_menu_design.zip 並解壓縮。將 start/ 專案匯入至 Godot 並繼續這個教學。 end 資料夾包含了最後的成果。所有的 Sprite 都放置於 start/assets/main_menu 資料夾中。

備註

請先閱讀 利用 Control 節點設計界面 以瞭解 Godot 的 UI 系統如何運作。

如何設計遊戲 UI

在設計 UI 前,通常會先進行粗略地打樣。打樣的重點在於 UI 元件擺放的位置、元件的大小、以及與使用者互動的方式。只需要使用紙筆就好了,請避免在這個階段做出完整的視覺圖。只需要一些預留位置用的 Sprite 來給各個元件用就好了,接著便可以到 Godot 裡開始做。這個階段只需要確保使用者能知道這些預留位置的 Sprite 是用來做什麼的就好了。

../../_images/ui_design_rough.png

粗略的 UI 計劃或打樣

預留位置 (Placeholder) 不一定要很醜,但應該儘量讓視覺圖簡單並清楚。在玩家開始測試 UI 前應避免特殊效果、動畫、與太多的細節,否則:

  1. 視覺圖可能會讓玩家有錯誤的期待,並可能讓你錯過了寶貴的回饋。

  2. 若使用者經驗 (UX) 不好時,則可能需要重新設計一些 Sprite。

小訣竅

儘量先在界面上使用簡單的文字與框框,之後也很容易以紋理貼圖來替換掉。專業的 UX 設計師通常只會使用灰階的框線來繪製。一旦忽略顏色與視覺上的細節,便比較能專注於好好地擺放 UI 的位置與調整大小。這樣一來可以幫助你打好接下來要設計的基礎。

在 Godot 中設計 UI 有兩種方法。你可以:

  1. 將所有東西都做在同一個場景內,最後再將其中一些東西分出來變成可以重複使用的場景。

  2. 為可以重複使用的元件建立樣板場景,並以基礎場景來繼承出特定用途的元件。

這裡我們會使用第一種方法,因為初版的 UI 通常會與你所與其的樣子有所落差,會有一些部分是你想扔掉並重新設計的。當確定所有東西都做好了以後,便能輕鬆整理出可重複使用的部分。這點我們稍後會看到。

../../_images/ui_main_menu_placeholder_assets.png

在 Godot 中可以看到的檔案。這些圖片看起來比粗略的設計還要簡潔,但依然算是預留位置用的。

設計主選單

在我們進入編輯器以前,必須先依據打樣圖來計劃如何嵌套容器。

進一步分解 UI 打樣圖

可以通過下列三條經驗法則來選擇適合的容器:

  1. 將 UI 拆解成互相嵌套的框框。最大的框框包含所有東西,而最小框框的則放置一些如帶有標籤的進度條或有按鈕的面板之類的單一界面元素。

  2. 如果框框的周圍有內邊距,則使用 MarginContainer

  3. 如果元素是使用行或列來排列的,則使用 HBoxContainerVBoxContainer

有了這些規則就足夠我們入門了,而且也適用於簡單的界面。

在主選單中,最大的框框就是整個遊戲視窗。在視窗的邊緣與第一個元素中間有留白,所以這裡要使用 MarginContainer 。接著,畫面分隔成兩列,所以我們要用 HBoxContainer 。左邊的那一列中我們使用 VBoxContainer 來處理多行排列。而右邊的那一列則使用 CenterContainer 來把插圖置中。

../../_images/ui_mockup_break_down.png

界面的各個區塊。依據上面提到的三個原則來分解。

小訣竅

容器會依據視窗的解析度與長寬比自動調整。雖然也可以手動來擺放 UI 元素,但使用 Container 更快、更精準,且使用 Container 是 回應式 (Responsive) 的。

準備主選單場景

備註

本教學中的視窗大小為 1366×768。若要修改專案的基本視窗大小,請從編輯器上方開啟 [專案] > [專案設定] 並更改 Display (顯示) > Window (視窗) > Size (大小) > Width (寬度)1366 ,以及將 Display (顯示) > Window (視窗) > Size (大小) > Height (高度) 更改為 768

若沒有修改視窗大小,則使用錨點與容器的結果可能會不如預期。

接著來製作主選單。我們先在單一場景內製作。點擊 場景 > 新增場景 來建立一個空白場景。

在保存場景前要先新增一個根節點。UI 的根節點應該是最外層的 Container 或元素。在這個例子中則是 MarginContainer 。對於大多數的界面來說都可以用 MarginContainer ,因為 UI 的周圍通常都需要留白。按 Ctrl + S (或是 macOS 上 Cmd + S )來將場景保存至硬碟上。將其命名為 主場景

再次選擇 MarginContainer ,並到屬性面板中設定外邊距 (Margin) 的大小。向下滾動 Control 類別至 Custom Constants (自定常數)段落。展開 Custom Constants 並設定外邊距如下:

  • Margin Right(右外邊距):120

  • Margin Top(上外邊距):80

  • Margin Left(左外邊距):120

  • Margin Bottom(下外邊距):80

接著我們讓 Container 填滿視窗。在檢視區上方的工具列中點開 畫面配置 選單並選擇最後一個選項: 全矩形

新增 UI Sprite

選擇 MarginContainer ,並建立如 TextureRect 的 UI 元素節點。我們需要:

  1. 標題或 LOGO,

  2. 三個文字選項,每個都是單獨的節點,

  3. 版本註解,

  4. 以及主選單的插圖。

點擊 新增節點 按鈕或是使用鍵盤快捷鍵 Ctrl + A (或是 macOS 上 Cmd + A )。輸入 TextureRect 來搜尋對應的節點並按 Enter 鍵。選擇新增的節點後,按 Ctrl + D (或是 macOS 上 Cmd + D )五次來建立另外五個 TextureRect 實體。

分別點擊來選中各個節點。在屬性面板中找到 Texture (紋理貼圖),並點擊 [空] > 載入 。接著會顯示檔案瀏覽器,可以選擇要載入進紋理貼圖欄位用的 Sprite。

../../_images/ui_texturerect_load_texture.png

可以在檔案瀏覽器內找到並載入紋理貼圖。

在每個 TextureRect 節點上重複這個步驟。現在我們應該有了 Logo、插圖、三個選單的選項、以及版本節點。這幾個項目應該都是各自獨立的節點。接著,在場景分頁中的各個節點上點兩下並重新命名。我們還沒把東西放在 Container 內,所以現在看起來應該亂亂的。

../../_images/ui_main_menu_6_texturerect_nodes.png

六個有設定好紋理貼圖的節點。

備註

如果想在遊戲中支援多語言,可以在選單項目上使用 Label 來代替 TextureRect

新增容器來自動擺放 UI 元素

Our main menu has some margin around the edges of the screen. It is split in two parts: on the left, you have the logo and the menu options. On the right, you have the characters. We can use one of two containers to achieve this: HSplitContainer or HBoxContainer. Split containers split the area into two: a left and a right side or a top and a bottom side. They also allow the user to resize the left and right areas using an interactive bar. On the other hand, HBoxContainer just splits itself into as many columns as it has children. Although you can deactivate the split container's resize behavior, it's recommended to favor box containers.

選擇 MarginContainer 並新增一個 HboxContainer 。接著,我們需要為 HBoxContainer 新增兩個子容器:左側選單項目用的 VBoxContainer 以及右側插圖用的 CenterContainer

../../_images/ui_main_menu_containers_step_1.png

現在應該有四個嵌套的容器以及其中的各個 TextureRect。

在節點樹中選擇所有要放在左邊的 TextRect :Logo、選單項目(繼續、新遊戲、選項),以及版本備註。將這幾個節點拖曳到 VBoxContainer 中。接著這些節點應該會自動排列好。

../../_images/ui_main_menu_containers_step_2.png

容器自動排放與縮放紋理貼圖

接著我們還有兩個問題要解決:

  1. 右邊的 Characters 沒有置中。

  2. Logo 與其他 UI 元素間沒有空格。

接下來我們要把右邊的 Characters 置中。先選擇 CenterContainer ,然後在屬性面板中找到 Size Flags (大小旗標)分類,並點擊 Vertical (垂直)屬性右邊的欄位,並將 Fill (填充)與 Expand (延展)打勾。接著在 Horizontal (水平)上做相同的設定。這樣一來 CenterContainer 就會在不擠壓相鄰的 BoxContainer 節點的情況下同時填滿所有可用空間。最後,將 Characters 節點拖曳到 CenterContainer 裡,Characters 元素會自動置中。

../../_images/ui_main_menu_containers_step_3.png

在畫面右半邊的 Characters 節點會在放入 CenterContainer 後立刻置中。

要為左邊的選單選項與 Logo 加上間隙,我們需要再使用一個容器,並設定大小旗標。選擇 VBoxContainer 並按鍵盤 Ctrl + A (或是 macOS 上 Cmd + A )來在 VBoxContainer 內新增節點。接著再新增第二個 VBoxCOntainer 並命名為 MenuOptions (選單項目)。選擇所有選單項目: ContinueNewGame 、與 Options ,並將這幾個選項拖曳至剛才新建的 VBoxContainer 中。界面的畫面配置大致看起來應該還跟剛才差不多。

../../_images/ui_main_menu_containers_step_4.png

在其他兩個節點中間放置一個新的容器來維持 UI 的畫面配置。

我們現在已經把所有選單選項都放在同一個群組內了,接著我們要讓這個選單選項的容器來儘可能在垂直方向伸展,佔掉所有可用的空間。選擇 MenuOptions 節點,並在屬性面板中往下滾動找到 Size Flags 分類。點擊 Vertical 屬性右邊的欄位並勾選 FillExpand 。接著容器應該會佔滿縱向所有可用的空間,但同時不會去擠壓到同級節點的 LogoVersion 元素。

要將 VBoxContainer 容器中的節點置中,在屬性面板內滾動到最上面,並將 Alignment (對齊)屬性設為 Center (中央)。

../../_images/ui_main_menu_containers_step_5.png

現在 UI 左側的選單選項應該垂直置中了。

最後,讓我們來在選單項目中間加點空白。展開 Size Flags 底下的 Custom Constants 分類,接著點擊 Separation (分隔)參數旁邊的欄位並設為 30。按下 Enter 之後, Separation 屬性變會變為有效狀態,而 Godot 會自動在選單項目間加上 30px 的空白。

../../_images/ui_main_menu_design_final_result.png

最終界面。

連一行程式碼都不用寫,我們就做好了精準排放的回應式主選單。

恭喜完成!你可以下載最後的成品 ui_main_menu_design.zip 並與你自己完成的結果比較一下。下一個教學我們會接著製作有血槽與道具計數器的遊戲的界面。

進一步分解 UI 打樣圖

製作回應式使用者界面的重點就在於確保 UI 能在各種螢幕類型間正確縮放。電影螢幕與電腦的顯示器有不同的大小與長寬比。在 Godot 中,我們使用 Container 來控制 UI 元素的位置與大小。

嵌套的順序很重要。如果要看看你做出來的 UI 有沒有正確反映在不同的螢幕長寬比上,可以先選擇根節點,然後按鍵盤 Q 來開啟選擇模式 (Select Mode),接著選擇 Container 並拖曳 Container 的角落來縮放。UI 元素應該會在 Container 當中流暢移動。

你可能有發現,雖然 Container 會移動 Sprite,但是並不會對 Sprite 進行縮放。這很正常,因為我們除了要讓 UI 系統可以處理不同的螢幕比率,還需要讓整個遊戲都能配合不同的螢幕解析度。為此,Godot 會將整個視窗進行縮放。

你可以在專案設定中修改縮放模式:在頂部選單中點擊 專案 > 專案設定 。在視窗左邊找到 Display(顯示) 分類,點擊 Window(視窗) 子分類。再來可以在視窗的右邊找到 Stretch(拉伸) 段落。其中的三個設定: Mode(模式)Aspect(比率) 、與 Shrink(延展) 可以控制螢幕的大小。詳細資訊請參考 Multiple resolutions