[style-letter-01]見[/style-letter-01]ていて気持ちの良い動きのアニメーションコンテンツを作りたい。気持ちの良い動きにするには１秒あたりのフレーム数（絵の数）が大事だと思います。
アニメーションに使用する[style-referencing-01 id="title-01"]CreateJS[/style-referencing-01]にも１秒あたりのフレーム数：FPS（frame per second）の設定がありますが、[style-referencing-01 id="title-02"]アニメーションのFPS[/style-referencing-01]って幾つくらいに設定するのが適当なんでしょうか。 [style-list-01 title="アニメーションコンテンツ"]

• [style-letter-02]FPS12[/style-letter-02][style-referencing-01 id="title-03"]1秒間に12フレームに設定、旧コンテンツ[/style-referencing-01]
• [style-letter-02]FPS24[/style-letter-02][style-referencing-01 id="title-04"]1秒間に24フレームに設定、現在公開しています。[/style-referencing-01]

[/style-list-01]

[style-title-01]スマートフォン[/style-title-01]

メインターゲットの端末をスマートフォンにしたいので、スマートフォンでの[style-referencing-01 id="title-05"]パフォーマンスチェック[/style-referencing-01]を行いましたが、AndroidではFPSが14程度でしか動きませんでした。

[style-comment-01]

• ※ iPhoneはFPS24で動きました。ただ別のアニメーションでiPhoneの方がFPSが下がったので得手不得手があるのでしょう。（OSでなくブラウザーの違いかもしれません）

[/style-comment-01]

[style-title-01]FPS24[/style-title-01]

設定したFPSで動かないとコマ落ちしたアニメーションのようで見苦しい。ハードルを下げてFPSを12で動くように設定しましたが、アニメーションの動きが何かぎこちない。やはりFPSが12では気持ちの良い動きにならない。何とかFPSが24で動くようにチューニングすることにしました。ここではFPSが24で動く為に行ったポイントを記載して行こうと思います。

[style-list-01 title="チューニングのポイント"]

• [style-letter-02]PLAN[/style-letter-02]構成要素に優先順位をつける
• [style-letter-02]ILLUST[/style-letter-02]イラストのパスの数を減らす
• [style-letter-02]CACHE[/style-letter-02]キャッシュを使って描写を軽減

[/style-list-01]

[style-title-01]構成要素に優先順位をつける[/style-title-01]

[style-referencing-01 id="title-06"]コンテンツのイメージ[/style-referencing-01]はハワイアンのメロディーにのせてフラダンスを踊る女の子です。時間の経過を表現する為に雲を大きくしたり、ハワイらしさをだしたくてヤシの木を揺らしたりしましたが、まずはフラダンスをきちんと見せる事を優先して、時間の経過は空の色で、ヤシの木は揺らさない事にしました。日が暮れて夜空になると星がきらめき流れ星が見れます、とても重い処理なので女の子は座ってもらって動きを止めました。

[style-comment-01]

• ※ 無数の星のきらめきをCreateJSのフィルターを使って表現しましたが、通常の処理では好調だったiPhoneが旧に重くなります、この処理はAndroidの方がFPSは良かったです。

[/style-comment-01]

[style-title-01]イラストのパスの数を減らす[/style-title-01]

矩形や丸といった単純な図形は、直接CreateJSのGraphicsメソッドをコーディングしましたが、女の子やヤシの木といったイラストはソフトを使ってコードを書き出しました。私はAdobe Illustoratorで描いたVectorデータをそのままAdobe Flash Professional CS6にはりつけて、拡張機能（CCからは標準搭載）の[style-referencing-01 id="title-07"]Tool kit for CreateJS[/style-referencing-01]で書き出しました。Illustoratorでの作業の時に調子に乗ってパスを多く指定すると書き出されるCreateJSのコードが増え描写も重くなります。そこで見えない部分は省略し、カーブもなるたけ少ないパスで描くようにします。今回は女の子の髪の毛と腰蓑を簡略化して顔の輪郭も正円に近くしました。かえってまとまった感じになったと思います。

[style-title-01]キャッシュを使って描写を軽減[/style-title-01]

イラストの描画はCreateJSのShapeにGraphicsメソッドを使ってパスを指定して描画します。どうもフレーム毎にこの描画を繰り返すようなのですが、パスの変更がないイラストは一旦画像化して[style-referencing-01 id="title-08"]キャッシュ[/style-referencing-01]する事で処理を軽減出来るようです。透過や位置の移動に関してはShapeにかけるので画像化しても有効なようです。空、芝生、ヤシの木、貝殻とヘッダー・フッターのイラスト等々、cache（キャッシュ）しました。たまにcacheすると図形がにじむものもあるのでその都度調整します。

