UI层设计
本文最后更新于13 天前,其中的信息可能已经过时,如有错误请发送邮件到big_fw@foxmail.com

在UI界面创造一个UI层的总指挥BattleUI来管理所有UI组件而不是让血条、按钮孤零零地单独作为一个组件。

Battle UI全权负责所有界面显示,battle_scene以及battle manager则实现战斗的逻辑。battle scene将变得轻量化,只负责将battle manager的引用传递给battle ui

当然,很高兴为你解释这个概念!“引用”是编程中一个非常核心且重要的思想,理解它对于掌握面向对象编程至关重要。

让我们用一个生活中的比喻来理解它。

“引用”就像一个“快捷方式”或“联系人”

想象一下,BattleManager 这个脚本节点是你的一个朋友,我们叫他“小明”。小明本人(对象)是一个活生生的人,他有自己的思想(方法/函数,比如 start_battle)和记忆(属性/变量,比如 current_turn_character)。

现在,BattleScene(战斗UI)需要经常和“小明”沟通。它有两种方式:

  1. 复制(不使用引用): BattleScene 把小明完完整整地克隆一遍,包括他所有的思想和记忆。现在有了一个“克隆小明”。但问题是,当“真正的小明”那边发生了什么事(比如轮到下一个角色行动了),“克隆小明”是完全不知道的。反之亦然。他们是两个独立的个体。这在我们的游戏里显然是行不通的。
  2. 引用: BattleScene 不去克隆小明,而是在自己的手机里存下了小明的电话号码。这个“电话号码”就是引用。它不是小明本人,但它是一个能让你找到并联系到小明本人的方式。

在你的 battle_scene.gd 脚本中,这一行代码:

@onready var battle_manager: BattleManager = %BattleManager

它的意思就是:
“当场景准备好后,请帮我找到场景中那个叫做 BattleManager 的节点,然后把它的‘联系方式’(也就是引用)存到我的 battle_manager 这个变量里。”

“把引用传递给UI”是什么意思?

在你这个具体的场景里,更准确的说法是 “UI获取了BattleManager的引用”

BattleScene 作为UI的“总管”,它需要这个引用来做三件重要的事情:

  1. 监听事件(接收通知):
    battle_manager.turn_changed.connect(_on_turn_changed)
    这就像 BattleScene 对小明说:“嘿,以后你的回合一有变化,就用这个联系方式打个电话通知我。” 当 BattleManager 的回合改变时,它会通过这个“连接”通知 BattleSceneBattleScene 就会执行 _on_turn_changed 函数来更新界面。
  2. 发出指令(命令逻辑层):
    battle_manager.player_select_action(CharacterCombatComponent.ActionType.ATTACK, target)
    当玩家在UI上点击了“攻击”按钮,BattleScene 就通过这个“联系方式”直接对 BattleManager 说:“执行攻击指令,目标是xxx”。它直接调用了 BattleManager 对象自身的方法。
  3. 查询状态(获取信息):
    show_action_ui(battle_manager.is_player_turn)
    BattleScene 需要决定是否显示行动按钮。它就通过“联系方式”问 BattleManager:“现在是玩家的回合吗?” 然后根据 BattleManager 的回答 (truefalse) 来更新UI。

总结

所以,“把 BattleManager 的引用传递给 BattleUI”意味着:

让UI层(BattleScene)持有一个能够直接与逻辑层(BattleManager)进行通信的“快捷方式”。

这个“快捷方式”就是引用。通过它,UI可以调用逻辑层的方法、获取其数据、监听其信号,从而实现了UI表现和游戏逻辑的分离与协作。这正是上次我们讨论的模块化重构的核心优势所在。


UI设计问题

在信息量较为丰富的回合制战斗中,UI设计分为三层

1.核心信息(比如状态、血条、蓝条),这部分信息需要玩家时刻关注,通常显示在角色头顶,使得一眼就能够看到

2.战术决策,在自己的回合进行行动时需要主动查看的信息,比如行动菜单,回合指示器

3.深度信息 玩家需要有针对性地布置战术以及思考时,才会去主动查看的详细信息,通常隐藏,需要主动点击才能查看,比如角色详细面板等

文末附加内容
暂无评论

发送评论 编辑评论


				
|´・ω・)ノ
ヾ(≧∇≦*)ゝ
(☆ω☆)
(╯‵□′)╯︵┴─┴
 ̄﹃ ̄
(/ω\)
∠( ᐛ 」∠)_
(๑•̀ㅁ•́ฅ)
→_→
୧(๑•̀⌄•́๑)૭
٩(ˊᗜˋ*)و
(ノ°ο°)ノ
(´இ皿இ`)
⌇●﹏●⌇
(ฅ´ω`ฅ)
(╯°A°)╯︵○○○
φ( ̄∇ ̄o)
ヾ(´・ ・`。)ノ"
( ง ᵒ̌皿ᵒ̌)ง⁼³₌₃
(ó﹏ò。)
Σ(っ °Д °;)っ
( ,,´・ω・)ノ"(´っω・`。)
╮(╯▽╰)╭
o(*////▽////*)q
>﹏<
( ๑´•ω•) "(ㆆᴗㆆ)
😂
😀
😅
😊
🙂
🙃
😌
😍
😘
😜
😝
😏
😒
🙄
😳
😡
😔
😫
😱
😭
💩
👻
🙌
🖕
👍
👫
👬
👭
🌚
🌝
🙈
💊
😶
🙏
🍦
🍉
😣
Source: github.com/k4yt3x/flowerhd
颜文字
Emoji
小恐龙
花!
上一篇
下一篇