titleコマンドで、最高にアツいGUIを作ろう

この記事は、Minecraft Command Advent Calendar 2024 21日目の記事です。

はじめに

突然ですがみなさん、コマンドで「GUI」作ったことありますか？？
今回のテーマは 画面表示 関連のお話。特に titleコマンド を使った方法について解説していきます。
こういった演出は何かを作るうえで必須ではないかもしれませんが、ここをちょっとこだわるだけで作品全体のクオリティがぐっと上がると思っています。プレイヤーが思わず唸ってしまうような アツい演出 、一緒に作ってみませんか？

ちなみに、おそらくこの記事のテーマ自体は中～上級者向けだと思いますが、かなり分かりやすいように書いたつもりなので「そんなの作ったことないよ！」という方も大歓迎です。

それでは、やっていきましょう！！

この記事は Minecraft Java Edition 1.21.3 を時点の情報をもとに書いています。

何ができるのさ！

まずはあなたの心に住まう「これ作りたい！！！」を刺激するために、実際に作ったものをお見せしましょう。このリザルト画面は全てtitleコマンド（とシェーダーなどなど）で作っています。

さて、今回はこういうのを作っていこう！という記事なんですがその前に...

え、ディスプレイエンティティでよくね？

最近、item_displayやtext_displayのような革命的なシステムが実装されましたね。（2年前、、？）
比較的直感的に操作できるし結構なんでもできるし、titleコマンドよりそっちの方がいいんじゃねーの！と思ったそこのあなた、ちょっと待ってください。

1. ディスプレイエンティティは半透明がニガテ

どういうことかは実際に見た方が早いと思います。
⇩ ということで画像 ⇩

手前がtext_display、奥のTNTがblock_displayです。こんな感じで 重なってる部分が描画されなくなっちゃう 。
これはバグ報告もされてるみたいなので一応修正待ちではあるんですけど、これは結構きつい。

2. 動き回るプレイヤーもニガテ

「ワールド内の特定の場所に表示しておく」という用途ならディスプレイエンティティが最強なんですが、例えばHPバーのように「常に画面上に表示しておくUI」なんかを作るのは少し苦手です。
上の動画のように、常時tpコマンドで追従させていても明らかに動いているのがわかってしまいます。F5の視点変更？にもなかなか弱いです。
そしてこのラグなどに関しては、今後改善されることは無いんじゃないかなーと思います。

3. titleは意外となんでもできる

titleコマンドってなかなか癖が強いですよね。仕様も割とややこしいし、何種類ものUIを同時に表示したいと思うとかなーりめんどくさい。
でも！そんな難しそうだしめんどくさいしややこしいtitleコマンドくんですが、色々な「ワザ」を使えば意外とどんなUIでも作れちゃうんです！
簡単だけど課題のあるディスプレイエンティティではなく、難しいけどより柔軟なtitleコマンドを選んだ、というわけです。

titleを最強にしていこう

というわけで、ここからはその「ワザ」たちを紹介していこうと思います。ただ全部解説してたらとんでもないボリュームになってしまうので、この記事では最低限のことに絞って解説しようと思います。

これからtitleコマンドをたくさん使うので、あらかじめ/title @s times 0 100 0などを実行しておくと良いと思います！

1. スペース

まずは一度titleコマンドにおける「スペース」の仕様について解説していきます。なんのこっちゃと思うかもしれませんがしばしお付き合いください。

では、titleコマンドを使って「a         b」という文字を表示する例を考えてみます。

/title @s title "a         b"

実際にこのコマンドを打つとわかると思いますが、表示される文字は以下の画像ように
「a b」になるはずです。あれー、スペースが足りない。

これは、「titleコマンドなどのテキストに含まれる 複数個繋がった空白文字 は、一つの半角空白として扱われる 」ということが原因です。

さて、これを踏まえた上で本題に戻りましょう。
まず「titleコマンドでUIはどうやって作っているのか」ですが、そもそもtitleコマンドで表示できるものは「たった一つの文字列」です。「あああ」とか「abcde」とか。

