モーリーのメモ

アプリ開発等(プログラミング、CG作成)、興味を持ったことを実践してまとめるブログです。

モーリーのメモ

マリオみたいな2Dアクションゲームを作る! その12 ビットマップフォントを作成する:Cocos Creator

 ◆ Cocos Creatorスーパーマリオみたいな2Dアクションゲームを作ります。◆
 ◆ このシリーズの他の記事を見るには『PlatformerGame』タグをクリックして下さい。◆
 ◆ 最初から読みたい場合はココをクリックして下さい。◆
 
 こちらの記事の続きです。

 
 今回は、ゲームのスコア表示等に使うビットマップフォントを作成します。
 ビットマップフォント作成ソフトを使えば、アウトラインフォントをベースにして装飾(塗りつぶし・ふち取り・影付け)を加えたフォントを簡単に作ることが出来ます。
f:id:mmorley:20200509183006p:plain
 作業は『アウトラインフォント』と『ビットマップフォント作成ソフト』の入手から行います。どちらも無料です。
 作成したビットマップフォントはCocos CreatorのLabelコンポーネントで使用することが出来ます。
 
【 注意 】Cocos Creator v2.3.3は、VS Codeデバッグ実行でブレークポイントが機能しないバグがあので、v.2.3.2を使用して下さい。
 v.2.3.2は、Cocos DashboardのEditorのDownloadボタンからインストール出来ます。
 既存のプロジェクトのEditor Versionは、下図のように切り替えます。一度確認のメッセージが表示されます。
    f:id:mmorley:20200422191834p:plain

使用環境

 私が使用している環境です。

アウトラインフォントを入手する

 アウトラインフォントは、CADのような形状のデータのフォントです。『MS 明朝』等のフォントはアウトラインフォントです。
 いろいろなデザインのフォントが有償・無償で公開されているので、良い感じのフォントを探してビットマップフォントのベースにします。
 フォントによって含まれる文字が違います。日本語に対応していないものも多くあります。
 

フォントファイルをダウンロードする

 今回は、『M+ FONTS』というフリーのアウトラインフォントを使わせて頂きます。

    ブラウザで作業

  1. 下記の公式配布サイトを開きます。
    osdn.net
  2. 『mplus-TESTFLIGHT-063a.tar.xz』をクリックします。
    f:id:mmorley:20200508104345p:plain
    『mplus-TESTFLIGHT-063a.tar.xz』がダウンロードされます。

解凍ソフト『7-Zip』をインストールする

 『mplus-TESTFLIGHT-063a.tar.xz』を解凍するために『7-Zip』をインストールします。
 『7-Zip』は、『XZ』形式と『TAR』形式等、様々な圧縮ファイルに対応したフリーの解凍ソフトです。
 

    ブラウザで作業

  1. 下記のサイトを開きます。
    sevenzip.osdn.jp
  2. 『ダウンロード』をクリックします。
    f:id:mmorley:20200508115108p:plain
    『7z1900-x64.exe』がダウンロードされます。
     

    Windowsエクスプローラで作業

  3. 『7z1900-x64.exe』をダブルクリックして実行します。
  4. 『はい』をクリックします。
    f:id:mmorley:20200508130252p:plain
  5. インストール先を選択して、『Install』をクリックします。
    f:id:mmorley:20200508132025p:plain
  6. 『Close』をクリックします。
    f:id:mmorley:20200508140420p:plain

フォントファイルを解凍する

 『7-Zip』を使ってフォントファイルを解凍します。
 『mplus-TESTFLIGHT-063a.tar.xz』は2回解凍する必要があります。
 

    Windowsエクスプローラで作業

  1. 『mplus-TESTFLIGHT-063a.tar.xz』を右クリックして、『7-Zip』→『ここに展開』をクリックします。
    f:id:mmorley:20200508174540p:plain
    『mplus-TESTFLIGHT-063a.tar』が得られます。
  2. 『mplus-TESTFLIGHT-063a.tar』を右クリックして、『7-Zip』→『ここに展開』をクリックします。
    『mplus-TESTFLIGHT-063a』フォルダが得られます。

フォントをインストールする

 インストールは、解凍したフォントファイルを『Font』フォルダに貼り付けるだけです。
 フォントファイルは全部で43個(70.6MB)あります。サイズが気になる場合は、今回使う『mplus-1c-black(1.68MB)』だけでも構いません。
 

    Windowsエクスプローラで作業

  1. 『mplus-TESTFLIGHT-063a』フォルダにある名前が『mplus-○○-○○』のファイル(計43個)をコピーして、『C:\Windows\Fonts』フォルダに貼り付けます。

