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

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

スプライトシート

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

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

テクスチャアトラス

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

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

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

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

スプライトシートの作成

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

モバイルアプリまたはゲームエンジンに対するアニメーションの書き出し

Animate は、ゲームプラットフォームおよびモバイルアプリケーションへのアニメーションの書き出しに役立ちます。携帯電話やゲームエンジンでアニメーションを表示したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

モバイルアプリまたはゲームエンジンに対するアニメーションの書き出し方法

テクスチャアトラスの作成

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

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

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

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

Animation.json

このファイルにはアニメーションに関する情報が含まれています。同一のフレームは、デフォルトで、Animation.json ファイルで最適化（統合）されます。

spritemap.json

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

spritemap.png

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

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

テクスチャアトラスを Unity に読み込む

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

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

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

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

テクスチャパブリッシング

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

1. キャンバスのドキュメントを作成します。ファイル／新規を選択して、新規ドキュメントウィンドウを表示します。

2. 詳細設定タブを選択し、HTML5 キャンバスをクリックします新しい FLA ドキュメントが開きます。

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

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

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

 テクスチャパブリッシングは HTML5 Canvas ドキュメントタイプにのみ使用できます。

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

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

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

ビットマップテクスチャによるグラフィックパフォーマンスの向上

Animate では、ビットマップテクスチャによって様々なプラットフォームでのアニメーションのパフォーマンスが向上します。ビットマップテクスチャを使用してベクターの複雑さを軽減したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。

パフォーマンスを向上させるためにアセットをビットマップテクスチャとしてパブリッシュする方法