スプライトの表示とアニメーション
以下のような2コマの画像の表示を行います。
スプライトシートの定義をjson形式で作成します。
{
"frame": {
"width": 16,
"height": 16,
"cols": 2,
"rows": 1
},
"animations": {
"normal": {
"frames": [0, 1],
"next": "normal",
"frequency": 12
}
}
}
各項目の意味は以下の通りです。
- width: 1フレームの幅
- height: 1フレームの高さ
- cols: スプライトシート中の横方向のフレーム数
- rows: スプライトシート中の縦方向のフレーム数
- animations: アニメーションの定義
- frames: アニメーションに使用するフレームの番号、スプライトシートの左上から0始まり
- next: 次のアニメーション、自分自身を指定するとループする
- frequency: アニメーション間隔
これらのファイルはそれぞれplayer.pngとplayer_ss.jsonとしてimagesディレクトリ下に配置するものとします。
GameAppにこれらのファイルをアセットとして登録します。
const ASSETS = {
image: {
'player': './images/player.png'
},
spritesheet: {
'player_ss': './images/player_ss.json'
},
};
phina.main(function() {
var app = GameApp({
width: SCREEN_WIDTH,
height: SCREEN_HEIGHT,
startLabel: 'main',
assets: ASSETS,
fit: false,
});
あとはシーンの中などで、スプライトとスプライトシートを作成し、attachToでスプライトとスプライトシートの紐づけをして、gotoAndPlayでアニメーションを開始します。
this.player = Sprite('player', 16, 16);
this.player.x = this.gridX.center();
this.player.y = this.gridY.center();
this.player.addChildTo(this);
this.player_ss = FrameAnimation('player_ss');
this.player_ss.attachTo(this.player);
this.player_ss.gotoAndPlay('normal');