【ase2ttf】Asepriteでドット絵からフォントを作ろう！

ドット絵のようなレトロなデザインを手掛けていると、その雰囲気に合ったフォントが見つからないことがよくあります。そんなとき、もし自分でフォントを作ることが出来たら素晴らしいと思いませんか？

というわけで、ase2ttfというWebサービスを作りました！これを使うことで、ドット絵から簡単にフォントを作ることが可能になります！

ブラウザ上で動作するため、専用のソフトを購入することなくフォント制作が可能になります！

また、一般的なフォント制作ソフトとは異なり.asepriteからの変換に特化した設計になっているため、Asepriteさえ使えれば複雑な操作を覚える必要はありません。いくつかの設定項目を入力するだけで、一瞬でフォントが完成します！

そのため、ase2ttfを使うにはAsepriteが必須となります。ただAsepriteはドット絵制作のためのツールとして非常に素晴らしいツールなので、この機会にぜひ購入してみることをお勧めします。

 フォントを作ってみよう

というわけで、試しに簡単なフォントを作ってみましょう。以下のような数字だけのフォントをase2ttfで作ります。

Asepriteで文字を書く

まずはAseprite側で利用する文字を書いていきましょう。今回は6×8サイズを横に並べる形で作っていくため、横幅60px・高さ8pxで作成しましょう。

また、Settings > Backgroundから背景のチェック柄を文字サイズに合わせて変更しておくと作業がしやすくなります。ついでにこちらも設定しておきましょう。

準備が整ったら、早速文字を書いていきましょう。左から0123456789の順番でドット絵を打っていきます。

完成したらこれをase2ttfにアップロード…する前に済ませておかなければならない準備が1つだけあります。それは文字コードの設定です。

コンピューターは文字を文字コードと呼ばれる数値で管理しています。文字コードには様々な種類がありますが、ase2ttfでは最も一般的な文字コードであるUnicodeというものを利用しています。

当然フォントを作る際には、各文字の情報と文字コードを一致させる必要があります。ase2ttfではこれをレイヤー名で指定します。

上の画像のように、レイヤー名を左上の位置にある文字のUnicodeで指定します。これを設定しておけば、あとはase2ttfが順番に文字コードを割り当ててくれます。

もちろん「英数 + かな」のような開始コードが複数あるフォントの場合は、それぞれ別々のレイヤーを利用することができます。また、U+で始まらないレイヤーは無視されるため、別のレイヤーにガイド用の線などを引いておくこともできます。

ase2ttfでフォントを作成する

それでは、作ったAsepriteファイルからase2ttfを用いてフォントを作成していきましょう！

まずはase2ttf.comにアクセスし、画面左側に作ったAsepriteファイルをアップロードします。

続いて画面左側の項目を入力していきます。各項目の説明は以下の通り。

• Copyright … フォントの著作権の情報です。"© [西暦] [名前]"のような形式で入れておくと良いでしょう。

• Font Family … フォントの名前を入力します。

• Font Subfamily … RegularやLight、Extra Boldなどのフォントの太さに応じたスタイル名を入力します。

• Font Weight … フォント内部で保持される太さの情報です。ase2ttfではFont Subfamilyの情報から自動で算出されるので、基本的には空欄でOKです。

• Version … フォントのバージョン情報です。"Version [Major].[Minor]"のような形式であることが多いですが、そうでなくても問題ありません。

• Glyph Size … 1文字あたりのサイズです。今回は6×8サイズであるため、Xに6、Yに8を指定します。

• Trim … これにチェックを入れると、横方向の空白を自動でトリミングしてくれます。

• Trim Padding … Trimが有効である場合に自動で挿入される空白の大きさです。

• Line Gap … 行間のサイズを指定できます。

• Baseline … フォントの基準となる高さの位置です。

• Underline Position … 文字に下線が引かれる場合の位置です。Baselineからの相対位置で指定します。

• Underline Thickness … 文字の下線の太さです。

設定できる項目が多いですが、基本的にはCopyrightとFont Family、Version、Glyph Sizeの4つだけを埋めておけばOKです。他の項目は必要に応じて追加すればよいでしょう。

設定が終わったら、右下の"Download .ttf file"と書かれたボタンを押すことで、作成されたフォントが.ttf形式でダウンロードされます。これでフォントは完成です！

おわりに

以上でase2ttfの使い方の説明は終わりです。かなり簡単にフォントが作れたのではないでしょうか…？

より実践的なフォント作成のTipsについては、「マルモニカ」などの数々のフリーピクセルフォントを手掛けている患者長ひっくさんによる以下の記事が参考になります。ゲーム開発等でいつもお世話になっております…

ase2ttfのコンセプトは上の記事でも使われているPixelTypeというソフトにインスパイアされています。PixelTypeはSteamで販売されている有料のソフトですが、透過pngからフォントを作成できるため、Asepriteをお持ちでない方はこちらもおすすめです。

ase2ttfは私、nuskeyによって無償で運営されているサイトです。もしase2ttfが気に入っていただけたなら、Ko-fiから寄付をいただけると非常に嬉しいです！

https://ko-fi.com/nuskey8

「ase2ttfでフォントを作ったよ！」「不具合を見つけたよ！」というようなコメントがあれば、記事へのコメントやDMなどで教えていただけると喜びます！また、近いうちにサイト内にショーケースのページを追加しようと考えているため、もし掲載してもいいよ！という場合はその旨も追記していただけると嬉しいです…！

というわけで、新しいピクセルフォント作成サービス「ase2ttf」をよろしくお願いします！ピクセルフォント制作を楽しんでいきましょう〜！

追記:
ase2ttfのサイト用に作成したフォント「ase2ttf Font」をBoothとGitHubで配布します！こちらも是非使ってみてください…！