Help us understand the problem. What is going on with this article?

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

minimo
趣味でphina.jsとenchant.jsを使ってゲーム作ってます。最近はphina.jsがメイン。
Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
No comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
ユーザーは見つかりませんでした