search
LoginSignup
9

More than 5 years have passed since last update.

posted at

updated at

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

はじめに

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さん)よりお借り致しました。
ありがとうございます。

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
What you can do with signing up
9