質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.50%
canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CreateJS

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

Q&A

解決済

1回答

3500閲覧

Android端末におけるCanvasアニメーションの速度アップ

nunclenicer.com

総合スコア6

canvas

HTML5の<canvas>要素用のタグです。CanvasはHTML5から導入された、二次元の図形描写が可能な要素です。

CreateJS

CreateJSは、HTML5でリッチコンテンツを制作できるJavaScriptライブラリ群です。JavaScriptの知識があれば、HTML5のCanvasをコントロールしコンテンツを作ることができます。

Animate CC

Animate CC(旧Flash Professional)は、アドビシステムズ社のWebアニメーション制作ツールです。描いたグラフィックにタイムラインで動きを付け、スクリプトでインタラクティブな操作を実装。動画や映像作品、インタラクティブコンテンツ、データの可視化に利用できます。

Android

Androidは、Google社が開発したスマートフォンやタブレットなど携帯端末向けのプラットフォームです。 カーネル・ミドルウェア・ユーザーインターフェイス・ウェブブラウザ・電話帳などのアプリケーションやソフトウェアをひとつにまとめて構成。 カーネル・ライブラリ・ランタイムはほとんどがC言語/C++、アプリケーションなどはJavaSEのサブセットとAndroid環境で書かれています。

0グッド

0クリップ

投稿2017/08/30 01:16

###前提・実現したいこと
【前提】
はじめて質問させていただきます。

私は現在、Adobe AnimateCCでキャラクターの
アニメーションを中心としたインタラクティブな
Canvas(CreateJS)コンテンツを作っています。

・フレームレートは12fps
・画像はイラストレーターからインポートしたベクターデータ
・随所にマスクを使っている
・グラデーションは使っていない
・音声はない
・外部化しているスクリプトやデータはない

PCやiOSではさほど問題ないのですが、
Androidの、特にFirefoxで表示させたときの
動作が非常に重く、実用に耐えません。

【実現したいこと】
Androidでも実用に耐える速度にしたいです。

根本的な解決方法でも、対処療法的な解決方法でも
構いませんので、情報をいただけませんでしょうか。

###発生している問題・エラーメッセージ

###該当のソースコード

###試したこと
・画像をビットマップ化
→ 拡大時にジャギが目立つためクライアントがNG
・フレームレートを落とす
→ すでに24fpsから12fpsまで落としており、限界

###補足情報(言語/FW/ツール等のバージョンなど)
・Flash、JavaScript(含jQuery)は経験がございます
・CreateJSはほぼ初心者です
・制作にはAdobe AnimateCC2017を使っています

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

自己解決

最終的に画像のビットマップ化で対応しましたが、
Adobe AnimateCCの機能でビットマップ化したものは
解像度が低いので、以下のような手順を踏みました。

・Adobe Animateのベクター画像をPNG画像として
200%の大きさで書き出し(このとき色数も落とす)
・書き出した画像をPhotoshopでトリミング(バッチ処理)
・Adobe Animateに読み込んで50%に縮小し、元の画像と置き換え

なお、スクリプトでカラーを変えたり、拡大表示したりするところは
ベクター画像のままにするなど使い分けをしたところ、
見た目もパフォーマンスもバッチリでした。

投稿2017/09/04 10:28

nunclenicer.com

総合スコア6

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.50%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問