◆ Cocos Creatorでスーパーマリオみたいな2Dアクションゲームを作ります。◆
◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
◆ 最初から読みたい場合はココをクリックして下さい。◆
こちらの記事の続きです。
今回は、ゲームのスコア表示等に使うビットマップフォントを作成します。
ビットマップフォント作成ソフトを使えば、アウトラインフォントをベースにして装飾(塗りつぶし・ふち取り・影付け)を加えたフォントを簡単に作ることが出来ます。
作業は『アウトラインフォント』と『ビットマップフォント作成ソフト』の入手から行います。どちらも無料です。
作成したビットマップフォントはCocos CreatorのLabelコンポーネントで使用することが出来ます。
【 注意 】Cocos Creator v2.3.3は、VS Codeのデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
目次
使用環境
私が使用している環境です。
- OS:Windows 10 Home
- ブラウザ:Google Chrome (64-bit)
- 開発環境:Cocos Creator v2.3.2
- コードエディタ:Visual Studio Code(以下VS Code)
- Tiled Version 1.3.4
- ビットマップフォントエディタ:Sprite Font Builder Version 0.8.0
アウトラインフォントを入手する
アウトラインフォントは、CADのような形状のデータのフォントです。『MS 明朝』等のフォントはアウトラインフォントです。
いろいろなデザインのフォントが有償・無償で公開されているので、良い感じのフォントを探してビットマップフォントのベースにします。
フォントによって含まれる文字が違います。日本語に対応していないものも多くあります。
フォントファイルをダウンロードする
今回は、『M+ FONTS』というフリーのアウトラインフォントを使わせて頂きます。
- 下記の公式配布サイトを開きます。
osdn.net
- 『mplus-TESTFLIGHT-063a.tar.xz』をクリックします。
『mplus-TESTFLIGHT-063a.tar.xz』がダウンロードされます。
ブラウザで作業
解凍ソフト『7-Zip』をインストールする
『mplus-TESTFLIGHT-063a.tar.xz』を解凍するために『7-Zip』をインストールします。
『7-Zip』は、『XZ』形式と『TAR』形式等、様々な圧縮ファイルに対応したフリーの解凍ソフトです。
- 下記のサイトを開きます。
sevenzip.osdn.jp
- 『ダウンロード』をクリックします。
『7z1900-x64.exe』がダウンロードされます。
- 『7z1900-x64.exe』をダブルクリックして実行します。
- 『はい』をクリックします。
- インストール先を選択して、『Install』をクリックします。
- 『Close』をクリックします。
ブラウザで作業
フォントファイルを解凍する
『7-Zip』を使ってフォントファイルを解凍します。
『mplus-TESTFLIGHT-063a.tar.xz』は2回解凍する必要があります。
ビットマップフォント作成ソフトをインストールする
ビットマップフォント作成ソフトの『Sprite Font Builder』をインストールします。
インストールといっても解凍したフォルダを好きな場所に置くだけです。
- 下記のサイトを開きます。
www.johnwordsworth.com
- サイト内の『Sprite Font Builder Version 0.8.0 (Win 32)』をクリックします。
『spritefontbuilder_win32_0_8_0.zip』がダウンロードされます。
- 『spritefontbuilder_win32_0_8_0.zip』を右クリックして、『7-Zip』→『"spritefontbuilder_win32_0_8_0¥"に展開』をクリックします。
- 『spritefontbuilder_win32_0_8_0』を好きなフォルダに移動します。
ブラウザで作業
ビットマップフォントを作成する
入手したフォントをベースにして、ビットマップフォントを作ります。
実際に使う文字だけに絞ることで、フォントのサイズが小さくなります。
- 『spritefontbuilder_win32_0_8_0』フォルダの『SpriteFontBuilder.exe』をダブルクリックして実行します。
Sprite Font Builderで作業
- 『Input Settings』を下図のように設定します。
- Font:M+ 1c black
先程入手したフォントです。
- Size:32
使用する最大サイズに合わせました。
- Sprite Font Characters:0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
使わない文字を省くことでサイズを小さくすることが出来ます。
- Font:M+ 1c black
- 『Effects』で、『Fill』を下図のように設定します。
- 『Effects』で、『Stroke』を選択して『Delete Effect』をクリックして削除します。
下図のようなフォントが作成されます。
今回はシンプルなものにしました。
ビットマップフォントを出力(エクスポート)する
プロジェクトフォルダの『assets/font』フォルダに、『*.fnt』ファイルと『*.png』ファイルを作成します。
- 『Export Setting』の『Path』の『...』をクリックします。
- プロジェクトフォルダのassetsフォルダで、『新しいフォルダー』をクリックして"font"フォルダを作成します。
- 『ファイル名』に"UI"を入力して、『保存』をクリックします。
- 『Export』をクリックします。
- 『Save』をクリックします。
- 『ファイル名』に"UI"を入力して、『保存』をクリックします。
再編集する場合のために保存しました。
Sprite Font Builderで作業
今回はここまでです。お疲れさまでした。
続きは、こちらの記事です。
補足:グラデーションを使ったビットマップフォントを作成する
上記で作成したビットマップフォントはシンプルなものでした。
『Sprite Font Builder』は、グラデーションや複数の枠線を使用したビットマップフォントも作れます。
せっかくなので作成方法を説明します。
- 『Input Settings』を下図のように設定します。
日本語を使う場合は、選択したフォントが日本語入力に対応している必要があります。
- 『Effects』で、『Fill』を下図のように設定します。
- 『Add Stroke』ボタンで、『Stroke』を2つ追加します。
- 『Effects』で、『Stroke』を下図のように設定します。
『Effects』でドラッグ&ドラッグで順序を入れ替えられます。
下図のようなビットマップフォントが作成されます。
Sprite Font Builderで作業