MCBE 聊天栏 Tab 补全按钮——JSON UI 入门教程
本帖最后由 yu26y 于 2026-7-28 18:02 编辑# MC BE 聊天栏 Tab 补全按钮 —— JSON UI 入门教学
> 从零开始，手把手教你用资源包为基岩版聊天界面添加一个实用的 Tab 补全按钮
---
## 前言
众所周知，Minecraft BE 的 UI 分为 **JSON UI** 和 **Ore UI**，而 JSON UI 通过 JSON 驱动，可以通过资源包修改。
这次我们通过一个资源包制作过程浅教一下最最基础的 JSON UI 部分，你仅需要拥有 JSON 文件的格式了解和最基础的编程知识。技术不好，有误请指出。
---
## 需求分析
首先发现 Minecraft PE 没有实体键盘，好像没法儿像电脑那样按到 **Tab 键**实现命令补全，于是就可以考虑在聊天界面添加一个 **Tab 按钮**实现命令补全。
---
## 第一步：定位官方 UI 文件
首先我们先观察观察聊天界面。
发现适合加在聊天设置按钮右边，于是我们需要找到官方的聊天界面的 JSON UI 文件，这里可以去 Github 上的 Mojang 官方仓库下载官方附加包，链接：<https://github.com/Mojang/bedrock-samples/releases>
来到下载的官方资源包，进入 `ui/` 目录，发现 `chat_screen.json` 明显就是我们要找的修改目标。
我们打开这个文件，通过搜索关键词找到关键部分，我这里搜索了 **send_button**，通过看下上下文（红框部分），没错，这个 **chat_bottom_panel** 八成就是我们想要的修改部分。
---
## 第二步：理解 JSON UI 基础语法
关于 JSON UI，你只需要有最基础的了解：
- **命名空间（namespace）**：通常写在 UI 文件开头，格式为 `"namespace": "具体名字"`，全局唯一，不需要和文件名相同。
- **@ 符号**：一个类似继承的东西，但准确来说是元素复用或元素引用，说白了就是直接抄过来。写法是 `"这个元素的名字@另一个元素的命名空间.另一个元素的名字"`。例如 `"one_button": { ... }` 是一个按钮元素，那么 `"one_button@namespace.other_button": {}` 就相当于完全把 other_button 元素拿过来了，因为它并没有覆盖任何属性。
- **$ 符号**：就是变量而已，写在元素定义内部或全局变量文件（`_global_variables.json`，创建于资源包的 ui/ 目录下）。写法是 `{ ..., "$变量名": 值, ... }`。
---
## 第三步：研究官方按钮结构
现在回看官方的内容，我们并不直接复制官方的文件内容再在此基础上进行修改，那样的话未来此文件有改动还得再手动改一遍。这点和生物等 JSON 文件定义不同，它并不是完全覆盖，而是进行**合并操作**（controls[] 不行，下面会讲使用 **modifications**）。
所以我们的 Tab 按钮样式和旁边的聊天设置按钮一样就行了，于是找到它。
发现这个按钮继承了本文件的 **small_button** 按钮，再去通过搜索找到具体定义，发现它又复用了 **common_buttons.light_content_button**，那哪个文件的命名空间叫 common_buttons 呢？这里我已经找到了，就是这个 **ui_template_buttons.json**。
但我们这里不需要再进去找下去了，我们直接看下边复用它的 **keyboard_button** 即可：
```json
"keyboard_button@chat.small_button": {
"$button_content": "chat.keyboard_image_panel",
"$pressed_button_name": "button.keyboard_toggle",
"$focus_id": "keyboard_button_focus_id"
}
```
发现了前面的这三个关键变量：
- **`$button_content`** 说明这个按钮的内容指向了图片面板，而我们这里不需要，指向一个文本（label）即可。
- 按钮按下后触发的逻辑通过 `{ "to_button_id": "...", "mapping_type": "pressed" }` 实现，而 **`to_button_id`** 负责告诉游戏执行什么逻辑，很明显，**`$pressed_button_name`** 就该填写这个。
- **`$focus_id`** 是有关焦点的，这里随便填个字符串就行了。
---
## 第四步：编写按钮标签
既然有了思路，就打开创建好的资源包 `ui/chat_screen.json` 文件，由于我们是要合并，文件名字不能改。
```json
"tab_button_label": {
"type": "label",
"text": "Tab"
}
```
先把显示 Tab 文本的标签写出来，这几个字段还不够，还要写 **color**，我们就来到刚才发现的 **common_buttons.light_content_button** 的定义位置。
往下翻一点，看到了 `"$default_text_color|default": "$light_button_default_text_color"`，很明显 **`$light_button_default_text_color`** 就是我们想要的颜色，来到全局变量文件，发现里面确实有这个字段，我们直接引用即可：
```json
"tab_button_label": {
"type": "label",
"text": "Tab",
"color": "$light_button_default_text_color"
}
```
我们还需要填写两个字段，**`"anchor_from"`** 和 **`"anchor_to"`**：
- 前者代表以哪里为该控件的中心，我们写成中间就好了：`"anchor_from": "center"`
- 后者代表对齐父控件的哪里，这里父控件就是我们的 Tab 按钮，同样写成中心：`"anchor_to": "center"`
达到文字显示在按钮正中央的效果。
---
## 第五步：编写 Tab 按钮并绑定事件
现在来写 tab_button，直接复用前面所说的 **small_button**，即 `"tab_button@chat.small_button": {...}`，再让内容指向 tab_button_label，即 `"$button_content": "chat.tab_button_label"`。
而按下时的 id 我们到官方的 chat_screen.json 里找，搜索关键词发现 **`button.chat_autocomplete`** 就是我们想要的 id，并且注释也写明了额外的映射。
直接照抄过来：
```json
"tab_button@chat.small_button": {
"$button_content": "chat.tab_button_label",
"$pressed_button_name": "button.chat_autocomplete",
"$focus_id": "tab_button_focus_id"
}
```
最后的 `$focus_id` 随便填一个字符串就行了。
---
## 第六步：使用 modifications 将按钮插入界面
现在来了解一下 **modifications**，它可以让我们通过非侵入式的方式修改父级的数组，防止版本更新崩掉。
来到我们需要修改的关键部分（上文提过）chat_bottom_panel，写下 `"chat_bottom_panel": {"modifications": [...]}` ，代表你要修改这个字段里的某个数组。如果你要修改的不是顶层，你需要使用 **/** 来进入深层，举个例子：
```json
"hud_title_text": {
"controls": [
{
"title_frame": {
"controls": [
{
"title": {
"type": "label",
"text": "文本"
}
}
]
}
}
]
}
```
如果想改 title，就得写成 `"hud_title_text/title_frame/title": {"modifications": [ ... ]}`，我们不用管中间的数组，直奔对象即可。
**modifications[]** 的每一个对象就代表你要进行的一次修改操作，这里只介绍对象里包含这几个字段：
| 字段 | 说明 |
|---|---|
| `"array_name"` | 代表你要修改的数组名字 |
| `"operation"` | 代表执行哪种操作，有以下几种可选：`"insert_back"`（插入到尾部）、`"insert_front"`（插入到头部）、`"insert_before"`（指定控件前）、`"insert_after"`（指定控件后） |
| `"value"[]` | 代表具体要插入的内容 |
| `"control_name"` | 需要配合 `"operation"` 为 `"insert_before"` 或 `"insert_after"` 时使用，帮助定位 |
回看官方代码，发现数组名字 `"controls"`，辅助定位控件使用 `"text_box"`，`"operation"` 就为 `"insert_before"`，当然你也可以选择 `"insert_after"` 和 `"chat_settings_button"`。写好之后就是下面这样：
```json
"chat_bottom_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_before",
"control_name": "text_box",
"value": [
{
"tab_btn@chat.tab_button": {}
}
]
}
]
}
```
其中，**tab_btn@chat.tab_button** 因为这个文件的命名空间就是 `"chat"`，所以按照上文所讲的 @ 符号，直接写成这样即可。
---
## 第七步：整合全部代码
最后把所有的结合起来就大功告成了：
```json
{
"tab_button_label": {
"type": "label",
"text": "Tab",
"color": "$light_button_default_text_color",
"anchor_from": "center",
"anchor_to": "center"
},
"tab_button@chat.small_button": {
"$button_content": "chat.tab_button_label",
"$pressed_button_name": "button.chat_autocomplete",
"$focus_id": "tab_button_focus_id"
},
"chat_bottom_panel": {
"modifications": [
{
"array_name": "controls",
"operation": "insert_before",
"control_name": "text_box",
"value": [
{
"tab_btn@chat.tab_button": {}
}
]
}
]
}
}
```
---
## 最终效果展示
让我们把弄好的资源包（别忘了正确填写清单文件）导入游戏看下效果。
很好，按钮已经成功添加，点击也能实现补全了，再次点击也能成功切换下一个补全。
---
> **提示：** 本文涉及的官方 UI 文件可前往 (https://github.com/Mojang/bedrock-samples/releases) 获取。记得根据你的游戏版本选择对应的 samples 版本哦！
> 这些只是 JSON UI 的皮毛，帮助你入门。
---
有任何问题和反馈可加我QQ：**3806699176**
文章内容欢迎指正
太厉害了，学到了
页: [1]