Godot学习04 - UI界面

电子云与长程纠缠2026-03-25 12:57

在游戏开发中，UI界面往往是游戏世界的皮肤。本篇作为Godot学习的第四站，我们将正式踏入UI设计的大门，学习如何构建清晰、美观且交互友好的操作界面。

1.新建场景，场景根节点类型为2D Scene

2.添加Label节点

3.修改Label节点名为Title，设置Size

4.与Unity/UE不同，Godot修改UI样式可配置至统一的资源文件中，这样便于统一项目样式与修改。新建Label Settings便于后序修改字体大小。

5.将Size改为200px，填入Text内容。

6.添加CenterContainer节点与VBoxContainer节点，CenterContainer可以让内容居中显示，VBoxContainer可以让内容垂直排布，类似Unity的VerticalLayoutGroup或者UE的Vertical Box。

7.在VBoxContainer内添加Button组件，增加一些按钮

8.讲下另一种配置UI元素样式的方法，找到ThemeOverrides可以进行修改，例如修改Font Sizes。

9.接下来编写面板脚本，可以直接挂载于根节点上。

csharp 复制代码

using Godot;
using System;

public partial class ButtonPanel : Node2D
{
	[Export]
	private Button playButton;
	
	[Export]
	private Button creditsButton;
	
	[Export]
	private Button exitButton;
	
	
	public override void _Ready()
	{
		playButton.Pressed += OnPlayButtonPressed;
		creditsButton.Pressed += OnCreditsButtonPressed;
		exitButton.Pressed += OnExitButtonPressed;
	}
	
	private void OnPlayButtonPressed()
	{
		GD.Print("Play Button Pressed!");
	}
	
	private void OnCreditsButtonPressed()
	{
		GD.Print("Credits Button Pressed!");
	}
	
	private void OnExitButtonPressed()
	{
		GD.Print("Exit Button pressed!");
	}
	
	// 当脚本被移除或节点被销毁时，断开信号连接
	public override void _ExitTree()
	{
		playButton.Pressed -= OnPlayButtonPressed;
		creditsButton.Pressed -= OnCreditsButtonPressed;
		exitButton.Pressed -= OnExitButtonPressed;
	}
}

10.挂载好后将面板节点拖入脚本控件中

11.运行后测试，可打印Log