ページ一覧

Cocos Creator 3 導入編

Cocos Creator 3 カンタン2Dゲーム制作

ビットマップフォントを使う

これまでスコアは文字を表示するだけでしたが、ビットマップフォントに差し替えてみましょう。
Cocos Creator ではビットマップフォントをラベルアトラス(Label Atlas)といいます。

ラベルアトラスの使い方

次の画像をDigitFont.pngという名前で保存します。
アセットパネルのimagesの配下にコピーします。

imagesフォルダ右クリック→Create→Label Atlasを選択します。
名前をDigitとし、選択された状態でインスペクターパネルを開きます。
Sprite FrameにアセットパネルからDigitFontをドラッグ＆ドロップでセットし、他の項目は以下のように入力します。

Width、Heightは画像の文字単位の大きさで入力します。なお今回は数字のみですが、アルファベットや記号もASCIIコード順に並べると使用でき、下図のように複数行に分けることもできます。

ヒエラルキーパネルにある既存のScoreを一度削除し、アセットパネルからDigitをコピー。名前をScoreとします。

Scoreを選択し、インスペクターパネルに以下の内容を入力します。

ヒエラルキーパネルにあるFishを選択し、インスペクターパネルのFishCollisionコンポーネントにあるScoreの枠を確認します。
オレンジになっているので、ヒエラルキーパネルから新しく作成したScoreをドラッグ＆ドロップでセットします。

ラベルアトラスの確認

デバッグボタン(ctrl+P)で実際の動きを確認します。