Akashic Engine 逆引きリファレンス

フレームアニメーション (パラパラアニメ) する

フレームアニメーションを行うには g.FrameSprite を利用します。

凡例

var frameSprite = new g.FrameSprite({
  ...,      // その他のプロパティ
  src: scene.asset.getImageById("explosion"),
  // 元画像のフレーム 1 つのサイズ
  srcWidth: 100,
  srcHeight: 100,
  // アニメーションに利用するフレームのインデックス配列
  frames: [0, 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12, 13, 14, 15],
  loop: true // アニメーションをループする（省略した場合ループする）
});
scene.append(frameSprite);
frameSprite.start(); // アニメーションを開始する

描画内容ではなく、画像そのものを動かすには onUpdate トリガーを利用する か、 より簡潔に複雑なアニメーションを行う akashic-timeline を利用してください。

利用例

次のコンテンツは、画像アニメーションして表示します。

詳細

フレームアニメーションを行うには g.FrameSprite を利用します。

FrameSprite は src プロパティに指定された画像を、幅 (srcWidth), 高さ (srcHeight) 単位で区切られた小さな画像の集まりと解釈します。各フレームの画像は左上から順に 0 から始まるインデックスで参照されます。frames プロパティは指定されたインデックスを順番に描画することでアニメーションを実現します。

最初に表示するフレームを指定する frameNumber プロパティやフレーム遷移の速度を指定する interval を指定することができます。

アニメーションは start() メソッドを呼び出すまで開始されません。アニメーションを終了したい場合は、 stop() メソッドを呼び出します。

関連情報

前 (エンティティの描画方法を変える (compositeOperation)) | 目次 | 次 (トゥイーンアニメーションする)