設計 GUI

你現在已經有基礎了,我們接著來看看如何利用可重複使用的 UI 模型(血槽、精力槽、炸彈與寶石計數器)來製作遊戲的 GUI(Graphical User Interface,圖形使用者介面,「圖形界面」)。讀完這個教學之後,你就會有一個能使用 GDScript 或視覺腳本 (VisualScript) 來控制的遊戲圖形界面:

../../_images/ui_gui_design_final_result.png

最終結果

另外,你也會學到:

  1. 製作彈性的 UI 元件

  2. 使用場景的繼承功能

  3. 建立一個複雜的 UI

下載專案檔: ui_gui_design.zip 並解壓縮。將 start/ 專案匯入至 Godot 以繼續這篇教學。 end/ 資料夾包含了最後成果。

備註

你也可以在 在 YouTube 上觀看(英語) 本教學的影片版本。

拆解 UI

我們先來把最終的 UI 分解一下,並計劃接下來要用到的 Container。就像 設計標題畫面 中一樣,我們要先從 MarginContainer 開始,然後剩下的東西看起來最多能分成三列:

  1. 左側有血槽與精力槽的數字

  2. 血槽與精力槽

  3. 右側有炸彈與寶石的計數器

但是,血槽與精力槽的數字標籤跟條狀槽應該是屬於同一個 UI 元素中的兩個部分。這樣說來的話,就只能算是兩列:

  1. 左側有血槽與精力槽

  2. 右側有炸彈與寶石的計數器

為了讓嵌套 Container 可以更簡單,我們先使用 MarginContainer 來在畫面周圍加點留白,接著使用 HBoxContainer 來分出兩列。兩個計量槽則使用 VBoxContainer 來將其中一個堆疊在另一個上面。最後我們在右列中使用 HBoxContainer 來將炸彈與寶石的計數器分別擺放。

../../_images/ui_gui_step_tutorial_containers_structure.png

只用了四個 Container 就能做出清楚的 UI

接著我們還需要在各個 UI 元件中加上其他的 Container,但整體的 GUI 場景結構就是這樣了。計劃好了以後我們就可以到 Godot 裡製作界面了。

建立基礎的 GUI

要製作 GUI 有兩種方法:先在分開的幾個場景中分別設計各個元素,最後再拼湊在一起;或是,先在單一個場景內設計所有東西的原始模型,之後再把他們拆分開來。這裡我推薦先在單一場景內製作,因為這樣一來就可以很輕鬆地測試各種 UI 的擺法以及大小的比例。看得順眼之後就可以將場景中其中一段場景樹保存為可以重複使用的子場景,這點稍後會說明。

現在,我們先從幾個容器開始。

先建立一個新場景並新增 MarginContainer ,接著將其命名為 GUI

我們要將界面固定在畫面的上方。選擇 GUI 節點並點擊檢視區上方的畫面配置按鈕。選擇 上延長 選項。 GUI 節點會自動固定在母節點(此處為檢視區)的上方。放入子節點後會自動調整縱軸的大小來為子 UI 元素騰出空間。

將場景保存為 GUI.tscn 。我們會將所有 GUI 都放在裡面。

選擇 MarginContainer 後,到屬性面板並滾動到 Custom Constants(自定常數)段落,將其展開後點擊每個 Margin 屬性右邊的欄位並設為 20 px。接著,新增一個 HBoxContainer 節點,這個節點會用來把左側的兩個計量槽與右邊的兩個計數器分開來。

我們要在 HBoxContainer 內垂直堆疊兩個計量槽。將 VBoxContainer 新增為 HBoxContainer 的節點,並命名為 Bars 。再選擇一次母節點的 HBoxContainer ,這次再新增一另一個 HBoxContainer 子節點,並命名為 Couters 。有了這四個容器,我們就有基本的 GUI 場景了。

../../_images/ui_gui_containers_structure_in_godot.png

現在應該有看起來像這樣的四個容器

備註

