色々な描画

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

# 文字列の表示

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

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

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

var font = new g.DynamicFont({
  game: g.game,
  fontFamily: g.FontFamily.Serif,
  size: 15
});

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

• g.FontFamily.SansSerif: サンセリフ体・ゴシック体のフォント。
• g.FontFamily.Serif: セリフ体・明朝体のフォント。
• g.FontFamily.Monospace: 等幅フォント。

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

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

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

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

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

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    var font = new g.DynamicFont({
      game: g.game,
      fontFamily: g.FontFamily.SansSerif,
      size: 15
    });
    var 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() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    var font = new g.DynamicFont({
      fontFamily: g.FontFamily.SansSerif,
      size: 15,
      game: g.game
    });
    var count = 0;
    var label = new g.Label({
      scene: scene,
      font: font,
      text: count + "",
      fontSize: 30,
      textColor: "black",
      x: 10,
      y: 10
    });
    scene.append(label);
    scene.setInterval(function() {
      label.text = ++count + "";
      label.invalidate();
    }, 500);
  });
  g.game.pushScene(scene);
}

module.exports = main;

# クリッピング

ペインは E と同じように子要素をまとめるためのエンティティです。ペインを使うことで描画内容のクリッピングを実現できます。 E と異なり、Pane は子孫要素の描画領域を Pane の大きさに限定します。子要素が Pane の大きさをはみ出して描画しようとした場合、はみ出した部分は描画されません。

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    var pane = new g.Pane({ scene: scene, width: 50, height: 50 });
    var rect = new g.FilledRect({
      scene: scene,
      width: 50,
      height: 50,
      x: 15,
      y: 15,
      angle: 30,
      cssColor: "red"
    });
    pane.append(rect);
    scene.append(pane);
  });
  g.game.pushScene(scene);
}

module.exports = main;

ラベル同様、ペインも描画内容をキャッシュしています。ペイン自体のプロパティ (例えば width や height) を書き換えた場合は、 invalidate() を呼び出す必要があります。

少し紛らわしい点として、ペインが保持している子エンティティの変更時には子エンティティの modified() や invalidate() のみを呼び出せばよいという点です。子エンティティの変更はペインに通知されて自動的にキャッシュの更新が行われます。

以下のプログラムでは、ペイン内に配置した矩形を回転させています。ペインを利用していますが、ペイン自体のプロパティは変更していないので、矩形オブジェクトの modified() の呼び出しをしていますが、ペイン自体の invalidate() の呼び出しはしていません。

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.loaded.add(function() {
    var pane = new g.Pane({ scene: scene, width: 50, height: 50 });
    var rect = new g.FilledRect({
      scene: scene,
      width: 50,
      height: 50,
      x: 15,
      y: 15,
      angle: 30,
      cssColor: "red"
    });
    pane.append(rect);
    scene.append(pane);
    rect.update.add(function() {
      ++rect.angle;
      rect.modified();
    });
  });
  g.game.pushScene(scene);
}

module.exports = main;