跳至主要內容

8. 游戏界面

EVOCOSMOS2026/4/14大约 9 分钟

8. 保卫萝卜——游戏界面

游戏界面的"地图"

游戏界面（UI）就像是商店的"招牌和货架"——玩家通过界面来了解游戏状态、做出操作决策。一个塔防游戏的界面通常包含以下部分：

UI 组件比喻位置功能
HUD（抬头显示）仪表盘顶部金币、生命值、波次、分数
塔选择面板商品货架底部选择要建造的塔类型
升级弹窗操作菜单塔旁边升级/出售按钮
波次预告预告片屏幕中央"第N波即将来临"
关卡结算成绩单全屏胜利/失败、分数统计

HUD（抬头显示）

HUD 是固定在屏幕顶部的信息栏，始终可见。它显示玩家最需要实时关注的数据。

HUD 场景结构

HUD (CanvasLayer)
└── TopBar (HBoxContainer)
    ├── GoldLabel (HBoxContainer)
    │   ├── GoldIcon (TextureRect)  ← 金币图标
    │   └── GoldValue (Label)       ← 金币数量
    ├── LivesLabel (HBoxContainer)
    │   ├── LivesIcon (TextureRect)  ← 萝卜图标
    │   └── LivesValue (Label)       ← 生命值
    ├── WaveLabel (HBoxContainer)
    │   ├── WaveIcon (TextureRect)   ← 波次图标
    │   └── WaveValue (Label)        ← 当前波次
    └── ScoreLabel (HBoxContainer)
        ├── ScoreIcon (TextureRect)  ← 分数图标
        └── ScoreValue (Label)       ← 分数

HUD 脚本

C
using Godot;

/// <summary>
/// HUD —— 游戏抬头显示
/// 固定在屏幕顶部，显示金币、生命值、波次、分数
/// 就像汽车的仪表盘，让玩家一眼看到关键信息
/// </summary>
public partial class HUD : CanvasLayer
{
    // ===== 节点引用 =====

    [ExportGroup("UI References")]
    /// <summary>金币数值标签</summary>
    [Export] public Label GoldValue { get; set; }

    /// <summary>生命值标签</summary>
    [Export] public Label LivesValue { get; set; }

    /// <summary>波次标签</summary>
    [Export] public Label WaveValue { get; set; }

    /// <summary>分数标签</summary>
    [Export] public Label ScoreValue { get; set; }

    /// <summary>金币图标（用于闪烁效果）</summary>
    [Export] public TextureRect GoldIcon { get; set; }

    /// <summary>生命值图标（用于受伤动画）</summary>
    [Export] public TextureRect LivesIcon { get; set; }

    public override void _Ready()
    {
        // 连接 GameManager 的信号
        var gm = GameManager.Instance;

        gm.GoldChanged += OnGoldChanged;
        gm.LivesChanged += OnLivesChanged;
        gm.WaveChanged += OnWaveChanged;
        gm.StateChanged += OnStateChanged;

        // 初始显示
        GoldValue.Text = gm.Gold.ToString();
        LivesValue.Text = gm.Lives.ToString();
        WaveValue.Text = "0";
        ScoreValue.Text = gm.Score.ToString();
    }

    /// <summary>
    /// 金币变化回调
    /// </summary>
    private void OnGoldChanged(int newGold)
    {
        GoldValue.Text = newGold.ToString();
        GoldPulseAnimation();
    }

    /// <summary>
    /// 生命值变化回调
    /// </summary>
    private void OnLivesChanged(int newLives)
    {
        LivesValue.Text = newLives.ToString();
        LivesShakeAnimation();

        // 生命值低时变红
        if (newLives <= 3)
        {
            LivesValue.AddThemeColorOverride(
                "font_color", Colors.Red);
        }
    }

    /// <summary>
    /// 波次变化回调
    /// </summary>
    private void OnWaveChanged(int newWave)
    {
        WaveValue.Text = newWave.ToString();
    }