では、例えば画面左と画面右にそれぞれ異なるものを表示したいとしたらどうすれば良いでしょうか？それぞれを「左」「右」という文字で簡略化して考えてみます。

まず思いつくのは「左                  右」のようにたくさんスペースを開ける方法ですが、このやり方ではさっき説明した通りスペースがまとまって「左 右」のようになってしまいます。
そこで登場するのが、いわゆる「カスタムスペース」といった方法です。

まずはリソースパックを作って、そのminecraft\font\内に、こんな感じのjsonファイルを追加します。ここではtest.jsonという名前にしておきます。

minecraft\font\test.json

{
    "providers": [
        {
            "type": "space",
            "advances": {
                "あ": 30,
                "い": 60
            }
        },
        {
            "type": "reference",
            "id": "default"
        }
    ]
}

リソースパックがきちんと読み込めたら、このコマンドを実行してみましょう。

/title @s title {"text":"aあbいc","font":"test"}

そうすると、こんな感じで表示されるはずです。

ひとまず何をしたのか解説していきます。
まずリソースパックに作ったjsonファイルですが、これの役割は端的に言うと「翻訳」です。今作ったjsonには、「testというフォントを適応した時、『あ』という文字は『幅30の空白』に、『い』という文字は『幅60の空白』に置き換えてね」ということが書かれています。
"type":"reference"と書いてある部分には、「その他の文字は全て デフォルトのフォントを参照 してね！」という意味になります。

そしてさっき打ったコマンドは、「testというフォントのルールに則って aあbいc という文字列を表示してね。」ということです。

これが「カスタムスペース」なわけですが、ここで一つ疑問が湧いてきたんじゃないでしょうか！

「これって負の数を入れたらどうなるんだろう？」

では、やってみましょう。

先程のjsonファイルを少し変えて、

minecraft\font\test.json

{
    "providers": [
        {
            "type": "space",
            "advances": {
                "あ": 30,
                "い": -50
            }
        },
        {
            "type": "reference",
            "id": "default"
        }
    ]
}

こんな感じにしてみました。リソパの再読み込みをして、この状態でさっきと同じコマンドを実行してみると...？？

！！！！！
負の数を入れたら、cがかなり左に移動しましたね。つまり、正のスペースは通常通り 右にずらす効果 、負のスペースは逆に 左にずらす効果 があるということです。

これを使えば、例えば下の画像のように 背景を表示してからその上に文字を表示する なんてこともできます！（背景、負のスペース、文字の順で表示してるよ）

2. シェーダー

さて、いよいよお待ちかね「シェーダー」のお話です。
シェーダーは本当に優秀で、マジで何でもできると言っても割と過言ではありません。できることが多すぎて全ては解説しきれないので、特に使う技術に絞って一つずつ順番に解説していきます。

2-1. 上下を調節してみる

カスタムスペースを覚えたことによって左右方向は自由に調節できるようになりましたけど、なら今度は上下も調節したいですよね。というわけで！今度は上下の調節のやり方について書いていきます。

自分で用意した画像をtitleで表示するためには、基本的にリソースパックを使ってフォントを自作すると思います。type:bitmapでは、「 height（高さ）」と「 ascent（上下シフト）」の2つのパラメータがありますが、こいつらには面倒くさい縛りがあって、ascent < height である必要があります。
まぁつまり、標準の機能では「下にはいくらでも下げれるけど上にはあまり上げられない」ということです。これで何が困るかと言うと、例えば画面の上端に表示するようなUIが作れなかったりします。わぁそれは困る。

そしてもう一つ、heightやascentで管理する方法だと表示位置や文字のサイズごとに全てフォント側で登録する必要があり、例えばスコアボードの値に応じて動的に高さを変える...というような柔軟な実装が難しくなってしまいます。

