Skip to content

色々な描画

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

文字列の表示

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

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

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

javascript
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 を渡します。

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

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

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

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

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

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

sample12

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

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

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

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

  • text
  • font
  • fontSize

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

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

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

sample13

クリッピング

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

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

sample06

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

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

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

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

sample14