【基岩版】使用JSON UI自定义基岩版form

[一颗不帅]

【基岩版】使用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的开源模板

好了,该教程到这里似乎已经结束了,但是但是,在不久的将来,会更新下拉面板.至于是什么时候.等我写好例子的时候