JSON UI入門

注意>> 最近、次世代のUI「Ore UI」に徐々に置き換えられています。
あと、説明力が下手なので伝わるかどうかわからないです。その点ご了承を。。。。

JSON UIって何？

JSON UIは、JSONファイルで構成されるマイクラのUIです。
画像や文字などを表示したり、ボタンやトグルスイッチを置いたりできます。

初歩的なところから初めよう。

UIは複雑で始めての人には「？？？？？」ってなるかもしれないです。
でも、ちょっとづつ慣れていけば大丈夫だと思う。

ちょっと待って。その前に。。。

JSONの基礎知識だけは付けましょう。

アドオンとか作ってたらもうマスターしてるかもしれないけど、一応...。

https://tokamcwin10.blog.jp/article-43664219

画面に文字を表示してみよう。

UIはリソースパックの中に作っていきます。ビヘイビアーパックは一切使いません。
リソースパックのmanifestとかは各自で作ってね。

リソースパックの一番最初のフォルダ(manifest.jsonとかあるフォルダ)に
「ui」フォルダを作りましょう。

新しいテキストファイルを作成して、名前を「debug_screen.json」に変えましょう。
このとき、「拡張子を変更すると使えなくなる可能性があります」的なメッセージが出た場合は、
「はい」を選びましょう。
逆にメッセージが出なかった場合、上のメニューの「表示」の中にある「ファイル名拡張子」をONにしてもう一度ファイル名を変えてみましょう。

そしたら、作ったファイルをなんでもいいのでテキストエディタ(例えばメモ帳やNotepad++)で開きましょう。

このコードをそのままコピペしましょう。

できたらマイクラに入れてリソースパックを有効化してみましょう。
すると、画面の中央に「こんにちは！！」という文字が出てくるはずです。
※出ない場合は他のリソパが邪魔してるかもしれないです。
他のパックを全部無効にしてみよう。
簡単でしょ(?)

文字の表示場所を変えてみよう。

文字の表示場所はデフォルトでは中央だけど、上や左上など、いろんな位置に配置できます。

"sample_text"に、これを追加してみましょう。

"anchor_from": "top_left",
"anchor_to": "top_left"

すると、文字の場所が左上に移動します。
基本fromとtoは同じものを入れます。
(それぞれ違うものを入れると中央よりちょっと上... とかの位置にもできるけどここでは割愛。)


３分クオリティの表を作ってみました。これを参考に位置を変えてみましょう。

では、文字をずらしてみましょう。
anchor_from・anchor_toでは、画面の大体どの辺に表示するかを指定したけど、
そこから右下に5pxずらす... なんてこともできます。

"sample_text"に、これを追加してみましょう。

"offset": [ 5, 5 ]

すると、文字が右下に5pxずれます。
これは、画面のX方向、Y方向にそれぞれ5pxずらしています。
[ 10, 5 ]にすると、X方向に10pxずれます。
また、マイナス値にすると、X方向は左にずれ、Y方向は上にずれます。

文字のサイズを変えてみよう。

文字のサイズも変えることができます。

"sample_text"に、これを追加してみましょう。

"font_size": "large"

すると、文字が大きくなります。
largeの他にも、small、extra_largeがあります。
smallにするとちっちゃくなります。
extra_largeにするとめっちゃでかくなります。

これよりもっと大きくしたかったり、もっと細かく設定したい場合は、
font_scale_factorを使いましょう。

"font_size"を"font_scale_factor"に変えて、設定値を2.0(数値)にしましょう。

文字が大きくなります。
値は、1.0がデフォルトの大きさ。
これより大きくすれば大きくなり、逆にこれより小さくすれば文字は小さくなります。

⚠注意⚠
"font_scale_factor"を使ってUnicodeフォントのサイズを変えると文字が見づらくなる可能性があります。

画像を表示してみよう。

JSON UIでは、リソースパックから画像を読み込むこともできます。
一旦debug_screen.jsonの中身全部消して、これを全部コピペしよう。

すると、画面の中央に土ブロックのテクスチャが出るはずです。

これも、文字と同じように位置をずらしたりできます。
サイズは、「"size": [ 20, 20 ],」のところをいじれば変えれます。



ここまでできたら基本的なことはできました。おつカレーライス(?)