會這樣做是因為我們先把 UI 設計拆解開來,並花了一點時間來設計如何使用 Container。跟著這個教學做的時候可能會感覺有點奇怪。但之後你在實際的遊戲上做過之後就會慢慢瞭解這個工作流程有多有效率了。

建立基礎計量槽

每個計量槽都可以再拆分成水平的兩個子元素:左邊有寫著血量的 Label,右邊有計量槽。這裡再強調一次,這種做法很適合用 HBoxContainer 。先選擇 Bars 節點,並在其中新增一個 HBoxContainer ,命名為 Bar

左側的 Label 本身會需要至少三個子節點:一個用來顯示背景的 NinePatchRect ,以及疊在上面的 HPEP 貼圖紋理,這個稍後會被放在左側,接著是右邊的數值。我們可以按照各種方式來嵌套 Control 節點。我們也可以使用 NinePatch 節點來容納其他兩個子節點來作為母節點,但通常來說我們會使用 Container,因為 Container 的功能就是用來組織 UI 元件。不管怎樣我們稍後還是會用到 MarginContainer 來在血量與血槽間加上間隙。讓我們選擇 Bar 並新增一個 MarginContainer ,命名為 Count 。在其中新增三個子節點:

  1. 命名為 BackgroundNinePatchRect

  2. 命名為 TitleTextureRect

  3. 命名為 NumberLabel

為了把節點都弄成同級節點,記得要在新增前點選 Count 節點。

../../_images/ui_gui_step_tutorial_bar_template_1.png

場景樹現在應該看起來像這樣。接著已經準備好要新增紋理貼圖了

現在場景還是空的,是時候來點紋理貼圖了。要載入紋理貼圖,請看到檢視區左邊的檔案系統 Dock,並移動到 res://assets/GUI 資料夾。

../../_images/ui_gui_step_tutorial_textures_in_FileSystem_tab.png

這裡有我們要拿來給界面用的紋理貼圖。

在場景 Dock 中選擇 Background 。找到屬性面板中的 Texture 屬性,並在檔案系統分頁中點擊並拖移 label_HP_bg.pngTexture 槽裡。Background 節點現在看起來還扁扁的,因為在元素有大小之前,母節點的 MarginContainer 都先強制把節點的大小設為 0。讓我們選擇 Background 節點,並在屬性面板中向下滾動到 Rect 段落,將 Min Size (最小大小)設為 (100, 40) 。接著就可以看到 Background 的節點跟著母節點一起被放大了。

接著,選擇 Title 節點並拖曳 label_HP.png 節點至 Texture 槽內。選擇 Number 節點後點擊 Text 屬性旁邊的欄位並輸入 10 。如此一來,兩個檢視區都可以可以在檢視區中看到了。著兩個節點應該會從母節點的 MarginContainer 的左上角開始堆疊。

../../_images/ui_gui_step_tutorial_bar_label_stacked.png

若選擇了兩個節點,則應該可以看到類似這樣的東西

由於這幾個元素都直接接在容器的底下作為 直接子節點,所以我們沒辦法自由地移動這些節點: Count 節點會自動重設子節點的錨點、大小、與位置。如果試著在檢視區裡移動或縮放子節點後,在場景 Dock 內選中任意一個紋理貼圖並按鍵盤 Ctrl + UpCtrl + Down 來重新排列,則這幾個節點都會自動回到原來的位置與大小。

母容器會控制其直接子節點的大小、比例、外邊距、與錨定。要修改節點則必須在容器裡面嵌套一個一般的 Control 節點或其他 UI 元素。這裡我們會使用 Background 作為 TitleNumber 的母節點。將選擇 TitleNumber ,並將這兩個節點都拖曳至 Background 中。

../../_images/ui_gui_step_tutorial_bar_nesting_inside_background.png

使用 Background 節點作為兩個紋理貼圖的母節點便能脫離 Count 節點的 MarginContainer 的控制

