質問: ### 前提・実現したいこと 【前提】 はじめて質問させていただきます。 私は現在、Adobe AnimateCCでキャラクターの アニメーションを中心としたインタラクティブな Canvas(CreateJS)コンテンツを作っています。 ・フレームレートは12fps ・画像はイラストレーターからインポートしたベクターデータ ・随所にマスクを使っている ・グラデーションは使っていない ・音声はない ・外部化しているスクリプトやデータはない PCやiOSではさほど問題ないのですが、 Androidの、特にFirefoxで表示させたときの 動作が非常に重く、実用に耐えません。 【実現したいこと】 Androidでも実用に耐える速度にしたいです。 根本的な解決方法でも、対処療法的な解決方法でも 構いませんので、情報をいただけませんでしょうか。 ### 発生している問題・エラーメッセージ ### 該当のソースコード ### 試したこと ・画像をビットマップ化 → 拡大時にジャギが目立つためクライアントがNG ・フレームレートを落とす → すでに24fpsから12fpsまで落としており、限界 ### 補足情報(言語/FW/ツール等のバージョンなど) ・Flash、JavaScript(含jQuery)は経験がございます ・CreateJSはほぼ初心者です ・制作にはAdobe AnimateCC2017を使っています
回答: 最終的に画像のビットマップ化で対応しましたが、 Adobe AnimateCCの機能でビットマップ化したものは 解像度が低いので、以下のような手順を踏みました。 ・Adobe Animateのベクター画像をPNG画像として 200%の大きさで書き出し(このとき色数も落とす) ・書き出した画像をPhotoshopでトリミング(バッチ処理) ・Adobe Animateに読み込んで50%に縮小し、元の画像と置き換え なお、スクリプトでカラーを変えたり、拡大表示したりするところは ベクター画像のままにするなど使い分けをしたところ、 見た目もパフォーマンスもバッチリでした。