Adobe Animateの出力ファイルでの画質向上のために行ったこと

こんにちは。エンジニアのichikawaです。

現在、クリッカブルなイラストにアニメーションを搭載したWebコンテンツを実装する案件に携わっており、実装ツールとしてAdobe Animate(以下「Animate」)を使っていました。
使用理由としては、複雑な形のクリックオブジェクトに対応している上、付与できるアニメーションの自由度も高かったためです。

その中で、デザイナーから支給されたIllustratorのデータをAnimateでパブリッシュ(出力)した際にイラストの線周りの画質が粗くなる現象が発生しました。

この問題がなぜ発生したと思われるか、どのような方法で対処したかを書いていこうと思います。

画質が落ちる原因考察と出力形式の違い

画質を落とす原因として2つの仮説が考えられました。

1つ目は「出力されるファイル容量が重くなりブラウザ上での処理が追いついていないこと」、2つ目は「Animateアプリケーションの設定で低画質モードになっていること」でした。

はじめに1つ目の「ファイル容量の重さ」という点について探ったところ、Animate上でのファイルの出力形式に違いがあることに気づきました。

Animateではイラスト出力方式としてビットマップ方式とベクター方式の2種類があります。Animate上での出力方式は【ファイル→パブリッシュ設定→イメージ設定】から「書き出し形式」を選択すると変更できます。

書き出し形式はプルダウン方式となっており、開くと以下の項目が出てきます。

テクスチャ：複雑なシェイプをビットマップに変換してパフォーマンスを向上させます

スプライトシート：すべての画像をスプライトシートに結合します(今回の場合は元のイラストがベクターデータなので画像以外はベクター出力)

画像アセット：読み込んだ画像をそのままの状態でパブリッシュします(上記の理由でイラストはベクター出力)

上記のうちスプライトシート方式は画像の背景色が単色で固定されてしまうため、透過画像の背景として複数の色を使用したい場合は向きません。

そのため今回は動きのあるクリッカブルなイラストを実装したかったのでテクスチャと画像アセットの2つが候補となりました。

Animate内でのビットマップ出力とベクター出力の差異をまとめると以下のようになります。

このようにどちらの方式にもファイル容量が増える原因が潜んでいました。
線をデータ化して表現するベクター出力は一見線をくっきり表示させるのに適していそうですが、Web上で表示する際にはJavaScriptが重くなってしまう可能性があるのは意外でした。

次に2つ目の仮説である「アプリケーション側の出力設定」について検証します。
Animateで出力設定を変更するためにはビットマップ方式の「高度な画質設定」というオプションを変更することで設定できました。

オプション内の設定項目

①画質

参考：https://helpx.adobe.com/jp/photoshop/using/bit-depth.html

この項目は使える色の数を表します。8bitの場合は256色、32bitの場合は約1600万色を表現できることになります。

一般的に色数と容量はトレードオフのため、色数が少ないデータなら8bitの方が軽量化できます。一方で32bitの方が使える色数が多いためグラデーション等の多色表現では32bitの方が綺麗に表示されます。
今回は多色表現であるグラデーションを使ったイラストだったので、色を綺麗に表示させるために32bitを採用しました。

②解像度

Animateでは画像出力時に高画質ディスプレイに対応できるように、元の解像度から最大3倍まで解像度を上げることが可能です。

実際に1倍書き出しと3倍書き出しの画像を比較してみます。

【1倍書き出し】

【3倍書き出し】

このように解像度の倍率を変えることで文字やオブジェクトがはっきり表示されるようになりました。

一方で、解像度の数値を上げると画質上昇と引き換えにファイルの容量は重くなります。
ある案件のFlaファイルで1倍書き出しの容量と3倍書き出しの容量を比較したところ次のようになりました。

結果的には画像の容量が重くなっても画質は変化しなかった(出力される画像そのものの画質が重要だった)ため、1つ目の仮説「ファイル容量が重かったから画質が落ちた」というのは違っていたこともわかりました。

つまり、今回直面したようなイラストの線をくっきり表示させるためには「ビットマップ方式を採用してイメージ設定で画質の数値を最大にする」という対策が有効でした。

最後に

Animate上でファイルを出力する際には出力方式と設定を見直すことで画質を向上できます。出力されるファイルの画質に悩んだ時はぜひ一度試してみてください。

ここまで読んでいただきありがとうございました。