    /// <summary>
    /// 游戏状态变化回调
    /// </summary>
    private void OnStateChanged(int newState)
    {
        var state = (GameState)newState;

        switch (state)
        {
            case GameState.Victory:
                ShowVictoryEffect();
                break;
            case GameState.Defeat:
                ShowDefeatEffect();
                break;
        }
    }

    /// <summary>
    /// 金币获取脉冲动画
    /// </summary>
    private void GoldPulseAnimation()
    {
        if (GoldIcon == null) return;

        var tween = GoldIcon.CreateTween();
        tween.TweenProperty(GoldIcon, "scale",
            new Vector2(1.3f, 1.3f), 0.1f);
        tween.TweenProperty(GoldIcon, "scale",
            Vector2.One, 0.1f);
    }

    /// <summary>
    /// 生命值减少抖动动画
    /// </summary>
    private void LivesShakeAnimation()
    {
        if (LivesIcon == null) return;

        var tween = LivesIcon.CreateTween();
        tween.TweenProperty(LivesIcon, "position",
            new Vector2(-3, 0), 0.05f);
        tween.TweenProperty(LivesIcon, "position",
            new Vector2(3, 0), 0.05f);
        tween.TweenProperty(LivesIcon, "position",
            new Vector2(-2, 0), 0.05f);
        tween.TweenProperty(LivesIcon, "position",
            new Vector2(2, 0), 0.05f);
        tween.TweenProperty(LivesIcon, "position",
            Vector2.Zero, 0.05f);
    }

    private void ShowVictoryEffect()
    {
        // 胜利效果（后续实现）
    }

    private void ShowDefeatEffect()
    {
        // 失败效果（后续实现）
    }
}

塔选择面板

塔选择面板固定在屏幕底部，展示所有可购买的塔类型。玩家点击某个塔图标后进入建造模式。

面板场景结构

TowerPanel (CanvasLayer)
└── PanelContainer
    └── HBoxContainer
        ├── TowerButton (Button) ← 瓶子塔
        │   ├── Icon (TextureRect)
        │   ├── Name (Label)
        │   └── Cost (Label)
        ├── TowerButton (Button) ← 风扇塔
        ├── TowerButton (Button) ← 火箭塔
        └── TowerButton (Button) ← 雷达塔

塔选择面板脚本

C
using Godot;

/// <summary>
/// 塔选择面板 —— 底部的塔"商品货架"
/// 玩家从这里选择要建造的塔类型
/// </summary>
public partial class TowerPanel : CanvasLayer
{
    /// <summary>塔按钮容器</summary>
    [Export] public HBoxContainer ButtonContainer { get; set; }

    /// <summary>所有可用的塔数据</summary>
    [Export] public TowerData[] AvailableTowers { get; set; }

    /// <summary>塔按钮预制体</summary>
    [Export] public PackedScene TowerButtonScene { get; set; }

    /// <summary>建造控制器引用</summary>
    private BuildController _buildController;

    public override void _Ready()
    {
        _buildController = GetTree().Root
            .FindChild("BuildController", true, false)
            as BuildController;

        // 连接信号
        if (_buildController != null)
        {
            _buildController.BuildModeChanged += OnBuildModeChanged;
        }

        // 连接金币变化信号（更新按钮可用状态）
        GameManager.Instance.GoldChanged += OnGoldChanged;

        // 创建塔按钮
        CreateTowerButtons();
    }

    /// <summary>
    /// 动态创建塔按钮
    /// </summary>
    private void CreateTowerButtons()
    {
        foreach (var data in AvailableTowers)
        {
            var button = CreateTowerButton(data);
            ButtonContainer.AddChild(button);
        }
    }

