phina.jsDay 12

[phina.js]SpriteSheetを使ってみよう!

More than 3 years have passed since last update.


はじめに

phina.jsとはゲームが簡単に作れるJavaScriptのライブラリです。

詳しくはこちらを参照してください。

とりあえず試してみたいって方のための phina.js 入門 | phiary


SpriteSheetってなに?

SpriteSheetの前に、スプライトアニメーションについて説明します。

スプライトアニメーションとは、アニメーションの各コマ画像を一枚画像の中にタイル状に配置し、画像内での表示位置を連続で切り替えることで、アニメーションを実現させる手法です

こんな感じの画像の1フレームづつ切り替えて

ぴよぴよ 

この様な形で表示します(1~4フレーム目を繰り返してます)

ぱたぱた

frameIndexによるスプライトアニメーションサンプル

(runstant)

上記サンプルではSpriteframeIndexを変化させて実現してますが、プログラム内で現在、フレームの何番目を表示するかを指定し、さらにプログラム内で任意の速度でフレームを進める様に制御しなくてはなりません。

これはいかにも面倒で、また、画像の変更にも弱い感じの方法です。

これを分かり易く、n番のフレームからn番のフレームは○○のアニメーションと名前を付けて定義をしたものがSpriteSheetです。


使い方

SpriteSheetとして、下記の様にJSON形式で書いたファイルを用意します。

拡張子は何でもOKですが、この記事中ではSpriteSheetという事で.ssを使用しております。

(注:JSONにはコメントが付けられませんが、説明の為に付加してます。コピペする場合はコメントを全て削除してください)


hiyoko.ss

{

//画像情報
"frame": {
"width": 32, //1フレームの横幅
"height": 32, //1フレームの縦幅
"cols": 6, //横のフレーム数
"rows": 3 //縦のフレーム数
},

//アニメーション情報
"animations" : {
"start": { //アニメーション名
"frames": [0,1,2,3],//表示するフレーム番号を配列として並べる(0始まり)
"next": "start", //アニメーション終了時、次のアニメーションを指定
//ループさせたい場合は自分を指定する
"frequency": 5 //フレーム毎の間隔
}
}
}


このファイルをSpriteSheetのアセットとして読み込みます。


sample.js

var ASSETS = {

//ひよこの画像
image: {
'hiyoko': 'https://rawgit.com/minimo/phina.js_advent_20151212/master/hiyoco_nomal_full.png',
},
//SpriteSheet
spritesheet: {
'hiyoko_ss': 'https://rawgit.com/minimo/phina.js_advent_20151212/master/hiyoko_short.ss',
}
};

SpriteSheetFrameAnimationで読み込み、Spriteにアタッチします。

var piyo = Sprite('hiyoko', 32, 32);

var ss = FrameAnimation('hiyoko_ss')
ss.attachTo(piyo);

アタッチ後にgotoAndPlayで再生するアニメーションを指定します。

ss.gotoAndPlay('start');

これでSpriteSheet通りにアニメーションが再生されます。

詳しい手順はサンプルを参照してください。

SpriteSheetとFrameAnimationによるスプライトアニメーションサンプル

(runstant)


まとめ

frameIndexを使用したスプライトアニメーションは手軽ですが、プログラム内である程度制御する必要があり、構造が複雑になりがちです。

そこでSpriteSheetを使用してアニメーション制御を任せてしまえば、プログラムも見通しがよくなるのでは無いでしょうか(主観)

便利な機能ですので使ってみてください!!

この記事で使用した画像とSpriteSheet置き場ですgithub

ひよこの画像は萬楽活戯大系@CarasOhmiさん)よりお借り致しました。

ありがとうございます。