在屬性面板中選擇 Title 並將 Stretch Mode 屬性改為 Keep Centered 。接著在屬性面板中找到 Rect 分類並將 Size 屬性改為 (50, 40) ,這樣一來便只會佔用背景的一半大小。接著,選擇 Number 節點,並在檢視區中點擊 畫面配置 選單並點擊 全矩形 。節點會自動縮放並佔滿整個 Background 。再來看屬性面板,將 Align 屬性改為 Right ,並將 Valign 屬性改為 Center 。現在文字應該會吸附在 Background 的右邊中間。調整節點的水平大小為 Background 的一半,並在右邊留一點空白。

../../_images/ui_gui_step_tutorial_bar_placed_title_and_label.png

節點的定界框在檢視區中看起來的樣子。先大致上差不多就好,現在還先不用放得很精確。

更改 Label 的字體

Label 的字體太小了,我們需要改一下。選擇 Number 節點並在屬性面板中往下捲動找到 Control 類別,並找到 Custom Font (自定字體)分類。點擊 Font 屬性右邊的欄位並點擊 新增 Dynamic Font 。接著再點擊一次欄位並選擇編輯。

現在可以選擇 Dynamic Font 資源。先展開 Font (字體)分類,並點擊 Font Data (字體資料)旁邊的欄位。點擊 載入 按鈕。在檔案瀏覽器中打開 assets/font 資料夾並在 Comfortaa-Bold.ttf 上點兩下來打開。現在我們應該可以在檢視區上看到字體更新了。展開設定分類並修改字體大小,將 Size (大小)屬性設得比原來大一點,如 2428

我們現在需要調整文字的基線(也就是數字底部的邊緣)來對齊左邊的 HP 紋理貼圖。為此,再回到 DynamicFont 資源內,調整 Extra Spacing (額外留白)分類下的 Bottom 屬性,在文字的底部加點留白。在場景分頁中點擊 Number 節點並回到節點的屬性中,修改 ValignBottom。要調整文字的基線,再回到 Custom Font 分類底下,點擊字體欄位並修改 Bottom 屬性,調整至文字與 Title 節點對齊即可。我這邊使用的值是 2 px。

../../_images/ui_gui_step_tutorial_number_baseline.png

將 Bottom 值設為 2px,Number 就跟 Title 對齊了

這樣一來,我們就完成了 GUI 中最難的部分了。恭喜!接著來看看簡單的節點。

新增計量槽

要做好血條我們還需要最後一個元素:血槽本身。Godot 附帶的 TextureProgress 節點正是我們需要的東西。

選擇 Bar 節點,並在其中新增一個 TextureProgress ,將其命名為 Gauge (計量)。在屬性面板中展開 Texture 段落,接著到檔案系統 Dock 中將 lifebar_bg.png 紋理貼圖拖曳到 Under 槽中。同樣地將 lifebar_fill.png 圖片拖曳至 Progress 槽。在屬性面板的 Range 類別中,將 Value 屬性的值更改為 50 來填充計量槽。

只用了五個 Control 節點,我們就準備好了第一個計量槽了。

../../_images/ui_gui_step_tutorial_bar_final.png

就這樣,我們已經準備好血槽了。最後一個部分一下就完成了對吧!這都要歸功於我們精心設計的 Container。

設計炸彈與寶石計數器

炸彈與寶石的計數器就類似計量槽的 Count 節點,所以我們就直接複製過來當作樣板使用。

選擇 Bar 節點底下的 Count 節點,並按鍵盤 Ctrl + D 來複製。拖曳新的節點到節點樹底下的 Counters HBoxCountainer 下。接著你會發現複製過來的節點被自動縮放了,但先不用擔心,我們等等會修。

Count2 節點重命名為 Counter 。與計量槽不同的是,我們希望數字靠左顯示,然後將圖示顯示在左邊。用一樣的設定方法:給一個背景( NinePatchRect )、一個標題、以及一個顯示數字的節點。 Title 是一個 TextureRect 節點,是用來顯示圖示的。在場景樹中選擇 Title 節點並將其重命名為 Icon

