画像を動かす

画像などのエンティティを時間経過に応じて動かすには、シーンやエンティティの onUpdate トリガーを利用します

凡例

scene.onUpdate.add(function() {
  rect.x += 1; // 横方向に 1 移動する
  rect.modified(); // modified() で表示に反映
});

シーンではなくエンティティの onUpdate を利用することもできます。

画像を切り替えるパラパラアニメ (フレームアニメーション) を行うには g.FrameSprite を利用してください。

イージングなどを含むより複雑なアニメーションを行うには akashic-timelin を利用すると、より簡潔に複雑なアニメーションを記述することができます。

利用例

次のコンテンツは、矩形を横に移動するアニメーションを行います。

詳細

Akashic Engine のコンテンツは固定 FPS で動作します。 FPS の値は 1 秒間に画面を更新する回数です。エンティティの位置や大きさなどを画面更新の度に変化させると、エンティティをアニメーションさせることができます。

シーンやエンティティの onUpdate トリガーはフレームを描画するたびに呼び出されます。onUpdate トリガーを利用することで、1 フレーム単位でエンティティのプロパティを変更することができます。

シーンとエンティティの onUpdate トリガーでは寿命に違いがあります。シーンのトリガーがシーンが切り替わるまで有効なのに対して、エンティティのトリガーはエンティティが破棄されるまで有効になります。

下記のコードでは、矩形が画面の中央に到達したら destroy() メソッドでエンティティを破棄しています。エンティティのトリガーは destroy() で破棄されますが、シーンのトリガーは破棄されないため、エンティティが破棄されているかのチェックを行わないとエラーとなります。

function main() {
  var scene = new g.Scene({ game: g.game });
  scene.onLoad.add(function() {
    var rectRed = createRect(scene, "red", 0, 0);
    var rectBlue = createRect(scene, "blue", 0, 40);
    scene.append(rectRed);
    scene.append(rectBlue);

    // rect の update を利用
    rectRed.onUpdate.add(function() {
      // ... rectRed の更新

      // 画面中央まで到達した場合、 rectRed を破棄
      if (rectRed.x > g.game.width / 2) rectRed.destroy();
    });

    // scene の update を利用
    scene.onUpdate.add(function() {
      if (rectBlue.destroyed()) return;
      // ... rectBlue の更新

      // 画面中央まで到達した場合、rectBlue を破棄
      if (rectBlue.x > g.game.width / 2) rectBlue.destroy();
    });

  });
  g.game.pushScene(scene);
}

function createRect(scene, color, x, y) {
  return new g.FilledRect({
    ... // 必要なプロパティ
  });
}

module.exports = main;

Akashic Engine 逆引きリファレンス

画像を動かす

凡例

利用例

詳細

関連情報