今回は少し目先が変わって,
スプライトシートを用意する
これからつくるのは,
スプライトシートは,
- ※1
- Flash Professionalによるスプライトシートの書出し方については,
「スプライトシートの作成」 や動画 「アニメーションのスプライトシート書き出し」 をご覧いただきたい。
SpriteSheetとBitmapAnimationクラス
スプライトシートアニメーションをつくるには,
new createjs.SpriteSheet(情報オブジェクト)
new createjs.BitmapAnimation(SpriteSheetオブジェクト)
SpriteSheet()コンストラクタの引数に渡す情報オブジェクトには,
表1 情報オブジェクトに定める基本のプロパティ
プロパティ | 値 |
---|---|
images | 画像イメージのImageオブジェクトまたはURIの文字列をエレメントに納めた配列 |
frames | フレーム領域の情報をプロパティに納めたObjectインスタンス |
animations | アニメーション名をプロパティとして, |
今回のお題では,
{width:幅, height:高さ, regX:水平基準点, regY:垂直基準点}
animationsプロパティの中身については,
var data = {};
data.images = [file];
data.frames = {width:82, height:109, regX:41, regY:55};
data.animations = {walk: {
frames: [0, 0, 1, 2, 2, 3],
frequency: 3
}
};
var mySpriteSheet = new createjs.SpriteSheet(data);
var mySprite = new createjs.BitmapAnimation(mySpriteSheet);
改めて,
そのframesプロパティには,
プロパティfrequencyは,
SpriteSheetとBitmapAnimationのふたつのクラスでスプライトシートアニメーションをつくって再生するのが,
BitmapAnimationオブジェクト.gotoAndPlay(アニメーション名)
アニメーションする画面の書替えは,
コード1 SpriteSheetとBitmapAnimationクラスでスプライトシートアニメーションをつくって再生する
var stage;
var animation;
var stageWidth;
var stageHeight;
function initialize() {
var canvasElement = document.getElementById("myCanvas");
stageWidth = canvasElement.width;
stageHeight = canvasElement.height;
stage = new createjs.Stage(canvasElement);
animation = createAnimation("images/sprite_sheet.png");
stage.addChild(animation);
animation.x = stageWidth / 2;
animation.y = stageHeight / 2;
animation.gotoAndPlay("walk");
createjs.Ticker.addEventListener("tick", animate);
}
function animate(eventObject) {
stage.update();
}
function createAnimation(file) {
var data = {};
data.images = [file];
data.frames = {width:82, height:109, regX:41, regY:55};
data.animations = {walk: {
frames: [0, 0, 1, 2, 2, 3],
frequency: 3
}
};
var mySpriteSheet = new createjs.SpriteSheet(data);
var mySprite = new createjs.BitmapAnimation(mySpriteSheet);
return mySprite;
}
- ※2
- スプライトシートに並べたグラフィックイメージをただその順番に再生すればよいときは,
BitmapAnimation. gotoAndPlay() メソッドの引数に再生を始める連番インデックス(フレーム番号) を渡すこともできる (前掲図3参照)。