../../_images/ui_gui_step_tutorial_counter_design_1.png

到目前為止你的場景樹看起來應該長這樣

選擇了 Icon 節點後,到屬性面板中滾動到最上面並找到 Texture 槽。接著到左邊的檔案系統 Dock 裡選擇 bombs_icon.png 並將其拖曳至 Texture 槽內。在場景分頁中選擇 IconNumber 節點,並在檢視區上方工具列的畫面配置選單中選擇 全矩形 。現在,這兩個節點的大小應該會變得符合 Background 的大小了。

../../_images/ui_gui_step_tutorial_counter_design_2.png

雖然節點錨定到整個背景了,但位置還不正確

接著我們要修改 Number 的對齊屬性來把它移動到 Background 的左邊中間。選擇 Number 節點,並修改 Align 屬性為 Left (左), Valign 屬性為 Center (中)。接著增加左側邊緣的大小點來給 Background 與文字中間加一點留白。

../../_images/ui_gui_step_tutorial_counter_design_3.png

Number 節點現在對齊在左邊中間了

要讓圖示與背景重疊,我們需要做點小調整。首先,現在的背景太高了,這是因為背景現在是放在由最上層 GUI 節點所控制的 Margin Container 內。先選擇場景樹中最上次的 GUI 節點,並儘量縮小縱向的大小。這時候你會發現縮小到某個大小後,計量槽會阻止你繼續縮小。Container 節點沒辦法縮小到比最小的子節點還要小,且還必須考慮外邊距。

選擇 Icon 節點,並點擊畫面配置選單,選擇 全矩形 來重新置中 Icon 節點。我們要把 Icon 錨定到 Background 的右邊。再打開畫面配置選單一次,然後選擇 中右 。將圖示向上移動來讓圖示在 Background 上垂直置中。

../../_images/ui_gui_step_tutorial_counter_design_4.png

炸彈圖示現在錨定到 Background 的右側了。調整 Counter Container 的大小就可以注意到現在圖示固定靠在右側了

因為我們的 Counter 是從計量槽的 Count 複製過來的,所以現在 Number 節點的字體跑掉了。選擇 Number 節點,然後找到 Font 屬性並點擊來設定 DynamicFont 資源。將 Extra Spacing 段落下的 Bottom 值改為 0 來重設字體的基線。現在計數器應該正常運作了。

接著來把 Counters 錨定到檢視區的右邊。這裡我們需要讓 Bars 容器可以吃掉所有水平方向上可用的空間。選擇 Bars 節點,並向下滾動找到 Size Flags 分類,將 Horizontal 分類底下的 Expand 值打勾。現在 Bars 節點的大小應該變成會把計數器推到畫面右邊了。

../../_images/ui_gui_step_tutorial_counter_design_5.png

延展的容器吃掉了母節點內所有可用的空間,並推動所有其他的東西

將計量槽與計數器變成可重複使用的 UI 元件

現在我們只有計量槽跟計數器各一個,但我們需要的是各兩個。我們之後可能會需要修改計量槽的設計或是功能。如果可以將 UI 元素的樣板儲存成單一場景,並使用子場景來製作其他樣式的話會比較好。在 Godot 內可以通過繼承場景來做到。

我們現在將 CounterBar 分支都分別保存成獨立的場景,之後用他們來製作 LifeBarEnergyBarBombCounter 、以及 EmeraldCounter 。選擇 Bar HBoxContainer 後右鍵點擊並選擇 保存分支為場景 。保存場景為 Bar.tscn 。接著節點分支應該會變成單一一個 Bar 節點。

小訣竅

場景就是樹狀的節點。最上層的節點就是樹的 ,而在階層架構最末端的節點就是 葉子 。除了根節點以外,有子節點的節點就是 分支 。我們可以將節點分支封裝為獨立的場景,或是從其他場景載入為可用的分支。在場景樹中右鍵點擊任意一個節點後選擇 保存場景為分支自場景合併

