8. 咸鱼之王——游戏界面

8.1 放置游戏的UI设计原则

放置游戏的界面和RPG不同——玩家大部分时间不需要操作，所以UI要做到信息一目了然，操作简单。

原则	说明
核心信息置顶	金币、每秒收入、当前关卡永远可见
一键操作	升级、抽卡等常用操作一键完成
进度可视化	用进度条、数字显示当前进度
奖励反馈	获得金币时飘字、弹窗等正面反馈

8.2 主界面布局

放置游戏通常采用竖屏布局（适合手机），从上到下排列：

┌──────────────────────────────┐
│  金币: 12,350  💎 钻石: 50   │  ← 资源栏
│  每秒收入: 25.3 金/秒        │
│  在线加成: +25%  ████░░░     │
├──────────────────────────────┤
│                              │
│    ┌──────────────────┐     │
│    │    当前战斗画面     │     │  ← 战斗区域
│    │  第3章 第7关       │     │
│    │  [怪物动画]        │     │
│    │  HP: ████████░░    │     │
│    │                    │     │
│    │  [英雄们自动攻击]   │     │
│    └──────────────────┘     │
│                              │
│  伤害飘字: -45  -32  -58    │
├──────────────────────────────┤
│  ┌──────┬──────┬──────┐    │
│  │ 英雄  │ 抽卡  │ 关卡  │    │  ← 功能按钮
│  └──────┴──────┴──────┘    │
└──────────────────────────────┘

8.3 主界面控制器

C

using Godot;

/// <summary>
/// 主界面控制器——管理游戏主界面的显示和交互
/// </summary>
public partial class MainUI : Control
{
    // 顶部资源栏
    private Label _goldLabel;
    private Label _incomeLabel;
    private Label _stageLabel;
    private ProgressBar _onlineBonusBar;

    // 功能面板
    private Control _heroPanel;
    private Control _gachaPanel;
    private Control _stagePanel;
    private Control _equipPanel;

    // 当前显示的面板
    private Control _activePanel;

    public override void _Ready()
    {
        // 获取UI引用
        _goldLabel = GetNode<Label>("%GoldLabel");
        _incomeLabel = GetNode<Label>("%IncomeLabel");
        _stageLabel = GetNode<Label>("%StageLabel");
        _onlineBonusBar = GetNode<ProgressBar>("%OnlineBonusBar");

        _heroPanel = GetNode<Control>("%HeroPanel");
        _gachaPanel = GetNode<Control>("%GachaPanel");
        _stagePanel = GetNode<Control>("%StagePanel");
        _equipPanel = GetNode<Control>("%EquipPanel");

        // 隐藏所有面板
        _heroPanel.Visible = false;
        _gachaPanel.Visible = false;
        _stagePanel.Visible = false;
        _equipPanel.Visible = false;

        // 连接按钮信号
        GetNode<Button>("%HeroButton").Pressed += () => SwitchPanel("hero");
        GetNode<Button>("%GachaButton").Pressed += () => SwitchPanel("gacha");
        GetNode<Button>("%StageButton").Pressed += () => SwitchPanel("stage");
        GetNode<Button>("%EquipButton").Pressed += () => SwitchPanel("equip");
    }

    public override void _Process(double delta)
    {
        UpdateTopBar();
    }

    /// <summary>
    /// 更新顶部资源栏
    /// </summary>
    private void UpdateTopBar()
    {
        var gm = GameManager.Instance;
        var stageManager = GetNode<StageManager>("../StageManager");

        _goldLabel.Text = FormatNumber(gm.Gold);

        float income = IncomeCalculator.CalculateIncomePerSecond(
            gm.HighestStage, gm.HeroBonusMultiplier(),
            gm.GetOnlineTimeBonus(), 0f);
        _incomeLabel.Text = $"{income:F1} 金/秒";

        _stageLabel.Text = stageManager.GetProgressText();

        float bonus = gm.GetOnlineTimeBonus();
        _onlineBonusBar.Value = bonus / IdleConstants.MaxOnlineBonus * 100;
    }

    /// <summary>
    /// 切换功能面板
    /// </summary>
    private void SwitchPanel(string panelName)
    {
        // 先关闭当前面板
        if (_activePanel != null)
            _activePanel.Visible = false;

        // 打开新面板
        switch (panelName)
        {
            case "hero":
                _heroPanel.Visible = true;
                _activePanel = _heroPanel;
                break;
            case "gacha":
                _gachaPanel.Visible = true;
                _activePanel = _gachaPanel;
                break;
            case "stage":
                _stagePanel.Visible = true;
                _activePanel = _stagePanel;
                break;
            case "equip":
                _equipPanel.Visible = true;
                _activePanel = _equipPanel;
                break;
        }
    }

    /// <summary>
    /// 格式化大数字
    /// </summary>
    private string FormatNumber(int number)
    {
        if (number >= 1_000_000) return $"{number / 1_000_000f:F1}M";
        if (number >= 1_000) return $"{number / 1_000f:F1}K";
        return number.ToString();
    }
}

