はしくれエンジニアもどきのメモ

情報系技術・哲学・デザインなどの勉強メモ・備忘録です。

トップ > Canvas > EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

Canvas CreateJS HTML JavaScript アニメーション

EaselJS のSpriteSheet, Sprite を使ってスプライトアニメーション [CreateJS]

png, jpg, svg などでスプライトシートを作っておけば、 SpriteSheetクラスとSpriteクラスでスプライトアニメーション を生成できる。

CreateJS のバージョン

使用したCreateJSのバージョン

  • EaselJS 0.8.1

  • TweenJS 0.6.1

サンプル

スプライトシートでblinkアニメーション

codepen.io

スプライトシートを用意

jpg, png, svg で作っておきます。 1フレームのwidth とheight をそれぞれ固定して 並べておきます。

今回は、1フレームを128×128 として、 10フレーム用意したので、 1280×128のスプライトシートです。

Inksacape で、目を垂直方向に10%ずつ縮小して作りました。

瞬き用に目が閉じていくスプライトシート

SpriteSheetクラス

SpriteSheetクラスで、用意したスプライトシート画像を読み込み、 どのフレームを使うかなどアニメーションの設定を行う。

Doc: EaselJS v0.8.1 API Documentation : SpriteSheet

  • imagesプロパティ

    読み込むスプライトシート画像を設定する。 複数読み込めるので配列で指定する。

    
images: ['img/spritesheet.svg']

  • framesプロパティ

    スプライトシートの1フレームのwidth, height、 基準位置(regX, regY)など を設定する。

    
var frame_width = 128;
var frame_height = 128;
frames: {
  width: frame_width,
  height: frame_height,
  regX: frame_width/2,
  regY: frame_height/2
}

    1フレームのサイズが異なる場合でも 設定できる。 2次元配列のようにして設定できるようだ。

    
frames: [
  // x, y, width, height, imageIndex*, regX*, regY*
  [0, 0, 96, 64, 0],
  [97, 65, 64, 64, 1, 32, 32]
]

  • animationsプロパティ

    アニメーションの名前とどのフレームを使用するかアニメーションの 設定ができる。 10フレームあるとき、0 - 9 のindex を指定できる。

    設定方法は3種類。

    • 1フレームの指定の場合は、indexのみ。

      
animations: {
  sit: 0
}

    • 複数フレーム指定の場合は、 配列の0番目にstartのindex と 1番目にendのindex を指定する。 オプションとして、 next で次のアニメーションと speed を設定できる。

      
animations: {
  // start, end, next*, speed*
    run: [0, 5],
    jump: [6, 12, "run", 1.5]
}

    • 同じフレームを何回も指定するなど 複雑なアニメーションを指定する場合。 アニメーションの名前に 配列でなく、オブジェクト持たせる。

      framesプロパティにアニメーションのframe index の配列を指定する。 オプションとして、 next プロパティに次のアニメーションの名前、 speedプロパティに速度を指定する。

      
animations: {
  walk: {
      frames: [0, 1, 2, 2, 1, 0]
  },
  shoot: {
      frames: [0, 3, 4, 5],
      next: "walk",
      speed: 0.5
  }
}

  • framerateプロパティ

    フレームレートを設定できる。

    
framerate: 30

今回の瞬き(blink)アニメーションSpriteSheetの設定のコード を書いておく。


var file = '~~~.svg';
var data = {
  images: [file],
  frames: {
    width: frame_width,
    height: frame_height,
    regX: frame_width/2,
    regY: frame_height/2
  },
  animations: {
    //animation_name
      blink: {
        frames: [
          0, 0, 0, 0, 0, 0
        ],
        next: 'closing',
        speed: 0.05
      },
      closing: {
        frames: [
          1, 1, 1, 1, 1,
          2, 2, 2, 2,
          3, 3, 3,
          4, 4,
          5, 5,
          6, 6, 6,
          7, 7, 7, 7,
          8, 8, 8, 8, 8
        ],
        next: 'closed',
        speed: 1.2
      },
      closed: {
        frames:[
          9, 9, 9, 9, 9, 9
        ],
        speed: 0.8,
        next: 'opening'
      },
      opening: {
        frames: [
          8, 8, 8, 8, 8,
          7, 7, 7, 7,
          6, 6, 6,
          5, 5,
          4, 4,
          3, 3, 3,
          2, 2, 2, 2,
          1, 1, 1, 1, 1
        ],
        speed: 1.2,
        next: 'blink'
      }
    },
    framerate: 30
  };

// spriteインスタンス
var mySpriteSheet = new createjs.SpriteSheet(data);

Spriteクラス

SpriteSheetクラスから生成できる。 SpriteクラスのコンストラクタにSpriteSheetクラスを与えて生成できる。

Doc: EaselJS v0.8.1 API Documentation : Sprite


var mySprite = new createjs.Sprite(mySpriteSheet);
stage.addChild(mySprite);
stage.update();

Sprite.gotoAndPlay('animation_name');で アニメーションの開始、 Sprite.gotoAndStop('animation_name');でアニメーションの停止ができる。


var mySprite = new createjs.Sprite(mySpriteSheet);
~~~
mySprite.gotoAndPlay();