接下來,選擇 Counter 節點並做同樣的操作。右鍵點擊,選擇 保存分支為場景 並保存為 Counter.tscn 。場景樹上節點的右邊會出現新的編輯場景圖示。點擊 Bar 右邊的編輯場景圖示來打開對應的場景。調整 Bar 將誒點的大小來讓 Bar 的定界框的大小符合內容。我們命名與放置 Control 節點的方式已經讓我們準備好繼承這個模板來做出血槽了。 Counter 也一樣。

../../_images/ui_gui_step_tutorial_bar_template_scene.png

甭需額外修改,Bar 已隨時可用

使用場景繼承功能來製作剩下的元素

我們需要兩個相同功能的計量槽:左邊要有帶數值的標籤,右邊有水平的計量槽。唯一不同的地方是其中一個是綠色的,而且有 HP 標籤,而另一個是黃色的,且標籤為 EP。Godot 中有能夠給所有計量槽建立可重複使用的共通基礎的工具: 場景繼承功能

../../_images/gui_step_tutorial_gui_scene_hierarchy.png

通過使用繼承的場景來讓 GUI 場景保持乾淨。到最後我們只會需要幾個 Container 與各 UI 元件的各一個的節點。

在繼承的場景中,除了名稱以外,所有節點的每一個屬性都可以在屬性面板中修改。如果修改並保存了母場景,則所有繼承的場景都會一併更新並反映出更改。若在繼承的場景中修改了任何數值,則會將母場景的值複寫掉。對於 UI 來說很有用,因為相同的元素常常都需要許多不同的版本。通常來說,在 UI 設計裡,按鈕、面板等的元件都有一組共用的基礎樣式與互動。我們通常不會手動複製出每一種不同的版本。

複寫的屬性旁邊會出現一個重新載入圖示。點擊就可以將數值重設成母場景的預設值。

備註

可以將場景的繼承想像成場景樹或是 GDScript 中的 extends 關鍵字。執行繼承的場景就跟執行母場景一模一樣,但可以複寫屬性、複寫資源、並且可以新增額外的節點與腳本來擴充功能。

繼承 Bar 場景來製作血條 (LifeBar)

打開 場景 -> 新增繼承場景 來建立一個新版本的 Bar 。選擇 Bar 場景來打開。接著會出現一個新的 [未保存] 場景,長得跟 Bar 很像,但除了根節點以外所有的節點都是灰色的。按鍵盤 Ctrl + S (macOS 上 Cmd + S )來保存新的繼承場景並命名為 LifeBar

../../_images/ui_gui_step_tutorial_inherited_scene_parent.png

灰色的節點無法重新命名。代表這些節點有母場景

首先,將根節點或最上層的節點重新命名為 LifeBar 。根節點應該要能說明清楚這個 UI 元件的用途。通過名稱來區分出這個節點與稍後要做的 EnergyBar 。場景中的其他節點也應該要通過易懂且放到繼承的場景內也適用的名稱來說明元件的架構。如 TextureProgressNumber 節點就是個例子。

備註

如果你有做過網頁設計,這裡的做法就與 CSS 相同:先建立一個基礎的 Class,然後通過 Modifier Class 來製作出不同的種類。從基礎的按鈕 button class,再加上 button-green 與 button-red 等種類來讓使用者在提示框中選擇接受或拒絕。新的 class 名稱包含了母元素的名稱,再加上一個額外的單詞來描述不同的地方。我們在這裡繼承場景後修改了最上層節點的名稱時也是在做同樣的事。

設計精力槽 (EnergyBar)

我們已經使用 Bar 場景來搞定了 LifeBar 的設計。現在我們要做 EnergyBar

先建立繼承場景。打開 Bar.tscn ,然後在根節點 Bar 上點兩下並重新命名為 EnergyBar ,保存新場景為 EnergyBar.tscn 。然後我們要把 HP 紋理貼圖改成 EP 的貼圖,並更改計量槽的貼圖。