ここで登場するのが「シェーダー」です！！ 上下に自由に動かせて、コマンドから動的に高さも変更できるような方法 を紹介していきます。ただこれも全てを解説していたらとんでもない文量になってしまうので重要なところだけ。とりあえずかなり長いですがいきなり例を載せます。まずは核となるシェーダー部分のファイルから。

minecraft\shaders\core\rendertype_text.vsh

#version 150

#moj_import <fog.glsl>

in vec3 Position;
in vec4 Color;
in vec2 UV0;
in ivec2 UV2;

uniform sampler2D Sampler2;

uniform mat4 ModelViewMat;
uniform mat4 ProjMat;
uniform int FogShape;

uniform float GameTime;

out float vertexDistance;
out vec4 vertexColor;
out vec2 texCoord0;

out float depthLevel;

out vec3 ColorValue;

void main() {
    depthLevel = Position.z;
    vec3 pos = Position;

    // 透明度だけ引き継いだ白色
    vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
    white.w = Color.w;

    // RGBを整数値で取得
    ColorValue = vec3(round(Color.r * 255.0), round(Color.g * 255.0), round(Color.b * 255.0));

    if (ColorValue.r == 1.0 && depthLevel == 2400.12) {
        // title
        pos.y -= 10.0;
        vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);
    } else {
        // その他
        vertexColor = Color * texelFetch(Sampler2, UV2 / 16, 0);
    }

    gl_Position = ProjMat * ModelViewMat * vec4(pos, 1.0);

    vertexDistance = fog_distance(pos, FogShape);
    texCoord0 = UV0;
}

はい、これです。

えーっと、、、何がなんだかわからないと思いますが、とりあえず実際にやってみましょうか。リソースパックのminecraft\shaders\core\にrendertype_text.vshというファイルを作り、中にこのめちゃくちゃ長いやつをコピペしてください。

リソースパックの再読み込みをしたら、このコマンドを実行してみましょう！

/title @s title [{"text":"a"},{"text":"a","color":"#01FFFF"}]

こんな感じになったでしょうか。なっててくれ～っ！

とりあえずコマンドの解説から。左右のaで何が異なるのかですが、右の方のみ色指定がされています。他にもいくつかやり方はあると思いますが、今回使うのは​「文字の色」を使ってシェーダー側に値を送り、それに応じた処理をシェーダー側で行うという方法です。

そしてシェーダー側の処理ですが、最初の方と最後の方は一旦ほぼ全部おまじないだと思っていただいて、、真ん中の部分の解説をしていきます。

// 透明度だけ引き継いだ白色
vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
white.w = Color.w;

⇧まずこれは、文字の色で指定したtitleのテキストを、透明度を維持したまま白色に戻すための処理（の準備）です。これもおまじないです。

// RGBを整数値で取得
ColorValue = vec3(round(Color.r * 255.0), round(Color.g * 255.0), round(Color.b * 255.0));

⇧これは小数値で入っている色の値を扱いやすいように整数値にする処理です。まぁこれもおまじないです。

if (ColorValue.r == 1.0 && depthLevel == 2400.12) {
    // title
    pos.y -= 10.0;
    vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);
} else {
    // その他
    vertexColor = Color * texelFetch(Sampler2, UV2 / 16, 0);
}

⇧まずdepthLevel == 2400.12というのは、titleコマンドのtitle（/title @s titleで表示されるテキスト）の影ではない部分を絞り込むための条件です。おまじないです。
そして、ColorValue.r == 1.0というのは、文字の色のR値（#01FFFFの01の部分）が1.0であるという条件です。
その中にあるpos.y -= 10.0;は、pos.y（文字のY座標）の値を-10する（10だけ画面上方向に上げる）という処理、vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);は文字の色を白に戻す処理です。
つまり今回の例では、​「文字の色のR値が1のときに、その文字を10だけ画面上方向に上げる」​というわけです。

