【基岩版】使用JSON UI自定义基岩版Form
在此教程中,我们将学会制作这个
一. 了解资源包基本结构和控件类型
1. 资源包的结构如下
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是必须文件,
你已经了解了资源包的结构了,下面开始了解控件类型了.
** 2. 了解元素类型**
以下是一些元素类型，它们是该属性的可能的值：
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]
}
二. Hello World
1.如何新建一个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",
]
}
2. 现在我们在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形状了,接下来进阶一下
三.为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
}
}
效果如下(图有问题,没有按钮)
可以看到有两个子控件
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 不再解释
四.添加按钮
1.了解按钮工厂
所有的按钮都要在按钮工厂里面进行处理,,否则按钮不会显示,或者无法使用.当然是还有其他办法的,但是我不会,没法教
按钮工厂通常包含 默认的按钮大小、贴图、交互逻辑
至于按钮工厂的内容直接在下面贴上,不再进行解释,因为你只需要引用就行了
"sapdon_form_button_template@common.button": {
"type": "button",
"bindings": [
{
"binding_type": "collection_details",
"binding_collection_name": "form_buttons"
},
{
"binding_type": "collection",
"binding_collection_name": "form_buttons",
"binding_name": "#form_button_text"
},
{
"binding_type": "view",
"source_property_name": "($binding_button_text = #form_button_text)",
"target_property_name": "#visible"
}
],
"controls": [
{
"default": {
"type": "image",
"texture": "$default_texture"
}
},
{
"hover": {
"type": "image",
"texture": "$hover_texture"
}
},
{
"pressed": {
"type": "image",
"texture": "$pressed_texture"
}
}
]
},
"sapdon_form_button_factory": {
"type": "collection_panel",
"collection_name": "form_buttons",
"bindings": [
{
"binding_name": "#form_button_length",
"binding_name_override": "#collection_length"
}
],
"factory": {
"name": "buttons",
"control_name": "sapdon_form_button_template"
}
},
"custom_ui_template": {
"type": "panel",
"bindings": [
{
"binding_name": "#title_text"
},
{
"binding_type": "view",
"source_property_name": "(#title_text = $binding_text)",
"target_property_name": "#visible"
}
],
"controls": [
{
"main@$main_content": {}
}
]
}
2.开始添加按钮
在上面的堆叠面板下面添加如下控件,可以看到引用了两个子控件,左按钮和右按钮
{
"111_panel": {
"type": "stack_panel",
"size": ["100%", "20%"],
"orientation": "horizontal",
"controls": [
{
"left_button@server_form.left_button": {}
},
{
"11_button": {
"type": "label",
"size": ["10%", "100%"]
}
},
{
"right_button@server_form.right_button": {}
}
]
}
}
3. 左按钮和右按钮
"left_button": {
"type": "panel",
"size": ["45%", "100%"],
"anchor_from": "top_left",
"anchor_to": "top_left",
"controls": [
{
"b1@sapdon_form_button_factory": {
"$binding_button_text": "test1"
}
}
],
"$pressed_button_name": "button.form_button_click",
"$default_texture|default": "textures/menu/message_form_button1",
"$hover_texture|default": "textures/menu/message_form_button1",
"$pressed_texture|default": "textures/gui/newgui/buttons/borderless/lightpressed",
"$binding_button_text|default": ""
},
"right_button": {
"type": "panel",
"size": ["45%", "100%"],
"anchor_from": "bottom_right",
"anchor_to": "bottom_right",
"controls": [
{
"b2@sapdon_form_button_factory": {
"$binding_button_text": "test2"
}
}
],
"$pressed_button_name": "button.form_button_click",
"$default_texture|default": "textures/menu/message_form_button1",
"$hover_texture|default": "textures/menu/message_form_button1",
"$pressed_texture|default": "textures/gui/newgui/buttons/borderless/lightpressed",
"$binding_button_text|default": ""
},
text1和text2是绑定的按钮名称.然后引用的图片,应该可以看懂这里就不多赘述了.这个按钮工厂使用的是dogui的开源模板
好了,该教程到这里似乎已经结束了,但是但是,在不久的将来,会更新下拉面板.至于是什么时候.等我写好例子的时候
