All Articles

Toolkit for CreateJSのPixelRatioコンバータ書いたよ

もともとは社内用のツールとして作ったんだけど、せっかくなので公開。

Toolkit for CreateJSのPixelRatio変換ツールです

Toolkit for CreateJS(以下、TFC)でパブリッシュしてできたアニメーションスクリプトを任意のdevicePixelRatioに変換するコマンドラインツールです。

そもそもTFCって何?という方はこのあたりを参考にしてください。簡単に言うと、Flash IDEで作成したタイムラインアニメーションをFlashの再生できないスマートフォン用にCanvasアニメーションスクリプトとして書き出せるAdobe製のツールです。再生にはCreateJS(EaselJS/TweenJS)を使います。

Ratio対応結構面倒なので

Flashで制作したアニメーションはサイズ/位置指定は固定値なので、スマートフォンのような解像度の違いに対応するにはそれぞれの解像度用に作り直さないといけなかったりします(場合によっては一から作ることもあるかも)。そんなの面倒なので、簡単に変換できたらいいよね、って社内の方と話をしてた中で作ったツールです。

何やってるか

TFCはパブリッシュすると、Flashで指定したサイズや位置情報などをCanvasの座標に変換してJavaScriptファイルとして書き出してくれるので、この中身を静的に解析して、PixelRatioに合わせた位置座標とサイズに再計算しています…といっても、単にCanvasの座標やパス描画のパラメータを正規表現で抜いて再計算しているだけなので大したことやってません。

また、画像は別で書き出されるので、別途サイズに合わせた拡大画像を用意する必要もあります。面倒かもしれませんが、Flashを作り直す手間を考えたら…ね。

ニッチだろうけど

もしプロジェクトでTFCを採用している方がいらっしゃればいいなと。EaselJS、TweenJSで把握できてるパス描画部分は変換できていると思いますが、抜けがあれば教えていただけると嬉しいです。 Githubからどーぞ。使い方もREADMEに書いてあります。

ysugimoto / TFCRatioConverter

正規表現下手すぎなので恥ずかしい…(;´Д`) 現場からは以上です。