カスタムフォントで彩を

[Minecraft Command Advent Calendar 2024](https://qiita.com/advent-calendar/2024/mccmd)の10日目の記事です。

:::note info
この記事はほぼリソースパックの話です。
1.21.4の情報です。(別のバージョンでも使える場合があります。)
:::
# はじめに
:::note warn
この記事での「カスタムフォント」はオリジナルフォントのことではなく、文字に画像やスペースを割り当てる技術のことを指します。
:::

## カスタムフォントって何?
フォントを利用してUnicodeの文字に画像やスペースを割り当てることができます。
### Unicodeとは
コンピュータ上で一貫して文字や記号など扱うために作られた文字コード標準規格のことです。WindowsやmacOs、Unixなどの様々なOSでサポートされています。
簡単に言うと文字や記号を16進数の数字に割り当てたものです。
ここでは詳しく説明しないのでより知りたい方は調べてください。
* 例
`U+0041` → `A`
`U+3042` → `あ`
`U+6F22` → `漢`

Unicodeには私用面(私用領域)と呼ばれる文字が割り当ていない文字の面があります。`U+E000` ~ `U+10FFFF`
そこに画像やスペースを割り当てられるのがカスタムフォントです。
# Fontフォルダ
` assets/namespace/font `内のjsonファイルでフォントが定義されます。
` assets/minecraft/font `内には特殊なフォントファイルがあります。
`defaut.json`
デフォルトで使用されるフォントです。
`uniform.json`
「Unicodeフォントを強制する」をオンにしたとき、使用されるフォントです。
他にもありますがこの2つを覚えておくといいでしょう。
**・ファイルの例**
`type`は割り当てるものの種類です。
```assets/namespace/font/test.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "namespace:font/test.png",
            "ascent": 8,
            "height": 9,
            "chars": [
                "\uE000"
            ]
        }
    ]
}
```

# カスタムフォント
実際にフォントに割り当てて行きましょう。
### デフォルトフォントファイルを使う方法
先ほどの挙げた特殊なフォントファイルで割り当てて行きます。
#### 画像を割り当てる
`bitmap`を使います。
```assets/minecraft/font/defaut.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "namespace:font/test.png",
            "ascent": 8,
            "height": 9,
            "chars": [
                "\uE000"
            ]
        }
    ]
}
```
`file`で画像を指定します。(`assets/namespace/textures`階層以下から記述)
`ascent`は縦方向の位置です。
`height`は縦方向の大きさです。任意で、デフォルト値は8です。

:::note warn
`ascent`＜`height`でなければならないです。
:::
下記のコマンドで表示できます。
```
/title @s title "\uE000"
```
![test.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/cd724668-4ec9-1379-7b20-149ee80fd3f8.png)

##### 複数割り当てる
```assets/minecraft/font/defaut.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "namespace:font/test_2.png",
            "ascent": 8,
            "height": 9,
            "chars": [
                "\uE001\uE002\uE003\uE004"
            ]
        }
    ]
}
```
画像ファイルの行のものをそれぞれ割り当てられます。
#### スペースを割り当てる。
`space`を使います。
このスペースは空白というより、文字の左右の移動と考えたほうが良いです。
```assets/minecraft/font/defaut.json
{
    "providers": [
        {
            "type": "space",
            "advances": {
                "\uE005":10,
                "\uE006":-10
            }
        }
    ]
}
```
`advances`で割り当てる文字を指定します。1つでもいいです。
`U+E005`で10ドット右に移動します。
`U+E006`で10ドット左に移動します。

### オリジナルフォントファイルを使う方法
`assets/namespace/font/test.json`に上記の方法と同様に記述すればいいです。

:::note warn
表示するとには、フォントnamespace:testを指定しないと表示されないです。
:::
```
/title @p title {"font":"namespace:test","text":"\uE000"}
```
この方法を使うと、リソースパック同士の競合が起こらず表示できます。
![2024-12-09_23.43.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/5c53349b-deb7-52f7-7acb-ced861985c34.png)

# 用例
### 出血表現
![2024-12-09_23.25.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/97f45a26-1934-4895-bf7c-8678a367f0a4.png)
半透明の画像を大きく表示しています。
```assets/minecraft/font/defaut.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "namespace:font/test.png",
            "ascent": 64,
            "height": 128,
            "chars": [
                "\uE007"
            ]
        }
    ]
}
```
```
/title @s title "\uE007"
```
画像を黒にすると、暗転などにも使えます。
### GUI
この画像をコンテナブロックの名前にします。
![gui.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/8a9a0edf-da12-6439-301c-3bbe2d00325b.png)

```assets/minecraft/font/defaut.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "namespace:font/gui.png",
            "ascent": 10,
            "height": 80,
            "chars": [
                "\uE008"
            ]
        },
        {
            "type": "space",
            "advances": {
                "\uE009":-8
            }
        },
    ]
}
```
```
/setblock ~ ~ ~ barrel{CustomName:'{"color":"white","text":"\\uE009\\uE008"}'}
```
![2024-12-09_23.45.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/1f21b088-dac9-ccb4-600f-3186b412c9df.png)

### アイコン
![2024-12-09_22.32.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3632861/0a06cf3c-19c9-3a2c-bf62-ea51a8dbc63a.png)
```assets/namespace/font/test.json
{
    "providers": [
        {
            "type": "bitmap",
            "file": "minecraft:gui/sprites/hud/armor_half.png",
            "ascent": 8,
            "height": 9,
            "chars": [
                "\uE00A"
            ]
        }
    ]
}
```
```assets/minecraft/lang/ja_jp.json
{
    "attribute.name.armor": "§f\uE00A§r防御力"
}
```
カスタムフォントは色の影響を受けるので`§f`を使って白にしています。
### カスタムパーティクル
`text_display`を使ってパーティクルを作れます。
書くと長くなるので他の方の記事を検索してみてください。
# 最後に
カスタムフォントの基礎について解説しました。
これを使ってデータパックを色鮮やかにしてみてください。