ここらへんに関しては数値とかを実際に自分でいじって色々試してみるのが一番理解しやすいと思います。pos.y += 20.0;とかにすれば下方向に20動くし、pos.x += 100.0;とかにすれば右方向に動きます。pos.y -= ColorValue.g;とかにすれば、文字のG値に応じて動的に動かすこともできます。カラーコードで表現できる値しか入力できないですが、割と直感的に操作できるしそんなに複雑なものを作らなければ範囲に困ることも無いので、結構良い方法だと思います。

2-2. 影を操作してみる

さて、さっき色々と操作していて気付いたかもしれないですが、文字の「影」は動いていなかったと思います。影だけ消したい？影も一緒に動かしたい？やっちゃいましょう！
あ、今回はめっちゃ軽めの内容なのでご安心を、、。

さっき「titleのtitle」を絞り込む時に、depthLevel == 2400.12という条件を書きました。これはこのテキストのZ座標（画面の奥行き、レイヤー）が2400.12であることを条件にしているということです。同じような要領で、Z座標を使って文字の種類を絞り込むことができます。以下に以前Ver1.20.5で検証したZ座標の一覧表を載せておきます！

タイプ	Z座標
title	2400.12
subtitle	2400.06
title、subtitleの影	2400.00
actionbar	2200.03
actionbarの影	2200.00

titleの影を操作したいのであれば、depthLevel == 2400.00とすればできそうですね。
移動はもうさっきやったし、せっかくなので今度は「削除」をやってみましょう。

minecraft\shaders\core\rendertype_text.fsh

#version 150

#moj_import <fog.glsl>

uniform sampler2D Sampler0;

uniform vec4 ColorModulator;
uniform float FogStart;
uniform float FogEnd;
uniform vec4 FogColor;

in float vertexDistance;
in float depthLevel;
in vec4 vertexColor;
in vec2 texCoord0;

in vec3 ColorValue;

out vec4 fragColor;

void main() {
    vec4 color = texture(Sampler0, texCoord0) * vertexColor * ColorModulator;

	if (color.a < 0.1) {
		discard;
	}

	// titleの影を消す
	if (ColorValue.b == 2 && depthLevel == 2400.00) {
		discard;
	}

    fragColor = linear_fog(color, vertexDistance, FogStart, FogEnd, FogColor);
}

まずはminecraft\shaders\core\にこんな感じでrendertype_text.fshというファイルを作ってください。

さっきは.vshファイルだったのに対して、今度は.fshファイルです！今minecraft\shaders\core\の中にはファイルが2種類ある状態になっています。

今回もそこそこ長いですね。ただ今回大事なのはこの部分だけです、先に解説しちゃいましょう。

// titleの影を消す
if (ColorValue.b == 2 && depthLevel == 2400.00) {
	discard;
}

まずdiscard;は「非表示にする」という処理です。ということは、B値が2でZ座標が2400.00のテキストを非表示に、、となりそうですが、実はちょっと違くて。影の色は、RGBそれぞれの値が元のテキストの色の4分の1になる ので、今回検知できるのはB値が「8,9,A,B（16進数）」のテキストになります。
例えば「#000408」という色の文字の影を処理したいとき、影の色はRGBの各値が4分の1になった「#000102」という色になっているので、使う条件はif (ColorValue.b == 2)になるということです。
つまり、今書いた処理は「titleかsubtitleの影で、B値が8~Bのものを非表示にする」ということになるのです！

ちょっとややこしい話になってしまいましたが、「影の部分のRGBは元のテキストの4分の1になるので、色の指定に気をつける必要がある」ことと、「discard;で非表示にできる」ということだけ分かっていれば大丈夫です！

ではそれを踏まえて下のコマンドを実行したら、どうなるでしょうか？

/title @s title [{"text":"a"},{"text":"a","color":"#01FFFF"},{"text":"a","color":"#01FF08"}]

おおお！！きちんと一番右のaだけ影が消えましたね！

2-3. 基準点を中心からずらしてみる

上下左右に動かせて、影と本体部分も別々に操作できるようになった。これで全てのテクニックを紹介した...と思いました？いいえ、まだあります。

