JSONUIの心得1【統合版マイクラ】

2023/04/12更新

マインクラフトのJSON UIとは？

MinecraftのJSONUIは、ゲーム内のUI（ユーザーインターフェース）を定義するための強力なツールです。この機能を使用すると、ゲーム内にテキスト、画像、ボタンなどの要素を表示することができます。

JSONUIは、Minecraftのリソースパック内にJSONファイルを配置することで定義されます。これらのファイルには、UI要素のレイアウト、テキスト、画像、アニメーション、音声などの詳細が含まれます。

JSONUIを使用すると、プレイヤーに対して追加の情報を提供したり、特定の機能を実行するためのインタラクティブなユーザーインターフェースを作成したりすることができます。例えば、カスタムマップやMODには、JSONUIを使用して新しいUI要素を追加することができます。

MinecraftのメインメニューもJSONUIを使用して定義されています。このメニューは、プレイヤーに対してさまざまなオプションを提供しています。

JSONUIは、MinecraftのModdingコミュニティで広く使用されており、非常に柔軟で強力なツールです。MinecraftのUIを拡張したり、カスタマイズしたりする場合には、JSONUIを使用することが非常に役立ちます。

JSONUIを使用することで、MinecraftのUIに新しい要素を追加したり、カスタマイズすることができます。プレイヤーにとってより良いゲーム体験を提供するために、JSONUIを活用してみてはいかがでしょうか。

この記事を書こうと思った理由

統合版マインクラフトのリソースパックを弄っているときにふと他の人のワールドでゲーム内のUIが特徴的になっていることを思い出し、試しに自分もいじってみようとするとここに苦戦した。
JSON方式で記述するUIはXML型に似ているけれど複雑になっていて読みづらい。
また、親要素などの結びつきや条件指定での表示もあるため、それもまとめておこうと思う。

まずは元になるファイルを用意する

こちらから統合版マイクラのバニラリソースパックがダウンロードできます。

UIのファイルの位置は、resource_pack\ui\にあります。

今回は分かりやすいように hud_screen.jsonを弄っていきます。

これは通常のプレイ画面です。
とりあえず文字を表示するlabelを追加してみましょう。
一番下の方にcamera_rendererという項目があるので、その隣に[e-mail]を追加しましょう。
前のInfobarは名前で、後ろのInfobarはidです。統一しておいた方がわかりやすいので統一しましょう。

json

      {
        "camera_renderer@camera_renderer": {}
      },
      {
        "[e-mail]": {}
      }

この項目はゲーム画面に表示する要素の中でもその他に分類するものを追加する場所っぽいです。
cameraとか普通使わないですから。
それでは一番下の}を改行して中に実際の要素の中身を書いていきましょう。
あんまり難しいことをごちゃごちゃ書くよりコードを貼ってそれについて詳しく解説するほうがいいと思うので貼ります。

json

  "Infobar": {
    "type": "panel",
    "size": [ "100% - 10px", "100%-30px" ],
    "controls": [
      {
        "InfobarBG": {
          "type": "image",
          "anchor_to": "top_right",
          "anchor_from": "top_right",
          "size": [ "100%c + 12px", "100%c + 12px"],
          "color": [0.1,0.1,0.1],
          "texture": "textures/ui/menubackground",
          "layer": -1,
          "controls": [
            {
              "titlepanel": {
              "type": "label",
              "size": [ "default", "default" ],
              "text": "    §lサーバー情報§r\n§4鯖主§r\n   ADMIN\n§4副鯖主§r\n   Null\n\n§6モデレーター§r\n   Null",
              "color": [1,1,1],
              "font_scale_factor": 1.2,
              "shadow": false,
              "layer": 3
              }
            }
          ]
        }
      }
    ]
  }

"type":"panel"

要素の種類のこと このコードの場合、画像と文字列を大きさをそろえて一緒に表示したいため、親要素はpanelで、そこにimageやlabelを貼っていく

"size": [ "100% - 10px", "100%-30px" ]

その名の通り要素のサイズを意味します。(width,height)
サイズの書き方は色々あるみたいです。

int,fill,default,%c,%y,px,%cm,%sm,+,-

%やpxだけでなく演算子記号も使えるので機種が変わっても上手く表示されるように細かく指定できそうですね。

"controls": []

この中に子要素を追加していきます。
ラベルや画像、ボタンも追加できます。