FlashSprite.js

Flashspritejs by mach3

Adobe Flash CS6+ で出力されたスプライトアニメーションシートを再生するjQueryベースのライブラリ。

前回の処理に加えて停止や逆再生、各種設定やイベント発火等の機能を付け足した物です。 使い方は上記URLで概ねわかると思いますが、簡単にご紹介しておきます。

簡単な使い方

1. FlashCS6+でスプライトシートを生成する

FlashIDE上で、ステージに配置したアニメーションインスタンスを右クリックし、 コンテキストメニューから「スプライトシートを生成」を選択してダイアログを開きます。

データ形式は「JSON-Array」を選択し、「書き出し」を行います。 ステージ上でインスタンス名を付けておけばその名前でファイルが作成されます。

2. 配置する

画像ファイルとJSONファイルが出力されるので、任意の場所に保存しましょう。 今回はこんな感じにしてみます。

./
├ data/
│ ├ sprite.json
│ └ sprite.png
└ index.html

3. ロードする

jQueryとFlashSprite.jsを読み込んで、新しい要素を生成してスプライトアニメーションを初期化します。

(function(){
    var myAnimation = $("<div>");
        myAnimation.flashSprite({
                src : "data/sprite.json"
        })
        .appendTo($("body"));
}());

$.fn.flashSprite() にオプションを渡す事で初期化され、要素にロードされます。 デフォルトの設定では自動再生がオンになっているので、初期化した時点で再生がはじまります。

無事再生されましたか？

イベントとメソッドを使ってみる

イベントとメソッドを使う事でもう少し細かい処理をする事ができます。 下の例では、データロードの完了を待って、アニメーションを配置・フェードインさせています。

(function(){
    var myAnimation = $("<div>");

        // JSONと画像がロードされると "flashSpriteReady" イベントが発火します
        myAnimation.on("flashSpriteReady", function(){
                $(this).hide()
                .appendTo($("body"))
                .flashSprite("config", { fps : 60 }) // "config" メソッドで設定変更
                .flashSprite("play") // "play" メソッドで再生
                .fadeIn();
        });

        myAnimation.flashSprite({
                src : "data/sprite.json",
                autoPlay : false, // 自動再生をオフに
                repeat : false // 繰り返し再生をオフに
        });
}());

イベントには、ロード完了時に発火される “flashSpriteReady” の他に、 停止時の “flashSrpiteEnd”、フレーム毎に発火する “flashSpriteEnterFrame” が用意されています。

また、jQuery.fn.flashSprite() にメソッド名を文字列で渡すことでメソッドを呼び出す事ができます。 第二引数以降はそのメソッドに渡されます。

それぞれの詳細はドキュメントをご参照ください。

まとめ

と、こんな感じで作ってみました。

実際のところ、機能豊富なCreateJSを利用すべき場面の方が多いと思いますが、 その為に大きなソースを追加で読み込まなければならないのも事実。

ただパラパラ漫画を再生する為だけに大仰な…と感じるようなケースなら、 こんな単機能のライブラリも使い道があるのかな、と思います。

スプライトシートってなに

スプライトシートは、CSSスプライトを利用したアニメーションテクニックです。 アニメーションの全フレームを一つの画像に並べて配置し、 要素の背景画像として埋め込んで background-position を変更していくことで パラパラ漫画のようなアニメーションを再生します。概要はこんな感じ。

一年程前、CS6が出るちょっとだけ前に似たような記事を書いたことがありました。

• シンプルなスプライトアニメーションライブラリ 「MovieCrop.js」 | Mach3.laBlog

上の記事はまだCS6が出る前だったので自力でスプライトシートを作成する前提のものですが、 せっかく出力する機能があるんだから利用させて頂こうという事で、今回の記事なわけです。

CreateJSでやればよくない？

その通りです。その方が効率的なのでそれでいいと思います。

今回の記事は、あまり多くの依存ライブラリを読み込みたくなかったり、 宗教上の理由や遺言、あるいは政治的外圧等でjQueryで処理せざるを得ないケースを想定したものです。 CreateJSでの利用の仕方については、おそらく多くの方が詳しい記事を書いてくださっているので、そちらをご参照ください。

FlashCS6+でスプライトシートを生成する

例えば、FlashCS6でアニメーションのムービークリップ等を作り、それをステージに設置します。 その設置されたインスタンスを右クリックすると、コンテキストメニューに「スプライトシートを生成」が表れます。

