一
【基岩版】使用JSON UI自定义基岩版Form
在此教程中,我们将学会制作这个
[image: 1742135486733-869f8c36-4610-4aaf-b8de-5745d0747fa1.png]
首先,了解资源包的基本结构
资源包的结构如下
resource_packs/
│── 我的资源包/
│ │── manifest.json # 资源包的描述文件
│ │── pack_icon.png # 资源包的图标（可选）
│ │── textures/ # 纹理（图片）
│ │ │── blocks/ # 自定义方块纹理
│ │ │── items/ # 自定义物品纹理
│ │ │── entities/ # 实体纹理
│ │── models/ # 自定义 3D 模型（.geo.json）
│ │── sounds/ # 自定义声音文件（.ogg）
│ │── sounds_definitions.json # 声音定义文件
│ │── animations/ # 实体动画（JSON）
│ └── render_controllers/ # 渲染控制器（JSON）
资源包 manifest.json
{
"format_version": 2,
"header": {
"name": "我的资源包",
"description": "一个自定义资源包",
"uuid": "d77e29c5-5823-4e4d-87b7-9b8e2a6c5f00",
"version": [1, 0, 0],
"min_engine_version": [1, 20, 0]
},
"modules": [
{
"type": "resources",
"uuid": "9b1deb4e-3f1b-42a3-9d62-4f3c8a7d8d45",
"version": [1, 0, 0]
}
]
}
在资源包中manifest.json和pack_icon.png是必须文件,
你已经了解了资源包的结构了,下面要开始正文了.
如何新建一个UI
_global_variables.json- 设置全局变量
_ui_defs.json- UI 上使用的文件
我们在创建UI时要将新创建的 UI加入_ui_defs.json
格式如下
{
"ui_defs": ["ui/button.json", "my_ui/main_menu.json"]
}
也可以这样
{
"ui_defs": [
"ui/menu/camera.json",
"ui/menu/doge_common.json",
]
}
了解元素类型
以下是一些元素类型，它们是该属性的可能的值：
label用于创建文本对象
image用于从提供的文件路径渲染图像
button用于创建交互式和可点击元素
panel一个空的容器，您可以在此存储所有可能相互重叠的其他元素
stack_panel一个空容器，您可以在此堆栈中存储所有其他元素.用法类似<div><div><div> <div>
grid使用另一个元素作为模板，然后在多行和多列中重复渲染它
factory- 基于另一个元素渲染一个元素，能够调用硬编码的值和变量
custom- 与另一个属性配对，该属性渲染硬编码的 JSON UI 元素renderer
screen游戏直接调用的元素，通常是根面板元素
全局变量用法
{
"$info_text_color": [0.8, 0.8, 0.8]
}
现在我们在UI文件夹中新建一个server_form.json,
创建命名空间
{
"namespace": "sever_form",
"foobar": {...}
}
创建如下内容
{
"namespace": "server_form",
"long_form": {
"type": "panel",
"size": ["100%", "100%"],
"controls": [
{
"long_form@common_dialogs.main_panel_no_buttons": {
"$title_panel": "common_dialogs.standard_title_label",
"$title_size": ["100% - 14px", 10],
"size": [225, 200],
"$text_name": "#title_text",
"$title_text_binding_type": "none",
"$child_control": "server_form.long_form_panel",
"layer": 2,
"bindings": [
{
"binding_name": "#title_text"
},
{
"binding_type": "view",
"source_property_name": "((#title_text - 'Custom Form') = #title_text)",
"target_property_name": "#visible"
}
]
}
},
{
"long_form@common_dialogs.main_panel_no_buttons": {
"$title_panel": "common_dialogs.standard_title_label",
"$title_size": ["100% - 14px", 10],
"size": [400, 200],
"$text_name": "#title_text",
"$title_text_binding_type": "none",
"$child_control": "server_form.long_form_panel",
"layer": 2,
"bindings": [
{
"binding_name": "#title_text"
},
{
"binding_type": "view",
"source_property_name": "(#title_text = 'Custom Form')",
"target_property_name": "#visible"
}
]
}
}
]
}
}
观察基本结构
long_form:
这个 UI 界面的主要组件，类型是 panel（面板）。
controls 定义了 UI 内部的子组件
两个子控件极为相似,那我们就研究其中一个
"$title_panel": 标题的样式，使用 "common_dialogs.standard_title_label" 这个 UI 组件。
"$title_size": 标题大小，宽度是 100% - 14px，高度是 10px。
"$text_name": 绑定的文本变量，值为 #title_text，这是一个可变的 UI 绑定变量。
"$title_text_binding_type": 绑定类型设为 "none"
"$child_control": 这个面板的子控件，名称是 "server_form.long_form_panel"。
"layer": 层级，值为 2，表示这个面板在 UI 结构中的层次
下面是绑定,用于form标题识别
"bindings": [
{
"binding_name": "#title_text"
},
{
"binding_type": "view",
"source_property_name": "((#title_text - 'Custom Form') = #title_text)",
"target_property_name": "#visible"
}
]
}
第一个绑定
绑定 #title_text：这个变量用于 设置或读取面板的标题
第二个绑定
在 #title_text 是 "Custom Form" 时可见
好了,你已经了解如何更改原版的Form形状了,接下来
学习自定义按钮位置,字体
先来看一个例子,再逐个分析
{
"namespace": "server_form",
"$schema": "https://kalmemarq.github.io/Bugrock-JSON-UI-Schemas/ui.schema.json",
"long_form": {
"type": "panel",
"size": ["100%", "100%"],
"controls": [
{
"cutsom_long_form": {
"type": "panel",
"size": [322.5, 190],
"layer": 2,
"controls": [
{
"indent_panel": {
"type": "panel",
"size": ["100% - 16px", "100%"],
"controls": [
{
"my_form_label@server_form.my_form_label": {}
},
{
"my_form_background@server_form.my_form_background": {}
},
{
"content_stack": {
"type": "stack_panel",
"size": ["100%", "100%"],
"orientation": "vertical",
"controls": [
{
"my_form_body@server_form.my_form_body": {
"size": ["100%", "100% - 16px"]
}
}
]
}
}
]
}
}
]
}
}
]
},
"my_form_body": {
"type": "panel",
"anchor_from": "top_middle",
"size": ["100%", "100% - 16px"],
"layer": 8,
"controls": [
{
"form_body_text": {
"type": "label",
"text": "#form_text",
"layer": 8,
"bindings": [
{
"binding_name": "#form_text"
}
]
}
},
{
"my_form_background@server_form.my_form_background": {
"size": ["100% - 22px", "100%"]
}
}
]
},
"my_form_label": {
"type": "label",
"font_type": "MinecraftTen",
"font_size": "large",
"anchor_from": "top_left",
"anchor_to": "top_left",
"text": "#title_text",
"layer": 8,
"offset": [9, -16],
"bindings": [
{
"binding_name": "#title_text"
}
]
},
"my_form_background": {
"type": "image",
"size": ["100% + 5px", "100% + 5px"],
"texture": "textures/custom_ui/custom_bg",
"alpha": 0.9
}
}
效果如下(图有问题,没有按钮)
[image: 1742133471844-5e15658e-d2c7-4e4e-937b-1836d8df7447.png]
可以看到有两个子控件
indent_panel :
{
"my_form_label@server_form.my_form_label": {}
},
{
"my_form_background@server_form.my_form_background": {}
},
用于控制整体背景和标题
content_stack(堆叠面板)
{
"my_form_body@server_form.my_form_body": {}
}
用于主体以及背景其中"orientation": "vertical",设置方向为纵向
接下来以my_form_body为例,该控件主要为主体及其内容控件(就大黑框里面的小黑框)
"my_form_body": {
"type": "panel",
"anchor_from": "top_middle",
"size": ["100%", "100% - 16px"],
"layer": 8,
"controls": [
{
"form_body_text": {
"type": "label",
"text": "#form_text",
"layer": 8,
"bindings": [
{
"binding_name": "#form_text"
}
]
}
},
{
"my_form_background@server_form.my_form_background": {
"size": ["100% - 22px", "100%"]
}
}
]
},
控件类型panel , 锚定位置正上方
"layer:" 层级,数值越高,显示越靠前
总得来说，锚点位置位置如下：
top_left top_middle top_right
left_middle center right_middle
bottom_left bottom_middle bottom_right
anchor_from: "center"（组件的锚点位置）
表示 组件自身 的锚点（对齐点）在 中心。
anchor_to: "center"（组件放置到的父级面板的锚点）
表示 组件被放置的位置 对应 父级 UI 面板的中心。
"my_form_label和my_form_background 不再解释
好了,按钮明天再说,今天是2025年3月16日