制作快捷栏 HUD ​

这篇教程会制作一条替换原版快捷栏的 HUD。它会实时显示玩家 9 个快捷栏槽，用浅色矩形标出当前选择，并在上方显示主手物品 ID 和数量。

开始前请先完成服务端安装与客户端安装。

先取得完整示例 ​

下载快捷栏HUD.yml，放到服务端：

plugins/ChaUI/pages/快捷栏HUD.yml

文件名和页面根级 id: 快捷栏HUD 必须一致。示例不依赖任何外部图片，放入后即可显示。

第一步：设置 HUD 页面 ​

示例使用：

display:
  mode: hud
  hud:
    always: true
    replaces:
      - hotbar

always: true 表示玩家进入服务器后自动显示。hotbar 表示隐藏原版快捷栏，由当前页面接管这一区域。如果只想叠加新内容而保留原版快捷栏，就删除 replaces 中的 hotbar。

第二步：映射 9 个快捷栏槽 ​

第一个槽位的关键配置如下：

- id: hotbar_0
  type: item_slot
  visible: true
  enabled: true
  pointerEvents: auto
  z: 2
  layout:
    x: 'window.width * 0.5 - 90 + 0 * 20'
    y: 'window.height - 23'
    width: '18'
    height: '18'
  itemSlot:
    bind: backpack_0
    mode: mapped
    allowPut: true
    allowTake: true

后面 8 个槽依次使用 backpack_1 到 backpack_8，并把 X 公式中的数字改为 1 到 8。全部位置以 window.width * 0.5 为中心，因此改变窗口宽度后仍会居中。

第三步：让选中框跟随当前槽位 ​

示例只用一个矩形，通过实时常量计算 X：

layout:
  x: 'window.width * 0.5 - 90 + vals.player.inventory.heldItemSlot * 20'
  y: 'window.height - 23'
  width: '18'
  height: '18'
rect:
  color: '#FFFFFF'

heldItemSlot 的范围是 0～8。玩家滚轮切换主手时，矩形会自动移动，不需要 timer 或点击脚本。

第四步：显示主手信息 ​

文字内容写成：

主手：{vals.player.inventory.mainhand.id} × {vals.player.inventory.mainhand.count}

花括号中的值会在每次渲染时重新读取。空手时 ID 显示为 minecraft:air，数量为 0。

第五步：重载并查看 ​

/chaui reload

因为示例配置了 always: true，重载后 HUD 会自动打开。也可以手动执行：

/chaui open <玩家> 快捷栏HUD

进入游戏后检查：

1. 原版快捷栏已经隐藏。
2. 9 个槽中的物品与真实快捷栏一致。
3. 滚轮切换槽位时高亮立即移动。
4. 拿起、消耗或更换主手物品时，上方文字立即变化。
5. 调整窗口宽度后快捷栏仍保持居中。

全部 bind 的含义见背包映射表。