ビットマップフォント作成ソフトをインストールする

 ビットマップフォント作成ソフトの『Sprite Font Builder』をインストールします。
 インストールといっても解凍したフォルダを好きな場所に置くだけです。 
 

    ブラウザで作業

  1. 下記のサイトを開きます。
    www.johnwordsworth.com
  2. サイト内の『Sprite Font Builder Version 0.8.0 (Win 32)』をクリックします。
    f:id:mmorley:20200508192015p:plain
    『spritefontbuilder_win32_0_8_0.zip』がダウンロードされます。
  3. 『spritefontbuilder_win32_0_8_0.zip』を右クリックして、『7-Zip』→『"spritefontbuilder_win32_0_8_0¥"に展開』をクリックします。
    f:id:mmorley:20200508222504p:plain
  4. 『spritefontbuilder_win32_0_8_0』を好きなフォルダに移動します。

ビットマップフォントを作成する

 入手したフォントをベースにして、ビットマップフォントを作ります。
 実際に使う文字だけに絞ることで、フォントのサイズが小さくなります。
 

    Windowsエクスプローラで作業

  1. 『spritefontbuilder_win32_0_8_0』フォルダの『SpriteFontBuilder.exe』をダブルクリックして実行します。

    Sprite Font Builderで作業

  2. 『Input Settings』を下図のように設定します。
    • Font:M+ 1c black
      先程入手したフォントです。
    • Size:32
      使用する最大サイズに合わせました。
    • Sprite Font Characters:0123456789:ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz
      使わない文字を省くことでサイズを小さくすることが出来ます。
    f:id:mmorley:20200509104618p:plain
  3. 『Effects』で、『Fill』を下図のように設定します。
    f:id:mmorley:20200509112327p:plain
  4. 『Effects』で、『Stroke』を選択して『Delete Effect』をクリックして削除します。
    f:id:mmorley:20200509173354p:plain
    下図のようなフォントが作成されます。
    f:id:mmorley:20200509173707p:plain
    今回はシンプルなものにしました。

ビットマップフォントを出力(エクスポート)する

 プロジェクトフォルダの『assets/font』フォルダに、『*.fnt』ファイルと『*.png』ファイルを作成します。
 

    Sprite Font Builderで作業

  1. 『Export Setting』の『Path』の『...』をクリックします。
    f:id:mmorley:20200509220055p:plain
  2. プロジェクトフォルダのassetsフォルダで、『新しいフォルダー』をクリックして"font"フォルダを作成します。
    f:id:mmorley:20200509183838p:plain
  3. 『ファイル名』に"UI"を入力して、『保存』をクリックします。
    f:id:mmorley:20200509220907p:plain
  4. 『Export』をクリックします。
    f:id:mmorley:20200509221218p:plain
  5. 『Save』をクリックします。
    f:id:mmorley:20200509221651p:plain
  6. 『ファイル名』に"UI"を入力して、『保存』をクリックします。
    f:id:mmorley:20200509221904p:plain
    再編集する場合のために保存しました。
 

 今回はここまでです。お疲れさまでした。
 
 続きは、こちらの記事です。

補足:グラデーションを使ったビットマップフォントを作成する

 上記で作成したビットマップフォントはシンプルなものでした。
 『Sprite Font Builder』は、グラデーションや複数の枠線を使用したビットマップフォントも作れます。
 せっかくなので作成方法を説明します。
 

    Sprite Font Builderで作業

  1. 『Input Settings』を下図のように設定します。
    日本語を使う場合は、選択したフォントが日本語入力に対応している必要があります。
    f:id:mmorley:20200509223131p:plain
  2. 『Effects』で、『Fill』を下図のように設定します。
    f:id:mmorley:20200509224546p:plain
  3. 『Add Stroke』ボタンで、『Stroke』を2つ追加します。
  4. 『Effects』で、『Stroke』を下図のように設定します。
    『Effects』でドラッグ&ドラッグで順序を入れ替えられます。
    f:id:mmorley:20200509225647p:plain f:id:mmorley:20200509225524p:plain f:id:mmorley:20200509225905p:plain
    下図のようなビットマップフォントが作成されます。
    f:id:mmorley:20200509230422p:plain