在場景樹中選擇 Title 節點,並到左邊的檔案系統 Dock 中將 label_EP.png 拖曳到紋理貼圖槽內。選擇 Number 節點並將 Text 屬性設為不同的值,如 14

你會注意到 EP 的貼圖比 HP 的貼圖還來得小。這裡我們應該要一併更新 Number 的字體大小來配合貼圖。字體屬於資源,一旦我們修改了資源的屬性,整個專案中所有用到了相同資源的節點都會被影響。你可以試試看把字體大小改為一個大點的數字如 40 ,然後切換回去 LifeBar 或是 Bar 場景,就會發現文字大小跟著變大了。

../../_images/ui_gui_step_tutorial_design_EnergyBar_1.png

如果修改了字體資源,所有使用到該字體的節點都會被影響

如果我們想讓字體大小的修改只作用在這個節點,則必須要把字體資源複製出來。選擇 Number 節點並點擊屬性面板右上角的扳手與螺絲起子圖示,並在下拉選單中選擇 獨立化子資源 。Godot 會找出所有這個節點使用的資源,並建立獨立的拷貝。

../../_images/ui_gui_step_tutorial_design_EnergyBar_2.png

使用這個選項來為單一節點建立獨立的資源拷貝

小訣竅

當我們使用 Ctrl + D (或 macOS Cmd + D )來在場景樹中拷貝節點,所有的資源都會與原本的節點共用。在修改資源前必須要使用 獨立化子資源 才能不影響到原本的節點。

向下滾動到 Custom Font 段落並打開 Font 。將 Size 調為小一點的數字如 20 或是 22 。可能也需要調整 Bottom 的間隔值來將文字的基線對齊左側的 EP 標籤。

../../_images/ui_gui_step_tutorial_design_EnergyBar_3.png

EP 計數器元件,使用比 HP 還要小的字體

接著,選擇 TextureProgress 節點,然後把檔案 energy_bar_bg.png 拖曳到 Under 槽,同樣地,把 energy_bar_fill.png 拖曳到 Progress 貼圖槽中。

這裡可以調整一下節點的垂直大小,讓定界框的大小符合計量槽。也同時調整 Count 節點的大小來對齊計量槽。由於 TextureProgress 的最小大小是依紋理貼圖設定的,所以 Count 節點的大小沒辦法縮得比 TextureProgress 還要小。而 Bar Container 的大小也是這樣來的,也可以一起縮小他。

最後, Background 的最小尺寸還是有點大,所以我們先選擇 Background,然後在 Rect 段落中把 Min Size 改為 80 px 。現在 Background 的大小應該會自動縮放了,而且 TitleNumber 的位置應該也自動調整好了。

../../_images/ui_gui_step_tutorial_design_EnergyBar_4.png

Count 變得小一點了,看起來好多了

小訣竅

Count 節點的大小會影響 TextureProgress 的位置。稍後我們會垂直對齊計量槽,所以最好使用 Counter 的左外邊距來調整 EP 標籤的大小。這樣一來才會讓 EnergyBar 跟 LifeBar 的 Count 節點都保持 100px 寬,互相對齊。

準備炸彈與寶石計數器

來關心一下計數器。打開 場景 -> 新增繼承場景 並選擇基礎場景 Counter.tscn 。將根節點重新命名為 BombCounter ,並保存場景為 BombCounter.tscn 。這個場景就這樣了。

../../_images/ui_gui_step_tutorial_design_counters_1.png

炸彈的計數器就根原本的計數器場景一模一樣

再打開一次 場景 -> 新增繼承場景 然後一樣選 Counter.tscn 。將根節點重新命名為 EmeraldCounter 然後保存場景為 EmeraldCounter.tscn 。這個場景我們的主要目標是要把炸彈圖示換成寶石圖示。到檔案系統分頁中把 emeralds_icon.png 拖移到 Icon 節點的 Texture 槽中。 Icon 已經錨定在 Background 節點的右側了,所以當我們調整位置的時候會自動縮放並在 EmeraldCounter 容器中重新定位。將寶石圖示稍微往左下移動一點。可以使用鍵盤上的方向鍵來微調位置。存檔,現在我們已經完成所有 UI 元素了。