titleコマンドの挙動をよーく見てみると、「テキストの表示位置が画面中央である」ことがわかります。これ、変えれちゃうんです。
だからなんだよ！って思った方、例えば画面の隅に表示したいUIがあると考えてください。

例えばこんな感じ。画面右上には敵のHPとかを表示するUI、左上には方角とか時間とか天気とかを表示しています（ついでに座標も）。
でもこれ、マイクラのウィンドウのサイズが変わったりすることで 表示位置が画面の隅じゃなくなったりする んです。

せっかくなのでちょっと試してみましょう！
とりあえずrendertype_text.vshのpos.yの値を変更していた部分をpos.y -= 55.0;に変更して、minecraft\font\test2.jsonを作ってみてください。中身は以下の通り。

minecraft\font\test2.json

{
    "providers": [
        {
            "type": "space",
            "advances": {
                "あ": -100
            }
        },
        {
            "type": "bitmap",
            "file": "block/stone.png",
            "ascent": 16,
            "height": 16,
            "chars": ["石"]
        },
        {
            "type": "reference",
            "id": "default"
        }
    ]
}

vshの方、確認できるように全文も一応置いておきます。

rendertype_text.vsh（クリックで開閉）

#version 150

#moj_import <fog.glsl>

in vec3 Position;
in vec4 Color;
in vec2 UV0;
in ivec2 UV2;

uniform sampler2D Sampler2;

uniform mat4 ModelViewMat;
uniform mat4 ProjMat;
uniform int FogShape;

uniform float GameTime;

out float vertexDistance;
out vec4 vertexColor;
out vec2 texCoord0;

out float depthLevel;

out vec3 ColorValue;

void main() {
    depthLevel = Position.z;
    vec3 pos = Position;

    // 透明度だけ引き継いだ白色
    vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
    white.w = Color.w;

    // RGBを整数値で取得
    ColorValue = vec3(round(Color.r * 255.0), round(Color.g * 255.0), round(Color.b * 255.0));

    if (ColorValue.r == 1.0 && depthLevel == 2400.12) {
        // title
        pos.y -= 55.0;  //変更したのはここだけ!!
        vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);
    } else {
        // その他
        vertexColor = Color * texelFetch(Sampler2, UV2 / 16, 0);
    }

    gl_Position = ProjMat * ModelViewMat * vec4(pos, 1.0);

    vertexDistance = fog_distance(pos, FogShape);
    texCoord0 = UV0;
}

そしたらこの状態でこんな感じのコマンドを打ってみてください。リソパの再読み込みも忘れずに！

/title @s title {"text":"あ石","font":"test2","color":"#01FF08"}

石の画像は画面のどこに表示されましたか？

⇧こんな感じで綺麗に画面左隅に表示された？

⇧それともこんな感じ？

⇧もしかしたらこんなんだったり？

さっきのコマンドを実行しながらウィンドウのサイズを変えたり、ビデオ設定の「GUIの大きさ」などを変えたりするとわかると思いますが、つまり「ユーザー側の設定によって表示位置が変わってしまう」んです。
画面の角っこに表示したいUIなのに、全然違うところに表示されてしまったり、画面外にはみ出したりしてしまったら嫌ですよね。
そこでテキストの基準点を真ん中から変更しよう！！となるわけです。

てことで方法。まずrendertype_text.vshを一部書き換えましょう。

rendertype_text.vsh（クリックで開閉）

minecraft\shaders\core\rendertype_text.vsh

#version 150

#moj_import <fog.glsl>

in vec3 Position;
in vec4 Color;
in vec2 UV0;
in ivec2 UV2;

uniform sampler2D Sampler2;

uniform mat4 ModelViewMat;
uniform mat4 ProjMat;
uniform int FogShape;

uniform float GameTime;

out float vertexDistance;
out vec4 vertexColor;
out vec2 texCoord0;

out float depthLevel;

out vec3 ColorValue;

