読み込み中...統合版のJSONUIの備忘録です。
投稿者は初心者です。
随時更新するかもしれないし、しないかもしれない。
そもそも何
> JSON UIとは
マイクラのUIをJSON形式で定義したもの。
赤で囲まれたものは、すべてJSON UIで定義されていて、大きさや配置を変更することができる。
（しかし投稿者にそこまでの技術力はない。）
> バニラのJSON UIはどこにある？
公式のリソースパック（resource_pack/ui）にファイルがある。
例えばタイトルやアクションバーは resource_pack/ui/hud_screen.json に定義されている。
ScriptAPIのアクションフォームやモーダルフォームは resource_pack/ui/server_form.json に定義されている。
> 解説記事・動画
海外の方の解説動画 超わかりやすいのでおすすめ
アクションフォームの改造をしたい方は絶対見たほうがいいです。
https://www.youtube.com/playlist?list=PLu4XsMgGIrCqdU44JbWvgv1z_kt_ZpJyw
bedrock wikiの解説 入門だけど難しいのでまずは↑を見るべき
https://wiki.bedrock.dev/json-ui/json-ui-intro
JSON UIの構造
JSON UIの構造はHTMLのような階層構造になっている（多分）。
要素(親要素)の中に他の要素(子要素)を入れることで、UIの構造を作ることができる。
さらにあらかじめ定義された要素を継承し、新たな要素を作ることもできる。
主な要素は次のとおり
詳しい項目は → https://wiki.bedrock.dev/json-ui/json-ui-documentation
UIの書き方（実例を見ながら）
JSON UI はJSON形式で書きます。
コードの通り、親要素(oya_panel)の中に、子要素(ko_panel)がある関係です。
// 親要素
"oya_panel": {
"type": "panel", // 種類
"size": [100, 100], // [横, 縦]
"controls": [ // 子要素を入れる配列
{
// 子要素
"ko_panel": {
"type": "panel",
"size": [60, 60],
"anchor_from": "center", // 中心に配置
"anchor_to": "center" // 中心に配置
}
}
]
}
stack_panelを用いた場合のUIです。
stack_panelは子要素を水平または垂直に並べることができます。
// 親要素
"oya_stack_panel": {
"type": "stack_panel",
"size": [100, 100], // [横, 縦]
"orientation": "vertical", // 垂直に並べる
"controls": [ // 子要素を入れる配列
{
"ko_panel_1": { // 子要素
"type": "panel",
"size": ["100%", 20] // %: 親要素を基準にパーセント
}
},
{
"ko_panel_2": { // 子要素
"type": "panel",
"size": ["100%", 20]
}
},
{
"ko_panel_3": { // 子要素
"type": "panel",
"size": ["100%", 20]
}
}
]
}
UIの継承
JSON UIでは、既に定義されたUIを継承して、新しく要素を作ることができます。
例えば、バニラのアクションフォームの枠は common_dialogs.main_panel_no_buttons を継承して作られています。
継承の書き方
"新しい要素名@継承元の名前空間.継承元の要素名": {}「名前空間」とはjsonファイルの上のほうで定義されているやつです。（一意）
カスタムのnamespaceを作る場合は、_ui_defs.json で定義する必要があります。詳しくはbedrock wiki
継承の例
{
"namespace": "saba_form", // カスタムの名前空間
"oya_panel": {
"type": "panel",
"size": [100, 100], //[横, 縦]
"controls": [ // 子要素
{
"ko_panel": {
"type": "panel",
"size": [60, 60],
"anchor_from": "center",
"anchor_to": "center"
}
}
]
},
// saba_form の oya_panel を継承し、新たに big_oya_panel を定義する
"big_oya_panel@saba_form.oya_panel": {
"size": [200, 200] // サイズを200, 200に変更する
}
}
やる気があれば続きを書きます。
UIで変数を使う
JSON UIでは、変数を定義することができます。
変数は先頭に「$」を付けて表します。
{
"namespace": "saba_form",
"oya_panel": {
// 変数を定義する
// "$変数名|default": 初期値
"$oya_size|default": [100, 100], // 親のサイズ
"$ko_size|default": [60, 60], // 子のサイズ
"type": "panel",
"size": "$oya_size", // 変数を代入
"controls": [
{
"ko_panel": {
"type": "panel",
"size": "$ko_size", // 変数を代入
"anchor_from": "center",
"anchor_to": "center"
}
}
]
},
// oya_panel を継承して custom_oya_panel を作る
"custom_oya_panel@saba_form.oya_panel": {
"$oya_size": [150, 150], // 変数に代入する
"$ko_size": [120, 120]
}
}
コメント