今はJSXと言うといろいろ意味があって大変ですね…。というわけで、PhotoshopScript(JSX)です。
動画を連番のPNGなどに変換したうえで、それを1つにまとめたスプライトシートを作成するときなどに役立ちます。
Flash(Animate)を使えば、最近のものであればスプライトシート書き出しができるんですが、
ということで、単に並べるだけならPhotoshopのScriptでいいのではと思い、作成しました。
仕事で、複数のスプライトシートをタイマーで回そうと思って仕組みを組んだら非常に重くなってしまったので、タイマーを一括で管理して requestAnimationFrameを使いつつ、FPSを維持する、というのをやっていたのですが、ライブラリ化しておけば後々便利だろう、ということで作ってみました。
https://github.com/sacrifs/spfdLib.trigger.js
単純にFPS30でsetTimeoutしたり、setIntervalしたりすると、10個も起動すれば重くなってしまいますが、こちらだと1つになります。
spfdLib.trigger.addTimer(function(){console.log("hoge")});
で、FPSにしたがった処理を実行できます。
また、スプライトシートをアニメーションさせる場合に、全体のフレーム数が必要だったので、オブジェクトとして引数を渡した場合、FPSに沿ったフレーム番号を取得できるようになっています。
var colNum = 15;
var fps = 30;
var w = 360;
var h = 203;
var ua = navigator.userAgent.toLowerCase();
var animation = function(target){
return function(fnum){
var x = fnum % colNum * w;
var y = (fnum / colNum | 0) * h;
target.style.backgroundPosition = -x + "px -"+y + "px";
};
}
$(".spriteAnim").each(function(){
spfdLib.trigger.addTimer({fps:30, frame:300, func:animation(this)});
});
処理が1つだけの場合も、普通にrequestAnimationFrameを使うと、指定のFPSで処理を実行、というのができないので、ライブラリを噛ませばちょっと便利になると思います。
FPS指定で動かす処理は下記サイトを参考にしました。
http://yomotsu.net/blog/2013/01/05/fps.html
(基本的にFPS30で使うものとしてイベントを間引いていますが、FPSが30以上の場合は間引かないほうが綺麗に見えると思います。)
リサイズについてはついでに同じようなものだろうと、一緒のライブラリに入れてしまいました。
リサイズのイベントは画面リサイズ時に送出されますが、リサイズ時に再描画したいものがあったとして、イベント送出時に毎回再描画されると、かなり重くなります。そこで、debounceや、throttleと呼ばれる処理をして間引いたりします。
アニメーションの方は、throttleでFPS分になるように間引いています。リサイズのほうはdebounceで間引いています。(どっちでもいいようですが)