void main() {
    depthLevel = Position.z;
    vec3 pos = Position;

    // 透明度だけ引き継いだ白色
    vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
    white.w = Color.w;

    // RGBを整数値で取得
    ColorValue = vec3(round(Color.r * 255.0), round(Color.g * 255.0), round(Color.b * 255.0));

    if (ColorValue.r == 1.0 && depthLevel == 2400.12) {
        // title
        vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);

        gl_Position = ProjMat * ModelViewMat * vec4(pos.x, pos.y + 40.0, pos.z, 1.0);
        if (ColorValue.b == 8.0) {
            gl_Position.x -= 1.0;
            gl_Position.y += 1.0;
        }
    } else {
        // その他
        vertexColor = Color * texelFetch(Sampler2, UV2 / 16, 0);
        gl_Position = ProjMat * ModelViewMat * vec4(pos, 1.0);
    }

    vertexDistance = fog_distance(pos, FogShape);
    texCoord0 = UV0;
}

ここらへんは割と難しいと思うので、自分でいじるために必要そうな最低限の説明だけ。
さっきまでいじっていたposなどの情報を使ってgl_Positionという変数に値を入れています。gl_Positionっていうのは超ざっくり言うと「ウィンドウのどのへんに配置するか」を表現するための変数です。
-1~1の範囲で表していて、gl_Position.xが1なら右端、gl_Position.yが1なら上端になります。
pos.yに40.0を足しているのは、マイクラのタイトル（/title @s title ""）は画面の中心から上方向に40ピクセルだけずれているので、その補正です。
つまり、pos.yに40.0を足して画面中心に戻したあとに、gl_Position.xを-1とgl_Position.yを+1（画面左上に基準点をずらしている）ということになります。

それじゃあこの状態でこのコマンドを実行してみましょうか！！シェーダーで画面左にずらしたので、さっき「あ」で入れていた負のスペースは消してます！

/title @s title {"text":"石","font":"test2","color":"#01FF08"}

おおおー！！！どんな状態でも常に左上基準になってるー！！！やったーー！！！！！

ちなみにvshをよく見ると分かると思いますが、今回は文字色のB値が8であることを条件に左上基準にずらしてみました。例えばこれに追加で「B値が9なら右上基準にする」といった処理を書くこともできます！ テキストごとに基準点は変えられる のでご安心を！

2-4. その他小技

シェーダーには、この記事では紹介しきれないほどまだまだ様々な機能が備わっています。詳しい解説は省きますが、こんなのも作れるんだよ！というものをいくつか紹介してみます。

シェーダーに使われている.vshや.fshでは、sinやcosのような三角関数やGameTimeという変数など、色々なものを使うことができます。
GameTimeは、「ワールドができてからのtick数が記録されている「gametime」を24000で割った余りをさらに24000で割ったもの」です。つまり、1200秒周期で0.0から1.0まで増加する変数 ということ。

ということで、sinとGameTimeの２つを使ってこんなものを作ってみました。
今回はY座標に代入しているのでそのまま石がsin波を描いていますが、例えば文字の透明度に代入すれば、冒頭の勝利演出にあった「＜ スニークで結果を閉じる ＞」のように 滑らかに文字を点滅させる ことができます。

また、シェーダーを使って「ノイズ」を作ることもできます。

⇧ノイズあり。表面がザラザラしてます。

⇧ノイズなし。つやつや。

具体的なコードが見たい方がいるかもしれないので、念の為載せておきます。

リソースパック（クリックで開閉）

minecraft\shaders\core\rendertype_text.vsh

#version 150

#moj_import <fog.glsl>

in vec3 Position;
in vec4 Color;
in vec2 UV0;
in ivec2 UV2;

uniform sampler2D Sampler2;

uniform mat4 ModelViewMat;
uniform mat4 ProjMat;
uniform int FogShape;

uniform float GameTime;

out float vertexDistance;
out vec4 vertexColor;
out vec2 texCoord0;

out float depthLevel;

out vec3 ColorValue;

