Class

ImageAnimator

stdgam.ImageAnimator()

ImageCutterを使って簡易的なコマ送りアニメを生成するためのクラス. 具体的には,

  1. 最初にregisteメソッドによりImageCutterと「アニメーション定義リスト」の組を登録する.
  2. 次に, generateメソッドで「コマ送り描画オブジェクト」を生成する.
  3. こうして生成したコマ送り描画オブジェクトのpaintメソッドで各コマを描画する.

という手順によりコマ送りアニメを描画する.

Constructor

# new ImageAnimator()

空のインスタンスを生成する.

View Source stdgam.js, line 617

Methods

# generate(name, repeatopt) → {Object}

指定された名前で登録されている情報を元にして「コマ送り描画オブジェクト」を生成する. このオブジェクトは次のメソッドを持つ.

  • paint(ctx, x, y) - 指定された位置に現在のコマを描画し, 内部状態を更新する
  • finished() - 描画するコマが残っていないときtrue, そうでないときfalse

paintメソッドを呼び出されるたびに内部状態が更新され, 自動的にコマ送りが進行する. すべてのコマを描画し終えたときの挙動は repeatによって変わる.

  • repeatがtrueならば, 最初のコマに戻る
  • repeatがfalseならば, これ以上何も描画しない
Parameters:
Name Type Attributes Default Description
name string

使用するアニメーションの登録名

repeat boolean <optional>
false

リピートするか

View Source stdgam.js, line 689

生成されたコマ送り描画オブジェクト

Object

# register(name, IC, dfn)

ImageCutterオブジェクトと「アニメーション定義リスト」の組を 指定された名前で登録する. ここで, アニメーション定義リストは,

[a, b, frames, offX, offY]

という形のリストをアニメーションのコマの数だけ並べた 2重配列である (offX, offYは省略可).

各成分は次の意味を持つ.

  • (a,b) : ImageCutter内のどのブロックを描画するか指定する
  • frames : そのコマを表示するフレーム数
  • offX : 横方向に表示位置をどれだけずらすか (省略時は0)
  • offY : 縦方向に表示位置をどれだけずらすか (省略時は0)

たとえば, 各コマの画像を横一列に並べて連結したものを ImageCutterにより分割して使う場合, 次のようなコードになる.

const IC = new stdgam.ImageCutter(連結した画像, 1コマの横幅, 1コマの縦幅);
const IA = new stdgam.ImageAnimator();
IA.register("animation_01", [
    [0, 0, 表示フレーム数],
    [1, 0, 表示フレーム数],
    [2, 0, 表示フレーム数], ...
]);
Parameters:
Name Type Description
name string

このアニメーションに付ける登録名

IC stdgam.ImageCutter

画像を保持するImageCutter

dfn Array.<Array.<number>>

アニメーション定義リスト

View Source stdgam.js, line 661

アニメーション定義リストの中に長さが2以下のリストが含まれていたり, 長さが3以上でも a < 0 || b < 0 || frames <= 0 であるリストが含まれているとき

Error