Godot 遊戲引擎/UI 皮膚指南

Godot 遊戲引擎指南

<-- 多人遊戲 UI 皮膚 匯出-->

跳到底部

UI 皮膚允許您將遊戲的 UI（使用者介面）變成比預設更漂亮的東西。按鈕和麵板的預設樣式是一個難看的灰色陰影。但是您可以將其更改為複雜紋理作為背景。您是否會走得這麼遠取決於遊戲、您的時間和您的藝術技能。

使用主題進行基本皮膚

為此，我們首先建立一個主題。您需要使用檔案系統建立一個新的資源。搜尋 主題。

儲存後，將開啟一個塢站，允許您預覽主題。看起來很單調，對吧？

讓我們先讓按鈕看起來不錯。點選編輯主題，然後選擇新增類項。不要與新增類項混淆。

在彈出視窗的“型別”下，鍵入按鈕。然後按新增全部。

在檢查器中，您將看到一個名為“按鈕”的屬性類別。展開它。展開子類別“顏色”和“樣式”。將“正常”的樣式設定為一個新的 StyleBoxFlat。您可以更改的一些更常見的事情是

背景顏色
圓角（值越高，曲線越大）
邊框寬度和邊框顏色
陰影
內容邊距（邊框和內容之間的邊距）
擴充套件邊距（在按鈕的邊界框之外擴充套件樣式的邊距，而不會增加其大小 - 您只能透過單擊邊界框本身內部的區域與按鈕互動）

隨意更改樣式！請記住選擇一個適合您遊戲的單一造型主題，例如復古或科幻。

您可以更改的不僅僅是按鈕。但只對需要的 UI 元素進行皮膚，而不是每個 Control 派生節點。

完成後，轉到專案 -> 專案設定 -> GUI -> 主題，並將自定義值設定為新建立主題的路徑。儲存，然後播放您的主選單場景。

使用主題進行高階皮膚

不要使用 StyleBoxeFlat，而要使用 StyleBoxeTexture。這允許使用影像而不是樣式框。您還可以設定某些 Control 節點元素的圖示，例如數字編輯中的“增加”和“減少”按鈕以及文字編輯中的“清除”按鈕。

自定義 UI 事件

一些遊戲在單擊按鈕時會顯示炫酷的效果，例如淡出選單。這裡有一些建議

單擊更改場景的按鈕時，請考慮在更改場景之前將螢幕淡出幾分之一秒，然後將新場景淡入。整個過程應該在十分之一秒或更短的時間內完成。它應該微妙而快速，否則您可能會讓玩家感到厭煩，因為 UI “載入”，理論上這可能在一瞬間完成。這是一個程式碼示例

extends Control
# main_menu.gd

func _on_play_button_up():
  # screen_blocker should be a hidden Control node placed on top all the other UI elements
  $screen_blocker.show() # This stops you clicking any more buttons and causing weird stuff afterwards
  for _i in range(20):
    modulate.a -= .2
    yield(get_tree().create_timer(.002), "timeout")
  get_tree().change_scene("Target scene here")