モバイルアプリおよびゲームエンジン用アニメーションの書き出し

Animate CC を使用して、スプライトシートまたはテクスチャアトラスのアニメーションを作成し、それらをモバイルアプリやゲームエンジン用に書き出すことができます。 

スプライトシート

スプライトシートとは、いくつもの小さなグラフィックをタイル状（グリッド状）に並べたビットマップイメージファイルです。複数のグラフィックを 1 つのファイルにコンパイルしておけば、Animate などのアプリケーションでそれらのグラフィックを使用したいときに、1 個のファイルをロードするだけですみます。このようにロード効率が良いということは、ゲーム開発のようにパフォーマンスが特に重視される状況では有用です。

スプライトシートは、ムービークリップ、ボタンシンボル、グラフィックシンボル、ビットマップを適宜組み合わせて作成することができます。組み合わせるアイテムは、ライブラリパネルまたはステージのいずれかから選択できますが、同時に両方から選択することはできません。選択したシンボルのビットマップとフレームは、スプライトシート内ではそれぞれが単独のグラフィックとなります。ステージから書き出す場合、シンボルインスタンスに適用したすべての変形（拡大／縮小、傾斜など）は、書き出されたイメージに保持されます。

テクスチャアトラス

テクスチャアトラスは単一の大きな画像としてのテクスチャの集まりです。テクスチャアトラスを作成し、ゲームアプリで使用することで、ゲームを最適化することができます。 

Animate では、ムービークリップ、グラフィック、ボタンなどのシンボルからテクスチャアトラスを作成できます。組み合わせるアイテムは、ライブラリパネルまたはステージのいずれかから選択できますが、同時に両方から選択することはできません。選択したシンボルのベクターとキーフレームは、テクスチャアトラス内ではそれぞれが単独のビットマップになります。ステージから書き出す場合、シンボルインスタンスに適用したすべての変形（拡大／縮小、傾斜など）は、書き出されたイメージに保持されます。

スプライトシートとテクスチャアトラスの違い

必要に応じてモバイルアプリでスプライトシートまたはテクスチャアトラスのいずれかを使用できます。スプライトシートとテクスチャアトラスの主な違いを次の表に示します。 

スプライトシートを作成するには、次の手順を実行します。 

ゲーム開発者は、Animate を使用してアニメーションを編成し、それをテクスチャアトラスとして Unity ゲームエンジンまたは任意のゲームプラットフォームに書き出すことができます。 

Animate でテクスチャアトラスを生成し、Unity に読み込むプロセスを次の図に示します。

アニメーションのテクスチャアトラスを生成するには、次の手順を実行します。

生成されたテクスチャアトラスの出力先フォルダーには、次のファイルが含まれています。

Animation.json

このファイルにはアニメーションに関する情報が含まれています。 

spritemap.json

このファイルには spritesheet.png ファイルに関する情報が含まれています。

spritemap.png

書き出されたシンボルの場合、このファイルにはアニメーションを再構成するために最低限必要となる一意の全テクスチャのビットマップ表現が含まれています。

生成されたテクスチャアトラスは、適切な読み込みプラグインがインストールされていれば Unity などの任意のゲームエンジンで使用できます。

Animate で生成されたテクスチャアトラスファイルをお気に入りのゲームエンジンに読み込むことができます。テクスチャアトラスファイルを読み込めるように、使用するゲームエンジンに対応するプラグインを作成できます。Unity ツール用にサンプルの読み込みプラグインが用意されています。 

テクスチャアトラスを Unity に読み込むには、次の手順を実行します。

WrapperPlugin.cs ファイルを要件に合わせて修正し、プラグインをカスタマイズすることもできます。

Unity プラグインでは、Animate で生成されたテクスチャアトラスファイルに対するカラー効果をサポートしています。このプラグインでは、複数レイヤーを対象としたマスクもサポートします。マスク機能は、Unity 2017 リリース以降でのみ使用できます。 

アニメーターは、引き続きベクター形式でコンテンツのオーサリングをおこない、HTML 5 プラットフォーム用のベクター形式またはラスター形式として書き出すことができます。アニメーションのパフォーマンスを強化するために、パブリッシュ設定にアニメーションをテクスチャアトラスとして書き出すオプションが追加されました。

ファイル／パブリッシュ設定をクリックします。「基本」タブでドキュメントをテクスチャとして書き出しが有効化されている場合、「画像設定」タブにはテクスチャパブリッシングオプションが表示されます。デフォルトでは、すべてのシンボルがテクスチャパブリッシングに含まれています。選択的にテクスチャのシンボルを選択するには、隣接する設定アイコンをクリックします。

このオプションはアセットのサイズを増加させる可能性がありますが、パフォーマンスを向上させます。また、HiDPI ディスプレイを対象とするために、画像の元の解像度の 2 倍および 3 倍の単位で画像の解像度を増加できます。解像度設定を変更するには、下図に示すように、「ドキュメントをテクスチャとして書き出し」オプションの隣にあるスパナアイコンをクリックします。解像度に隣接する数字をドラッグして、2 倍および 3 倍の倍数にします。

デフォルトでは、テクスチャのパブリッシュは 2 倍の解像度に設定されています。また、解像度の範囲は、0.3 ～ 3 倍に変更できます。

ベクターファイル／ラスターファイルの選択は、ファイルサイズとパフォーマンスを選ぶ場合と似ています。HTML5 プラットフォームはラスターコンテンツ用に最適化されています。したがって、一部の複雑なシェイプでは、ベクター画像をラスターへと事前変換するとよいでしょう。一部の基本コンテンツでも、ベクターコンテンツを使用できます。Animate では、シンボルの部分選択ダイアログからこのオプションを提供します。シンボルの部分選択を行うと、ラスターに変換するシンボルを選択しながら、残りをベクターとして残すことができます。

シンボルの部分選択を開くには、パブリッシュ設定ダイアログで「変更」をクリックし、リストからシンボルを選択します。デフォルトでは、すべてのシンボルが選択されています。

リストから選択したシンボルを選択します。