NegativeSpaceFontの敵、「テキストの背景」


:::note info
この記事は`Minecraft Java Edition 1.21.4`向けに作成されています。
:::

# NegativeSpaceFontの敵、「テキストの背景」
どうもこんにちは！クロスプです！
最近は`/title`コマンドにNegativeSpaceFontを汎用した制作物が非常に多くなりました。
そんな時、あなたは「**アクセシビリティ設定**」にこんな設定をがある事を知っているのでしょうか？

![hidetextbackground1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897459/6cc806d3-50bd-6e06-f2dd-832b5efb2d00.png)

この設定、「チャット」と「すべて」の2種類があるのですが、「すべて」を選択するとどうなるのでしょうか？

![hidetextbackground2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897459/22eb3618-f9a4-d764-160c-98203d6c6cd8.png)

こんな感じで、普段バックグラウンドがついていないアクションバーやアイテムも全てつくようになるんです。

これだけならまあやりたい人だけオンにすればいい設定なのですが、ここでNegativeSpaceFontを使うとどうなるのでしょうか。

![hidetextbackground3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897459/bff60170-1476-2ec7-501f-94b17fa06ed3.png)

こちら、NegativeSpaceFontやシェーダーを使ってアクションバーで上にいい感じの文字を表示させました。
このテキストの位置を上下に変更した方法は[ゆるふ🐺様](https://x.com/yuru_yurufu)の下記の記事を超参考にしてつくりました。まじで感謝してます。

https://qiita.com/Yuru-Yurufu/items/09b949cce51d84bce4f4

さて本題に入りましょう。

ここの下にある「**黒いアクションバーのバックグラウンド**」を消したいのです。
`(わかりづらいけど上のバックグラウンドは自分で作った)`

![hidetextbackground4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897459/2fd12adb-394c-8337-01c1-ac0f42662bb9.png)

この背景を消したいのですが、リソースパックにテキストの背景なんていうテクスチャはありません。
ということは、ここはシェーダーにて制御されている事になります。こちらを今回消しましょう。

まずは`shaders`ファイルの`core`シェーダーに`rendertype_gui.json`を作成しましょう。
<details open><summary>minecraft:core/rendertype_gui.json</summary>

```json namespace:minecraft:core/rendertype_gui.json
{
  "vertex": "alpha_custom:text_background_delete_gui",
  "fragment": "alpha_custom:text_background_delete_gui",
  "samplers": [],
  "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
      ]
    }
  ]
}
```
</details>

ここにある`vertex`と`fragment`の値はそれぞれ`.vsh`と`.fsh`の参照場所となります。

今回`alpha_custom:text_background_delete_gui`を参照していますので、
`assets/alpha_custom/shaders/`に
`text_background_delete_gui.vsh`と`text_background_delete_gui.fsh`を作成します。

内容は以下のファイルにします。

<details open><summary>alpha_custom:text_background_delete_gui.vsh</summary>

```hlsl namespace:alpha_custom:text_background_delete_gui.vsh
#version 150

in vec3 Position;
in vec4 Color;

uniform mat4 ModelViewMat;
uniform mat4 ProjMat;

//Z座標の入手
out float depthLevel;

out vec4 vertexColor;

void main() {
  //Z座標をデータに写す
  depthLevel = Position.z;

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

  vertexColor = Color;
}
```

</details>

<details open><summary>alpha_custom:text_background_delete_gui.fsh</summary>

```hlsl namespace:alpha_custom:text_background_delete_gui.fsh
#version 150

in vec4 vertexColor;
//Z座標の入手
//2200.00=アクションバーのバックグラウンド(アクセシビリティ設定有効時)
//2400.00=タイトルとサブタイトルのバックグラウンド(アクセシビリティ設定有効時)
in float depthLevel;

uniform vec4 ColorModulator;

out vec4 fragColor;

void main() {
  vec4 color = vertexColor;
  if (color.a == 0.0) {
    discard;
  }
  else if (depthLevel == 2200.0) {
    //アクションバーのバックグラウンドを無効化
    discard;
  }
  else if (depthLevel == 2400.0) {
    //タイトルとサブタイトルのバックグラウンドを無効化
    discard;
  }
  fragColor = color * ColorModulator;
}
```

</details>

この3つのファイルを作成するだけで、アクションバーとタイトル／サブタイトルの背景を消すことが出来ます。

![hidetextbackground5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3897459/3a389bc5-3a7c-4911-e5ea-f2621053554c.png)

これで超すっきりしました。

NegativeSpaceFontや上下にテキストを移動するときにはこのファイルもいれておきましょう。

超簡単なコードですが、GLSL／HLSLの仕様が自分もよくわかっていないので、為になったのではないでしょうか。

それではまたどこかでお会いいたしましょう。バイバイ！