    /// <summary>
    /// 创建单个塔按钮
    /// </summary>
    private Button CreateTowerButton(TowerData data)
    {
        var button = new Button
        {
            CustomMinimumSize = new Vector2(80, 100),
            TooltipText = $"{data.TowerName}\n{data.Description}"
        };

        // 设置按钮文字
        button.Text = $"{data.TowerName}\n{data.Cost}G";

        // 绑定点击事件
        button.Pressed += () => OnTowerButtonPressed(data);

        // 添加按钮到组中（方便后续更新）
        button.AddToGroup("tower_buttons");

        // 存储关联的塔数据（通过 Metadata）
        button.SetMeta("tower_data", data);

        return button;
    }

    /// <summary>
    /// 点击塔按钮
    /// </summary>
    private void OnTowerButtonPressed(TowerData data)
    {
        if (_buildController == null) return;

        if (_buildController.IsBuildingMode)
        {
            // 已经在建造模式，切换塔类型
            _buildController.ExitBuildMode();
        }

        _buildController.EnterBuildMode(data);
    }

    /// <summary>
    /// 建造模式变化回调
    /// </summary>
    private void OnBuildModeChanged(
        bool isBuilding, TowerData towerData)
    {
        // 建造模式下禁用面板
        // （玩家可以先取消建造再选别的塔）
        // 也可以不禁用，让玩家自由切换
    }

    /// <summary>
    /// 金币变化时更新按钮状态
    /// </summary>
    private void OnGoldChanged(int newGold)
    {
        var buttons = GetTree()
            .GetNodesInGroup("tower_buttons");

        foreach (var node in buttons)
        {
            if (node is not Button btn) continue;

            var data = btn.GetMeta("tower_data") as TowerData;
            if (data == null) continue;

            // 金币不够时按钮变灰
            btn.Disabled = newGold < data.Cost;
        }
    }
}

升级弹窗

当玩家点击已放置的塔时，在塔的旁边弹出一个小面板，显示塔的信息和升级/出售按钮。

升级弹窗脚本

C
using Godot;

/// <summary>
/// 塔信息弹窗 —— 显示在塔旁边的操作面板
/// 包含塔的属性信息和升级/出售按钮
/// </summary>
public partial class TowerInfoPanel : CanvasLayer
{
    [Export] public PanelContainer Panel { get; set; }
    [Export] public Label TowerNameLabel { get; set; }
    [Export] public Label LevelLabel { get; set; }
    [Export] public Label DamageLabel { get; set; }
    [Export] public Label RangeLabel { get; set; }
    [Export] public Button UpgradeButton { get; set; }
    [Export] public Button SellButton { get; set; }
    [Export] public Label UpgradeCostLabel { get; set; }
    [Export] public Label SellRefundLabel { get; set; }

    private TowerInteractionController _interactionController;

    public override void _Ready()
    {
        _interactionController = GetTree().Root
            .FindChild("TowerInteractionController", true, false)
            as TowerInteractionController;

        // 初始隐藏
        Panel.Visible = false;

        // 连接信号
        _interactionController.TowerSelected += OnTowerSelected;
        _interactionController.TowerDeselected += OnTowerDeselected;

        UpgradeButton.Pressed += () =>
            _interactionController.UpgradeSelectedTower();
        SellButton.Pressed += () =>
            _interactionController.SellSelectedTower();

        // 金币变化时更新按钮状态
        GameManager.Instance.GoldChanged += OnGoldChanged;
    }

    private void OnTowerSelected(Tower tower)
    {
        // 更新信息
        TowerNameLabel.Text = tower.Name;
        LevelLabel.Text = $"等级: {tower.CurrentLevel}/{tower.MaxLevel}";
        DamageLabel.Text = $"攻击: {tower.CurrentDamage}";
        RangeLabel.Text = $"射程: {tower.CurrentRange:F0}";

        // 升级信息
        if (tower.CurrentLevel < tower.MaxLevel)
        {
            int cost = _interactionController.GetUpgradeCost(tower);
            UpgradeButton.Visible = true;
            UpgradeButton.Disabled = GameManager.Instance.Gold < cost;
            UpgradeCostLabel.Text = $"升级 ({cost}G)";
        }
        else
        {
            UpgradeButton.Visible = false;
        }

        // 出售信息
        int refund = _interactionController.GetSellRefund(tower);
        SellRefundLabel.Text = $"出售 (+{refund}G)";

        // 定位到塔的位置
        PositionPanel(tower.GlobalPosition);

        Panel.Visible = true;
    }

