漢字をドット絵で表現したいけどできるだけ楽したかった

:::note warn
自分で見返すつもりすらなくコードを書いていたので、命名やコメントなどおかしな点があると思います。
ご使用される場合は適切に修正して下さい。
:::

## 動機
先日、[Python向けレトロゲームエンジンPyxel](https://github.com/kitao/pyxel)の開発者の[記事](https://qiita.com/kitao/items/eae53dd47c663b497352)に触発され、個人開発の練習もかねてPyxelでミニゲームの開発を行いました。
その中で、漢字をドット絵で表現するためにやったことを記事にしておきます。
(pyxelに関する内容はほとんどありません。開発中参考にさせていただいた記事は最後にまとめてあります。)

最終的に作ったものは[こちら](https://ykhotate.github.io/number-push/)です。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/3979982/b2747559-12a2-2b53-37e2-093670a97271.png)

## 簡単にゲームの概要
ゲームのアイディアは子供の頃にハマっていたパワポケ8のミニゲームを参考にしました。
1から16までの数字を順番に素早く押すだけのゲームです。
ローマ数字と漢数字を1~16まで用意したかったのですが、32×32のドット絵を32枚用意する段階で心が折れ、早々に諦めかけてました。

## 文字をドット絵として出力する方法を探る旅
どうしようかと悩んでいるふりをしながら数日サボっていたのですが、[いい感じのサイト](https://e-tool.jp/%e3%83%89%e3%83%83%e3%83%88%e3%83%9e%e3%83%88%e3%83%aa%e3%82%af%e3%82%b9%e3%81%ab%e5%a4%89%e6%8f%9b/)を発見してやる気を取り戻しました。
ので、chatGPTさんに[「テキスト文字列をドットマトリクスに変換する方法」](https://chatgpt.com/share/677d26d6-9cac-8000-b048-3e42d6d55d3f)と聞きました。
その結果、[Pillow](https://pillow.readthedocs.io/en/stable/)というライブラリを使うといい感じだよ！と教えてもらえたので、サンプルコードをベースに32種類の文字を出力しました。
(pyxelのエディタ内でドット絵を修正したかったため、8種類を4回に分けて出力しました)

以下のサンプルコードでは、漢字二文字を1枠に収めるため悪戦苦闘している無様な姿が見られます。

```python dot.py
from PIL import Image, ImageDraw, ImageFont

def render_text_to_matrix(text, font_path="YuGothM.ttc", font_size=8):
    font = ImageFont.truetype(font_path, font_size)
    # 文字列を描画
    img = Image.new("1", (len(text) * font_size, font_size), color=0)
    draw = ImageDraw.Draw(img)
    draw.text((0, 0), text, font=font, fill=1)

    # ドットパターン取得
    pixels = img.load()
    matrix = []
    for y in range(img.height):
        row = []
        for x in range(img.width):
            row.append("f" if pixels[x, y] else "0")
            # 行の形式を調整: 先頭に '[', 末尾に ']', 文字の間に ','
        formatted_row = f"[{','.join(row)}],"
        matrix.append(formatted_row)

    return "\n".join(matrix)

def save_to_file(matrix, file_path="output.txt"):
    with open(file_path, "w", encoding="utf-8") as f:
        f.write(matrix)
# サンプル実行
matrix = render_text_to_matrix("九十閂仁仁泗伍鮫", font_size=32)
save_to_file(matrix, "output.txt")
print("結果を 'output.txt' に書き出しました。")
```

## その後
出力した`.txt`ファイルからPyxelエディタで使える`.pyxeres`ファイルに変換する必要があったり、「十一」を合わせて一文字分の幅に直すなどの微調整が必要だったりと大変だったのですが、めんどくさいと思ったらAIに聞いて勉強すればよかったなと思いました。
お見苦しいソースコード(かつ、無駄なコードも置きっぱなし)ですが、全体は以下から見えます。
[github](https://github.com/ykhotate/number-push)

## 感想コーナー
私の作成したものは開始画面がなかったり、ミスした時、クリアした時の演出がなかったり、ゲームとしては不完全だと思っています。
ただ、今回の開発の目的がPyxelで作成したゲームを公開することだったので、これでヨシとしています。
もう演出にこだわるモチベは無いですが、よく見かける王様が「HELP ME！」と叫んでいるやつとかを参考にすればよかったなぁとか思います。

## とてもためになる先人の記事
この記事を読むより数百倍の意義がある、私の開発を助けてくださった記事達です。
ここまで読んでしまったあなたは以下の記事を読んで、無駄にしてしまった時間を取り戻しましょう！

Pyxelの開発者様の記事

https://qiita.com/kitao/items/eae53dd47c663b497352

Pyxelおもしろそう！となった記事

https://qiita.com/rwatanab1999/items/d5c0bb876f0b44cac2f0

開発環境を整える際に助けられました

https://cpp-learning.com/pyxel_day1/

画像関係の処理に苦戦しているときに助けられました

https://kinutani.hateblo.jp/entry/2022/10/24/161404

GithubPagesで公開する際に参考した作者様達

https://qiita.com/sugijotaro/items/f55d1d955cdda3630797

https://note.com/koide_mizu1433/n/na465e518f4c4

`.pyxres`ファイルをエディタ以外から弄りたいときに助けられました
(私が実際に`.zip`に変えて解凍した際はデータ形式が異なっていたので、バージョン情報などに留意してください。)

https://qiita.com/sejiijes/items/63194faf76198be962bf