void main() {
    depthLevel = Position.z;
    vec3 pos = Position;

    // 透明度だけ引き継いだ白色
    vec4 white = vec4(1.0, 1.0, 1.0, 1.0);
    white.w = Color.w;

    // RGBを整数値で取得
    ColorValue = vec3(round(Color.r * 255.0), round(Color.g * 255.0), round(Color.b * 255.0));

    if (ColorValue.r == 1.0 && depthLevel == 2400.12) {
        // title
        vertexColor = white * texelFetch(Sampler2, UV2 / 16, 0);

        gl_Position = ProjMat * ModelViewMat * vec4(pos.x, pos.y + 40.0, pos.z, 1.0);
        if (ColorValue.b == 8.0) {
            gl_Position.x -= 1.0;
            gl_Position.y += 1.0;
        } else if (ColorValue.b == 9.0) {
            // GameTimeを3秒周期で0~239の変数に変換
            int i = int(GameTime * 96000) % 240;
            // offset.xは-1.0~0.99ぐらい、offset.yは0~4πのsinを3秒周期で
            vec2 offset = vec2((i / 120.0 - 1.0), sin(i * 3.14159265 / 60));
            gl_Position.x += offset.x;
            gl_Position.y += offset.y * 0.8;
        }
    } else {
        // その他
        vertexColor = Color * texelFetch(Sampler2, UV2 / 16, 0);
        gl_Position = ProjMat * ModelViewMat * vec4(pos, 1.0);
    }

    vertexDistance = fog_distance(pos, FogShape);
    texCoord0 = UV0;
}

minecraft\shaders\core\rendertype_text.fsh

#version 150

#moj_import <fog.glsl>

uniform sampler2D Sampler0;

uniform vec4 ColorModulator;
uniform float FogStart;
uniform float FogEnd;
uniform vec4 FogColor;

uniform vec2 ScreenSize;

in float vertexDistance;
in float depthLevel;
in vec4 vertexColor;
in vec2 texCoord0;

in vec3 ColorValue;

out vec4 fragColor;

void main() {
    vec4 color = texture(Sampler0, texCoord0) * vertexColor * ColorModulator;

	if (color.a < 0.1) {
		discard;
	}

	// titleの影を消す
	if (ColorValue.b == 2 && depthLevel == 2400.00) {
		discard;
	}

	if (ColorValue.g == 1 && depthLevel == 2400.12) {
		// ノイズを生成して、元のテクスチャに足す
		vec2 uv = gl_FragCoord.xy / ScreenSize.xy / 10.0;
    	float noise = fract(sin(dot(uv.xy, vec2(100.001, 77.7777))) * 12345.6789012);
		color = color + vec4(vec3(noise) * 0.5, 1.0);
	}

	fragColor = linear_fog(color, vertexDistance, FogStart, FogEnd, FogColor);
}

minecraft\shaders\core\rendertype_text.json

{
    "vertex": "minecraft:core/rendertype_text",
    "fragment": "minecraft:core/rendertype_text",
    "samplers": [
        { "name": "Sampler0" },
        { "name": "Sampler2" }
    ],
    "uniforms": [
        { "name": "ModelViewMat", "type": "matrix4x4", "count": 16, "values": [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ] },
        { "name": "ProjMat", "type": "matrix4x4", "count": 16, "values": [ 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0, 0.0, 0.0, 0.0, 0.0, 1.0 ] },
        { "name": "ColorModulator", "type": "float", "count": 4, "values": [ 1.0, 1.0, 1.0, 1.0 ] },
        { "name": "FogStart", "type": "float", "count": 1, "values": [ 0.0 ] },
        { "name": "FogEnd", "type": "float", "count": 1, "values": [ 1.0 ] },
        { "name": "FogColor", "type": "float", "count": 4, "values": [ 0.0, 0.0, 0.0, 0.0 ] },
        { "name": "FogShape", "type": "int", "count": 1, "values": [ 0 ] },
        { "name": "GameTime", "type": "float", "count": 1, "values": [1.0] },
        { "name": "ScreenSize", "type": "float", "count": 2, "values": [ 1.0, 1.0 ] }
    ]
}

