文字列を表示する

このページのサンプルコードをダウンロード

# フォント

Akashic Engine で文字列を表示するには、フォントとラベルが必要です。 フォント は文字の形を表すオブジェクトです。 ラベル はフォントを利用して文字列を描画するエンティティです。

フォントには、システムにインストールされているフォントから生成するダイナミックフォントと、画像から生成するビットマップフォントの二種類があります。ビットマップフォントについては後述します。

ダイナミックフォントは以下のコードで生成できます。

const font = new g.DynamicFont({
  game: g.game,
  fontFamily: "sans-serif",
  size: 15
});

引数の fontFamily プロパティは、フォントの種類で以下のいずれかの値を指定します。

• "sans-serif": サンセリフ体・ゴシック体のフォント。
• "serif": セリフ体・明朝体のフォント。
• "monospace": 等幅フォント。

引数の size プロパティは文字の大きさ、 game プロパティには g.game を渡します。

# ラベル

上のフォントを使って、実際に文字列を描画するエンティティ・ラベルは以下のコードで生成します。

const label = new g.Label({
  scene: scene,
  font: font,
  text: "Hello World!",
  fontSize: 15,
  textColor: "blue"
});

ラベル特有のプロパティとして次のものがあります。

以下のプログラムでは、ダイナミックフォントとラベルを利用して文字列を描画しています。

function main() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    const font = new g.DynamicFont({
      game: g.game,
      fontFamily: "sans-serif",
      size: 15
    });
    const label = new g.Label({
      scene: scene,
      font: font,
      text: "Hello World!",
      fontSize: 15,
      textColor: "blue",
      x: 10,
      y: 20
    });
    scene.append(label);
  });
  g.game.pushScene(scene);
}

module.exports = main;

ダイナミックフォントはシステムにインストールされているフォントを利用するため、実行環境により描画が異なる場合があります。すべての環境で同じ出力にしたい場合や、パフォーマンスが要求される場合は、ダイナミックフォントの代わりにビットマップフォントを利用してください。

ラベルは高速化のために描画内容をキャッシュしています。そのために文字列を変更した場合は、invalidate() メソッドで変更を通知する必要があります。以下はラベル label の文字列を書き換える例です。

label.text = label.text + "*";
label.invalidate();

ラベルでは以下のプロパティを変更した場合に invalidate() メソッドを呼び出す必要があります。

• text
• font
• fontSize

x や y などのエンティティ共通のプロパティの変更時はこれまで通り modified() を呼び出してください。 invalidate() は modified() の機能を含んでいるので、 invalidate() を呼び出した場合は modified() の呼び出しは不要です。

以下は、500 ミリ秒ごとにカウンタの値を増やすプログラム例です。

function main() {
  const scene = new g.Scene({ game: g.game });
  scene.onLoad.add(() => {
    const font = new g.DynamicFont({
      fontFamily: "sans-serif",
      size: 15,
      game: g.game
    });
    let count = 0;
    const label = new g.Label({
      scene: scene,
      font: font,
      text: count + "",
      fontSize: 30,
      textColor: "black",
      x: 10,
      y: 10
    });
    scene.append(label);
    scene.setInterval(() => {
      label.text = ++count + "";
      label.invalidate();
    }, 500);
  });
  g.game.pushScene(scene);
}

module.exports = main;