(追記 2024-09-18)この記事の最後にあるように商用フリーのフォントを使わせてもらうことにしたので独自フォントは一旦諦めます。
160×160ドットの自作ゲームで自作ピクセルフォントを使いたい。ということで見た目上1文字あたり3×5ドットな自作フォントを作ることにしよう。今回はそのための検証。
作ったttfのファイルをUnityのアセットに置いた。

TextMeshProの設定
Unityでフォントを使うときはTextMeshProの設定をしないといけないとか。とりあえずメニューのWindow -> TextMeshPro -> Font Asset Creator
でFont Asset Creator
を開く。

Select Font Assetで設定したいフォントを選んだ。Generate Font Assetをクリック。レンダーモードがたくさんあるのだが例えばSDFAAだとすごくぼやけてしまった。SMOOTH_HINTEDだとパキッとして良さそうなのでこれを選んでみた。「Save as…」でAssetとしてフォントと同じ場所に保存した。
Unityで自作フォントを使ってみる
ヒエラルキーで右クリックしてUI -> TextMeshProを選ぶ

最初の状態。ゲームの解像度を160×160にしてるからテキストがでかい。

Font Assetのところに自分のフォントを設定してみる

一旦動作テストとして、フォントの中の文字をC、A、Tの3つしか作ってないのでそれを表示させると。。
フォントサイズ36。クッキリしてるけどゲーム画面に対してデカすぎる。

一方でフォントサイズ10だとすごくぼやける

あと作ったはずの大文字Tが表示されない。色々問題ありそう。
ChatGPTに聞いてみた。
仕方がないので最近異常に賢くなってるChatGPTに聞いてみた。
「サンプリングサイズ大きくしろ」
だって。
もう一度フォントアセットを作り直してみる。

Custom Sizeを押してみると「179」と表示された。ChatGPT曰くこの数字の時点でめちゃくちゃ高い値らしい。
あとAtlas Resolutionも高くするべきって言ってたから512から1024に変更した。というか元々3文字しか入ってないから十分解像度高いはずなんだけどな。。
あとフォントにテクスチャが設定されているみたい。そこのフィルターモードをBilinearからPointに変えたらいいと言われ変えたけどあまりこれも意味がない。


レンダリングモードはDistance Field 16ビットを薦められた。おそらく SDF16のことかと。やってみたけど結果は変わらず。変わらなかったことをChatGPTに伝えるも今度はサンプリングサイズが高すぎるからいけないと真逆のことを言われる始末。やってみて少しマシになった感じもしたけれど何か根本的に方法を間違えている気がする。
ChatGPTから再び回答をもらいました🛀
以下の通り。
I see, if you want to create a Game Boy-style game with pixel art and have the text reflect that style, the approach to fonts and resolution should be slightly different.
### 1. **Use a Pixel Font**
The best way to achieve a pixel art style game is by using **pixel fonts**. Pixel fonts are made up of small, grid-like dots that make them ideal for low-resolution, non-blurry displays. Using these will ensure the text has a pixelated, retro look.
- You can either download pixel fonts for Unity or create your own.
- Pixel fonts are not subject to resolution scaling or smoothing, making them perfect for maintaining that pixel art aesthetic.
### 2. **Setting Up TextMesh Pro**
To display pixelated text using a pixel font in TextMesh Pro, you'll need to adjust some settings:
1. **Font Size and Scaling**
Set the font size to a small value that matches your resolution, such as **10 or 8**, ensuring the pixel font is displayed properly.
2. **Set the Filter Mode to Point**
Set the font's filter mode to `Point (no filter)` to prevent blurring around the edges of the text. This will make the characters crisp and clear.
3. **Disable Anti-Aliasing**
Anti-aliasing smooths out text edges, which can ruin the pixelated effect you're aiming for. Be sure to disable anti-aliasing.
### 3. **Adjust Game Resolution and Canvas Settings**
- Since your game resolution is 160x160 pixels, you'll need to match the scaling and display to this low resolution. Set the `UI Scale Mode` in the `Canvas` to **`Constant Pixel Size`** to manage the game screen and font sizes in pixel units.
### 4. **Create Your Own Font**
If you're making your own pixel font, keep the resolution of each glyph (character) small, like 16x16 or 8x8 pixels, and create the text pixel by pixel. Once the font is created, you can use it in TextMesh Pro.
### 5. **Maintain the Pixel Art Aesthetic**
To maintain the overall pixel-based design of the game, change the camera settings and sprite filtering to `Point`, ensuring the entire game, including text and sprites, maintains a consistent pixelated appearance.
### Conclusion
To create a pixel art-style game, use a pixel font, and set up TextMesh Pro correctly (with Point filtering, anti-aliasing off, and proper font size). This ensures that the text remains sharp and fits the retro, pixelated style.
Let me know if you need further adjustments!
ドット絵スタイルのゲームを作りたいのであれば、フォントや解像度に対するアプローチが少し違ってきます。ドット絵的なフォントを使うには、以下の方法が適しています。
### 1. **ピクセルフォントを使用**
ドット絵スタイルのゲームに最適な方法は、**ピクセルフォント**を使うことです。ピクセルフォントは、各文字がドットで構成されており、低解像度で滲みなく表示されます。これを利用することで、テキストをドット絵風に見せることができます。
- Unity用のピクセルフォントをダウンロードするか、自作することが可能です。
- ピクセルフォントには、解像度の変更やスムージング処理が行われないため、理想的なドット絵効果が得られます。
### 2. **TextMesh Proでの設定**
TextMesh Proにピクセルフォントを使用してドット絵風の文字を表示させるためには、いくつか設定を変更する必要があります。
1. **フォントサイズとスケーリング**
フォントサイズを、解像度に見合った大きさに設定してください。例えば、**フォントサイズを10や8などの小さなサイズ**にし、ピクセルフォントが正確に表示されるようにします。
2. **Point Filterに設定**
フォントのフィルタリング設定を`Point (no filter)`にします。これにより、文字のエッジが滲むことなく、くっきりと表示されます。
3. **アンチエイリアスを無効化**
アンチエイリアスが有効になっていると、文字が滑らかにされてしまい、ピクセルフォントの美しさが失われます。アンチエイリアスは必ず無効にしてください。
### 3. **ゲームの解像度とキャンバスの設定**
- ゲームの解像度が160x160ピクセルであれば、その低解像度に合わせたスケーリングや表示方法を選ぶ必要があります。`Canvas`の`UI Scale Mode`を**`Constant Pixel Size`**に設定し、ゲーム画面とフォントのサイズをピクセル単位で管理します。
### 4. **自作フォントの作成**
自分でドット絵のフォントを作成する場合、文字の解像度(各グリフのサイズ)を16x16ピクセルや8x8ピクセル程度に設定し、それに合わせて1ドットごとに文字を作成します。フォント作成後は、TextMesh Proでそのフォントを使用することができます。
### 5. **ピクセルアート的な表現を維持**
さらに、ゲーム全体のアートスタイルもピクセルベースのデザインを維持するために、**カメラの設定やスプライトのフィルタリングも`Point`に変更**することで、全体的な一貫性を保つことができます。
### まとめ
ドット絵スタイルのゲームを作るには、ピクセルフォントを使い、TextMesh Proで適切な設定(Pointフィルタ、アンチエイリアスオフ、フォントサイズ調整)を行うことが重要です。
まだ検証が色々必要みたい。ちょっと出直します。
(20240917 追記)
こちらの素晴らしい8×8ドットの日本語フォントを使わせてもらうことにしました。