../../_images/ui_gui_step_tutorial_design_counters_2.png

寶石計數器看起來應該長這樣

將 UI 元件加到最終 GUI

該來把所有 UI 元素都加到主要的 GUI 場景了。打開 GUI.tscn 然後刪除 BarCounter 節點。在檔案系統 Dock 中找到 LifeBar.tscn 並拖曳到場景樹中的 Bar 容器。 EnergyBar 也一樣拖曳過來。接著這兩個場景應該會垂直對齊。

../../_images/ui_gui_step_tutorial_assemble_final_gui_1.png

LifeBar 與 EnergyBar 自動對齊

現在將 BombCounter.tscnEmeraldCounter.tscn 場景拖曳至 Counters 節點。這兩個場景的大小會自動縮放。

../../_images/ui_gui_step_tutorial_assemble_final_gui_2.png

節點會自動縮放並佔用水平方向上所有可用的空間

要讓 EmeraldCounterBombCounter 使用我們在 Counter.tscn 裡設定的大小,我們需要修改 Counters 容器上的 Size Flags 。先選擇 Counters 節點然後展開屬性面板中的 Size Flags 段落,取消選擇 Vertical 屬性中的 Fill 標籤,並勾選 Shrink Center ,這樣容器在 HBoxCounter 中就會置中。

../../_images/ui_gui_step_tutorial_assemble_final_gui_3.png

兩個計數器的大小現在沒問題了

小訣竅

更改 Counters 容器的 Min Size 屬性來控制計數器背景的高度。

EnergyBar 中的 EP 標籤還有個小問題:兩個計量槽應該要垂直對齊。點擊 EnergyBar 節點旁邊的圖示來打開場景。選擇 Count 節點然後往下滾動找到 Custom Constants 段落。新增 Margin Left ,值為 20 。在 Rect 段落中將節點的 Min Size 改回去與 LifeBar 相同的 100。 Count 節點的左邊現在應該有點邊距了。保存並回到 GUI 場景,EnergyBar 現在應該與 LifeBar 垂直對齊了。

../../_images/ui_gui_step_tutorial_assemble_final_gui_4.png

兩個計量槽好好地對齊了

備註

我們也可以在剛才就設定好 EnergyBar 。但這裡只是要告訴你隨時都可以回去任何場景並進行調整,並在整個專案中看看所做的更改!

將 GUI 放到遊戲打樣上

在教學的最後我們要將 GUI 放進遊戲的打樣場景中。

到檔案系統 Dock 中打開 LevelMockup.tscn

GUI.tscn 場景拖曳到節點樹中,放在 bg 場景底下, Characters 場景上面。GUI 會縮放並貼合整個檢視區。打開畫面配置選單並選擇 中上 來將節點錨定到遊戲視窗的上邊緣。接著縮放 GUI 來儘可能縮小縱軸的尺寸。現在你可以看到界面在遊戲裡長得樣子了。

恭喜你完整成了這篇長長的教學。專案的最終結果可以在這裡找到: ui_gui_design.zip

../../_images/ui_gui_design_final_result.png

最終結果

備註

關於回應式設計的最後一點提醒 。縮放 GUI 時會發現節點跟著移動,但貼圖與文字不會縮放。同時 GUI 也會依據裡面的貼圖而有最小尺寸。在遊戲中,界面不需要像網頁一樣彈性。製作遊戲的時候幾乎不會同時支援縱向與橫向兩種螢幕方向,只會支援一種。橫向畫面時最常見的長寬比介於 4:3 至 16:9 之間,每種長寬比都很接近。所以我們在更改視窗大小的時候只需要水平移動 GUI 元素就好了。