HUD 面板

HUD 和普通 screen 页面使用同一套模板与脚本能力，差异主要在挂载方式、布局位置和更新节奏。

适合放进 HUD 的内容

• HP / MP / EXP
• 当前战斗状态
• 资源与冷却概览
• 轻量提示，不需要复杂输入

一个稳定的 HUD 骨架

<template>
  <Panel id="hudRoot" class="w-[188px] p-[8px] flex flex-col gap-2">
    <Label :text="'HP ' + (internalSyncStore.get('sync:hp') ?? 0) + '/' + (internalSyncStore.get('sync:maxHp') ?? 0)" />
    <ProgressBar :value="internalSyncStore.get('sync:hpPercent') ?? 0" />

    <Label :text="'MP ' + (internalSyncStore.get('sync:mp') ?? 0) + '/' + (internalSyncStore.get('sync:maxMp') ?? 0)" />
    <ProgressBar :value="internalSyncStore.get('sync:mpPercent') ?? 0" />
  </Panel>
</template>

<properties>
  <mount mode="hud">
    <hud anchor="top-left" x="8" y="8" />
  </mount>
</properties>

服务端同步

fun syncHud(player: Player, hp: Int, maxHp: Int, mp: Int, maxMp: Int) {
    BUIServerAPI.state().setSyncState(player, "hud/main", mapOf(
        "hp" to hp,
        "maxHp" to maxHp,
        "hpPercent" to hp.toDouble() / maxHp,
        "mp" to mp,
        "maxMp" to maxMp,
        "mpPercent" to mp.toDouble() / maxMp
    ))
}

使用边界

• HUD 更适合高频展示，不适合塞大表单或长链路交互。
• 百分比字段更适合在服务端预先算好，模板只做绑定。
• 如果 HUD 子树里用了 opacity、overflow-clip、post-process、backdrop、blend，它们已经进入 retained 组合语义。