それを選択すると現れるのがこんなダイアログ。

ここから「書き出し」を行うと、画像とデータ形式で指定したデータが出力されます。 指定出来るデータはJSON、各種ゲームエンジンの形式、そしてCreateJSのeaseljs形式です。

今回は使いやすそうだった “JSON-Array” 形式を使用します。

JSONデータの中身

“JSON-Array” で出力されたJSONデータの中身はこのような構成になっています。

{
        "frames": [
                {
                        "filename": "loading0000",
                        "frame": {"x":0,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }
                ,{
                        "filename": "loading0001",
                        "frame": {"x":33,"y":0,"w":33,"h":33},
                        "rotated": false,
                        "trimmed": false,
                        "spriteSourceSize": {"x":0,"y":0,"w":33,"h":33},
                        "sourceSize": {"w":33,"h":33}
                }

                ...

        ],
        "meta": {
                "app": "Adobe Flash CS6",
                "version": "12.0.0.481",
                "image": "sample.png",
                "format": "RGBA8888",
                "size": {"w":256,"h":256},
                "scale": "1"
        }
}

“frames” が実際のアニメーションのデータで、配列の中に個々のフレームの情報（サイズや座標等）を格納したオブジェクトが並んでいます。

“meta” にはスプライトシートの基本情報が格納されています。

このデータから再生するには…

アニメーションを再生するには、”frames”内のインデックスをひとつずつ進めてやり、格納されている座標情報を元に背景画像を移動してやる要領でしょうか。 座標は画像の左上からの座標なので、これを background-position に適用する際はマイナスの数値にしてやる必要がありますね。

再生させてみよう

では早速このデータを元にアニメーションを設置し、再生させてみましょう。 JSONデータも画像データもHTMLと同じディレクトリにある想定で進めます。

JSONを読み込む

まずJSONデータを読み込みます。

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){
            var my = {};

            my.data = data;

            // この中でいろいろしよう
    });

}(jQuery));

アニメーションの要素を生成、配置する

受け取ったJSONのデータの内容から、アニメーション用のHTML要素を生成し、bodyに配置します。

my.node = $("<div>").css({
    "width" : my.data.frames[0].sourceSize.w,
    "height" : my.data.frames[0].sourceSize.h,
    "background-image" : "url(" + my.data.meta.image + ")"
})
.appendTo($("body"));

要素のサイズははじめのフレームの “sourceSize” から取得することにします。

画像は、前述の通り同じディレクトリで展開する想定なのでそのまま代入していますが、
恐らく運用時は他のディレクトリに入れると思うので、その時はその時で画像へのパスをなんやかんやする必要がありますね。

再生する

今回は、単純に setTimeout で再生用の関数をぶん回して繰り返し再生を行います。

my.index = 0; // 現在のフレームインデックス
my.length = my.data.frames.length; // 合計フレーム数
my.interval = Math.floor(1000/30); // 約FPS30ぐらいで再生

my.play = function(){
    var frame;

    my.index = (my.index + 1) % (my.length - 1);
    frame = my.data.frames[my.index].frame;
    my.node.css(
            "background-position",
            "-" + frame.x + "px -" + frame.y + "px"
    );
    setTimeout(my.play, my.interval);
};

my.play();

他にも、ページのスクロール位置やマウスの挙動などをトリガーにしたりすると表現の幅が広がりますね。

全体のコード

(function($){

    $.getJSON("sample.json")
    .then(function(data, status){

        var my = {};

        my.data = data;

        my.node = $("<div>").css({
            "width" : my.data.frames[0].sourceSize.w,
            "height" : my.data.frames[0].sourceSize.h,
            "background-image" : "url(" + my.data.meta.image + ")"
        })
        .appendTo($("body"));

        my.index = 0;
        my.length = my.data.frames.length;
        my.interval = Math.floor(1000/30);

        my.play = function(){
            var frame;

            my.index = (my.index + 1) % (my.length - 1);
            frame = my.data.frames[my.index].frame;
            my.node.css(
                    "background-position",
                    "-" + frame.x + "px -" + frame.y + "px"
            );
            setTimeout(my.play, my.interval);
        };
        my.play();
    });
}(jQuery));

めんどくさい！

勿論毎度これは面倒なので、ライブラリ化してみましたが、それは後編で。

» FlashCS6+で生成したスプライトシートをjQueryでロードする実験（後編） | Mach3.laBlog