GDScript

extends Control

## 主界面控制器

@onready var _gold_label: Label = %GoldLabel
@onready var _income_label: Label = %IncomeLabel
@onready var _stage_label: Label = %StageLabel
@onready var _online_bonus_bar: ProgressBar = %OnlineBonusBar

@onready var _hero_panel: Control = %HeroPanel
@onready var _gacha_panel: Control = %GachaPanel
@onready var _stage_panel: Control = %StagePanel
@onready var _equip_panel: Control = %EquipPanel

var _active_panel: Control = null

func _ready() -> void:
    _hero_panel.visible = false
    _gacha_panel.visible = false
    _stage_panel.visible = false
    _equip_panel.visible = false

    %HeroButton.pressed.connect(func(): switch_panel("hero"))
    %GachaButton.pressed.connect(func(): switch_panel("gacha"))
    %StageButton.pressed.connect(func(): switch_panel("stage"))
    %EquipButton.pressed.connect(func(): switch_panel("equip"))

func _process(delta: float) -> void:
    _update_top_bar()

## 更新顶部资源栏
func _update_top_bar() -> void:
    var gm = GameManager
    var stage_manager = get_node("../StageManager")

    _gold_label.text = _format_number(gm.gold)

    var income: float = IncomeCalculator.calculate_income_per_second(
        gm.highest_stage, gm._hero_bonus_multiplier(),
        gm._get_online_time_bonus(), 0.0)
    _income_label.text = "%.1f 金/秒" % income

    _stage_label.text = stage_manager.get_progress_text()

    var bonus: float = gm._get_online_time_bonus()
    _online_bonus_bar.value = bonus / IdleConstants.MAX_ONLINE_BONUS * 100

## 切换功能面板
func switch_panel(panel_name: String) -> void:
    if _active_panel != null:
        _active_panel.visible = false

    match panel_name:
        "hero":
            _hero_panel.visible = true
            _active_panel = _hero_panel
        "gacha":
            _gacha_panel.visible = true
            _active_panel = _gacha_panel
        "stage":
            _stage_panel.visible = true
            _active_panel = _stagePanel
        "equip":
            _equip_panel.visible = true
            _active_panel = _equip_panel

func _format_number(num: int) -> String:
    if num >= 1_000_000:
        return "%.1fM" % (num / 1000000.0)
    if num >= 1_000:
        return "%.1fK" % (num / 1000.0)
    return str(num)

8.4 战斗过程UI

战斗区域的UI需要显示：当前关卡、敌人血条、伤害飘字、战斗进度。

┌──────────────────────────────────┐
│       第3章 第7关                  │
│                                  │
│      ┌──────────────┐           │
│      │   🎃 怪物     │           │
│      │              │           │
│      │ HP: ████░░░░  │           │
│      │ 240 / 400    │           │
│      └──────────────┘           │
│                                  │
│   -45    -32    -58    技能!-120│  ← 伤害飘字
│                                  │
│  ┌───┐ ┌───┐ ┌───┐ ┌───┐     │
│  │英雄│ │英雄│ │英雄│ │英雄│     │  ← 编队显示
│  │ ✓ │ │ ✓ │ │ ✓ │ │ ✓ │     │
│  └───┘ └───┘ └───┘ └───┘     │
│                                  │
│  预计击杀: 4.7秒  DPS: 85.3     │
└──────────────────────────────────┘

8.5 英雄列表面板

┌──────────────────────────────────┐
│          我的英雄                  │
│                                  │
│  ┌──────┐ ┌──────┐ ┌──────┐   │
│  │龙骑士│ │冰法师│ │猎人  │   │
│  │★★★★│ │★★★ │ │★★  │   │
│  │LV.15│ │LV.10│ │LV.8 │   │
│  │ATK120│ │ATK70│ │ATK40│   │
│  │[升级]│ │[升级]│ │[升级]│   │
│  └──────┘ └──────┘ └──────┘   │
│                                  │
│  总DPS: 152.8                    │
│  [编队管理]                      │
└──────────────────────────────────┘

8.6 奖励弹窗

获得重要奖励时弹出醒目的弹窗：

┌──────────────────────────────────┐
│                                  │
│         🎉 恭喜通关！             │
│                                  │
│       第3章 第10关 [Boss]        │
│                                  │
│      获得金币: +400              │
│      获得装备: 精良长剑          │
│                                  │
│         [ 继续推图 ]             │
│                                  │
└──────────────────────────────────┘

8.7 本章小结

知识点	说明
竖屏布局	资源栏+战斗区域+功能按钮
核心信息置顶	金币、每秒收入、关卡进度始终可见
面板切换	英雄/抽卡/关卡/装备四个功能面板
战斗UI	敌人血条、伤害飘字、编队显示
奖励弹窗	通关时弹出奖励信息

下一章我们将添加音效与视觉特效。