⇧しれっと新しいファイルが出てきましたが、これは特に解説することも無いのでそのままコピペして使ってください。GameTimeとノイズ生成の際に使ったScreenSizeを使うために必要なので、

{ "name": "GameTime", "type": "float", "count": 1, "values": [1.0] },
{ "name": "ScreenSize", "type": "float", "count": 2, "values": [ 1.0, 1.0 ] }

というのを追記しています。

minecraft\font\test2.json

{
    "providers": [
        {
            "type": "space",
            "advances": {
                "あ": -100
            }
        },
        {
            "type": "bitmap",
            "file": "block/stone.png",
            "ascent": 16,
            "height": 16,
            "chars": ["石"]
        },
        {
            "type": "bitmap",
            "file": "block/tnt_side.png",
            "ascent": 16,
            "height": 16,
            "chars": ["T"]
        },
        {
            "type": "reference",
            "id": "default"
        }
    ]
}

⇧そしてしれっとTNTのテクスチャも追記してます。

実行したコマンド（クリックで開閉）

sin波を描く石

/title @s title {"text":"石","font":"test2","color":"#01FF09"}

TNT：ノイズあり

/title @s title {"text":"T","font":"test2","color":"#01010A"}

TNT：ノイズなし

/title @s title {"text":"T","font":"test2","color":"#01000A"}

3. なんか作ってみようぜ！

これで技術の解説は終わりです。ということで、今得た知識を使って何か作ってみましょう！！！今回は例として「画面左上に時計を表示するデータパック」を作ってみようと思います！

できました。完成図がこちら⇩

もちろんビデオ設定を変えたりしてもへっちゃら。

細かい解説はここではしませんが、データパックとリソースパックはダウンロードできるようにしたので、ぜひダウンロードして色々いじってみてください。CC0ライセンスで配布しているので、改造も再配布もなんでも大丈夫 です。

⇩ ダウンロードリンク ⇩
>> データパック <<
>> リソースパック <<

時計がチカチカする場合は、/title @s times 0 100 0を再度実行してみてください！

ただやっぱりここに一切解説を書かないのもどうなんだ？と思ったので、本当にざっくりですが何をやったのか書いておきます。

リソースパック：シェーダー部分はさっきとほぼ同じで、画面左上に移動する処理。フォントに各時計の画像に対応するように文字を登録。

データパック：あらかじめ時計の画像に対応する文字を入れたリストをstorageで用意しておく。現在時刻を取得（/time query daytime）して、マクロを使ってリストの何番目をtitleで表示するかを指定。

...という感じです。ちゃんと解説するってなるとマクロの解説とかからしなきゃいけなくなって収集つかなくなるのでこのくらいで、、。

余談ですがマイクラの「時計」ってテクスチャが切り替わる間隔均等じゃないんですね、、。まぁでもそこは今回の趣旨と違うと思うので、均等だってことにして作っちゃいました。

おわりに

長い長いこの記事もようやく終わりです。ここまで読んでくれてありがとうございました。ホント、読む方も疲れたよね。最後なのですこ～しだけ喋りたいことを喋ろうと思います。

titleコマンド、意外と奥が深かったんじゃないでしょうか？？私が始めてtitleコマンドでGUI的なものを作ったのは、過去のツイートを見る限り約4年前、、、え。4年前？？？？まぁ、良いでしょう。ともかく約4年間のんびりとコマンドで遊び続けて得た知識とか技術とか、title関連のそういったものはほとんどこの記事に書いたつもりです。まぁそのせいでこの文量なわけですが、、。結構削ってこの文量なので許してほしいです。

ここまでこの記事を読んで、実践してくれたあなたはきっとGUIマスターになっていることでしょう。この記事の中で、何か一つでも新しい発見があればとても嬉しいです。
それではまた、どこかでお会いしましょう！！

.........最後に宣伝とかしても許されるかな。冒頭に載せたリバーシの配布マップが気になるよ～！って方はぜひ！！！！！！！⇩⇩⇩