読者です 読者をやめる 読者になる 読者になる

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

情報・Web系技術の勉強メモ・備忘録です。

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

Canvas CreateJS HTML5 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();