[style-title-01]これから[/style-title-01]

スマートフォンでFPS24で動くのを確認出来ました、他にページが開かれていたり、アプリが起動しているとFPSが落ちるのでギリギリでしょうか。ちょこちょこ仕掛けを入れて行きたいのですが、入れすぎてFPSを落としてもしょうがないので程々にして、次のアニメーションコンテンツを考えて行きたいです。

[style-reference-01][style-title-01 id="title-01"]- CreateJS -[/style-title-01][style-link-01 href="http://gihyo.jp/design/serial/01/createjs"]HTML5のCanvasでつくるダイナミックな表現―CreateJSを使う[/style-link-01] [style-comment-01]CreateJSはGrant Skinner氏作成のJavaScriptライブラリー、野中文雄氏がサンプル付きで説明しています。[/style-comment-01] [style-title-01 id="title-02"]- アニメーションのFPS -[/style-title-01][style-link-01 href="http://blog.livedoor.jp/kohta0130/archives/50255584.html"]アニメから学ぶアニメーション[/style-link-01][style-comment-01]トランジスタ・スタジオの森江康太氏のブログでアニメーションのFPSについての説明をされています。[/style-comment-01] [style-title-01 id="title-03"]- FPS12 -[/style-title-01][style-link-01 href="http://furexfure.com/me2/"]ALOHA GIRL FPS12[/style-link-01][style-comment-01]CreateJSを使用したアニメーションページのFPS12設定版です。現在はFPS24版を公開したので退避したコンテンツです。[/style-comment-01] [style-title-01 id="title-04"]- FPS24 -[/style-title-01][style-link-01 href="http://furexfure.com/me/?n=2"]ALOHA GIRL[/style-link-01][style-comment-01]CreateJSを使用したアニメーションページのFPS24設定版です。見ていてリラックス出来るコンテンツをテーマにしています。パフォーマンスチェックをされる場合は[style-link-01 href="http://furexfure.com/me/?stats=fps&n=2"]パフォーマンスチェック[/style-link-01]からどうぞ。[/style-comment-01] [style-title-01 id="title-05"]- パフォーマンスチェック -[/style-title-01][style-link-01 href="http://tmlife.net/programming/javascript/lasted-stats-js-usage.html"]FPS を表示する JavaScript ライブラリ『Stats.js』 の使い方メモ[/style-link-01][style-comment-01]パフォーマンスチェックにはMr.doob氏のStats.jsを使用しました。使い方は「tmlife.net」を参考にしました。尚r9で使用方法が変わった旨の記事（2012.04.29）が有りましたが、最新（r11）では再度戻っている気がするので古い方の記事をリンクしました。[/style-comment-01] [style-title-01 id="title-06"]- コンテンツのイメージ -[/style-title-01][style-link-01 href="https://www.youtube.com/watch?v=RlMWJBchtGQ"]gorie[/style-link-01][style-comment-01]ハワイの芝生でダンスをするイメージがあり、それっぽい素材がないかを探していたらガレッジセールのゴリさんの昔のPV「Mickey」がそれっぽかったので参考にしました。リンク先のYoutubeでは1分15秒辺りのシーンです。[/style-comment-01] [style-title-01 id="title-07"]- Toolkit for CreateJS -[/style-title-01][style-link-01 href="http://dev.classmethod.jp/etc/toolkit-for-createjs-1/"]Flash Pro CS6 の Toolkit for CreateJS を使ってみました。[/style-link-01] [style-comment-01]クラスメッソドの記事です。私はFlash Professional CS6を使用しているのでこの記事の通りですが、Flash Professional CCの人はこちらが参考になります。[style-link-01 href="http://www.atmarkit.co.jp/ait/articles/1308/26/news008.html"]Toolkit for CreateJSによるFlashのHTML5書き出し[/style-link-01][/style-comment-01] [style-title-01 id="title-08"]- キャッシュ -[/style-title-01][style-link-01 href="http://espelada.sakura.ne.jp/chaotic/post-190/"]Cacheを使ってアニメーションのフレームレートを改善する ～ CreateJS公式サンプルを使ってみる (第4回)[/style-link-01] [style-comment-01]cacheと描画の関係性について説明されています。cacheメソッドの基本的な使い方は[style-link-01 href="http://www40.atwiki.jp/spellbound/pages/1919.html"]ActionScript入門Wiki[/style-link-01]のEaselJS関係のページが参考になります。[/style-comment-01] [/style-reference-01]