    private void OnTowerDeselected()
    {
        Panel.Visible = false;
    }

    /// <summary>
    /// 将面板定位到塔的旁边
    /// </summary>
    private void PositionPanel(Vector2 towerWorldPos)
    {
        // 将世界坐标转换为屏幕坐标
        var camera = GetViewport().GetCamera2D();
        if (camera == null) return;

        Vector2 screenPos = camera
            .GetScreenCenterPosition() + towerWorldPos;

        // 放在塔的右上方
        Panel.Position = new Vector2(
            screenPos.X + 40,
            screenPos.Y - 60);
    }

    private void OnGoldChanged(int newGold)
    {
        if (_interactionController.SelectedTower == null) return;

        var tower = _interactionController.SelectedTower;
        if (tower.CurrentLevel < tower.MaxLevel)
        {
            int cost = _interactionController.GetUpgradeCost(tower);
            UpgradeButton.Disabled = newGold < cost;
        }
    }
}

关卡结算面板

游戏胜利或失败时弹出结算面板，显示本局成绩。

C
using Godot;

/// <summary>
/// 关卡结算面板 —— 游戏结束时的"成绩单"
/// </summary>
public partial class GameResultPanel : CanvasLayer
{
    [Export] public PanelContainer Panel { get; set; }
    [Export] public Label TitleLabel { get; set; }
    [Export] public Label ScoreLabel { get; set; }
    [Export] public Label WaveLabel { get; set; }
    [Export] public Label TowerLabel { get; set; }
    [Export] public Button RestartButton { get; set; }
    [Export] public Button NextLevelButton { get; set; }

    public override void _Ready()
    {
        Panel.Visible = false;

        GameManager.Instance.GameOver += OnGameOver;
        RestartButton.Pressed += OnRestartPressed;
        NextLevelButton.Pressed += OnNextLevelPressed;
    }

    private void OnGameOver(bool isVictory)
    {
        TitleLabel.Text = isVictory ? "胜利！" : "失败...";
        TitleLabel.AddThemeColorOverride(
            "font_color",
            isVictory ? Colors.Gold : Colors.Red);

        ScoreLabel.Text = $"分数: {GameManager.Instance.Score}";
        WaveLabel.Text = $"到达波次: {GameManager.Instance.CurrentWave}";

        // 统计放置的塔数量
        var towerCount = GetTree()
            .GetNodesInGroup("towers").Count;
        TowerLabel.Text = $"放置塔数: {towerCount}";

        NextLevelButton.Visible = isVictory;
        Panel.Visible = true;
    }

    private void OnRestartPressed()
    {
        GetTree().ReloadCurrentScene();
    }

    private void OnNextLevelPressed()
    {
        // 加载下一关
        GD.Print("加载下一关...");
    }
}

本节小结

UI 组件功能
HUD顶部信息栏，显示金币/生命/波次/分数
TowerPanel底部塔选择面板，选择要建造的塔
TowerInfoPanel塔旁边弹出，显示属性和升级/出售按钮
GameResultPanel结算面板，显示成绩和重玩/下一关按钮

所有 UI 组件都通过信号与 GameManager 和其他管理器通信，实现了数据和显示的分离。下一节我们将添加音效和特效，让游戏更有"感觉"。

最近更新:
贡献者: zefeng.peng,bobokaka
EVOCOSMOS
Copyright © 2026 EVOCOSMOS