表示モード

文字列を表示する ​

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

フォント ​

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

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

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

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

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

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

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

ラベル ​

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

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

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

プロパティ名値の種類意味
text文字列表示する文字列
fontフォントオブジェクト利用する字形
fontSize数値文字の大きさ
textColorCSS色を表す文字列文字の色

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

javascript
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 の文字列を書き換える例です。

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

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

  • text
  • font
  • fontSize

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

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

javascript
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;