cheka.jp 超不定期で更新する写真達。お口直しにどうぞ。

等幅のビットマップフォントを無料で作成する

ミニゲームの開発中ですが、スコアやちょっとした表示で綺麗なフォントが使いたかったのでビットマップフォントを作成して利用していました。
通常の表示は問題ないのですが、頻繁に更新が行われるスコアなどでフォントが等幅じゃないとちょっと気になります。

ということで等幅でビットマップフォントを作成してみました。

等幅ビットマップフォントにチャレンジ

スコア用なので0〜9までの数字で準備します。
書き出しツールはshoeboxを利用します。
素材の準備はPhotoshopで行って、pngの後処理をfireworksで行いましたが、ツールは何でも良いと思います。

素材準備

Photoshopで準備します。
気に入ったフォントで0〜1までのテキストレイヤーを準備します。

フォントの準備

等幅でフォントを作成するために、それぞれの数字に背景を準備します。
*見やすいようにキャンパスに色をつけてます

フォントの下地

ビットマップの書き出し

pngかpsd形式のファイルをShoeBoxにドラッグアンドドロップします。
画像が読み込まれた後に設定を行います。

セッティング

0〜9のビットマップフォントを作成するので文字設定を行います。

文字の設定

設定が完了したら保存してファイルを書き出しましょう。
pngファイルが書き出されるので白ぬきします。

pngの調整

Photoshopでも良いですが、pngの編集はFireworksに紐づけているのでFireworksで作業します。
アルファチャンネルへの変換だけなので他のツールでも問題なく出来ると思います。

アルファチャンネルに変換

分かりやすく並べてみました。

白抜き

日本語で実験したら問題なく使えそうだったので、ちょっとした文字組程度であれば積極的に利用したいですね!

Add a Comment

メールアドレスが公開されることはありません。