Calligraphrでゲームの独自フォントを作ってみる(今回はテスト)

上の画像は自作ゲームのサンプルだ。見てもらうとわかるようにドット文字のフォントがいる。サンプルのやつはPhotoshopで作っただけで、実際にはこういうフォントを用意しないといけないのだ。ここでは書き出すところまでやってみる。やり方が一度わかればペンで文字を書いたり、もっと凝ったものができるんじゃないかと思う。

試しに自作フォントを作れるらしいCalligraphrというWebサービスを使ってみることにした。フォント作成1種類なら無料でできるみたい?

CalligraphrのTEMPLATES選ぶ

Templatesタブの一覧から数字と英語が欲しいのでMinimal Numbersというのを選択。他の文字も追加できるみたいだけどこれだけあればおそらく十分だろう。終わったら「Donwload Template」をクリック

PNG形式を選んだ。どちらがいいかはわからない。サイズも低くしてみた。

ダウンロードした。

ふむ、これ自体が大きいQRコードになっているわけだな。んで要はここに重ねる形で自作文字を書いていってさっきのサイトにアップロードするとフォント形式のファイルが出力されるらしい。というわけでPhotoshopでダウンロードしたPNGを開いてフォントを乗っけていく。

フォントの制作に取り掛かろうとした時にふと思ったのだが、ゲームの解像度、最初は160×160ピクセルのゲーム画面にしてたんだけど、ゲームボーイぽくっていいかなって、しかし流石にそれだとコンピュータ上の画面だと小さすぎるから2×2ドットを1ピクセルということにして、つまり縦横の解像度を2倍にして320×320にした方がいい気がしてきた。なのでフォントも見た目上は3×5ピクセルなんだけど、実際は6×10ピクセルということになる。だけどそもそもフォントだから解像度とかいう概念ないのかな?やってみないとわからん。

試しにまずUnityでちゃんと意図した通り描画されるか知りたいからCとAとTだけ作って出力する。あとの文字は空白でエラーになりそうだから適当に何か塗る。

できた。C、A、T以外は虚無になってマウスクリックで打ち込んだ。

これをさっきのCalligraphrにアップロードする。MY FONTタブをクリック。

ポップアップが出たらChoose Fileをクリックしてさっき開いたファイルを選んでアップロードする。

プレビューが出たらメニューのBuild Fontをクリック

適当にフォントに名前をつける。終わったらBUILDをクリックして書き出し。

処理が終わったらttfとotfのファイルのダウンロードリンクが表示されるのでこれをダウンロードして完了となる。