マニュアルキャンセル

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

検索

最終更新日 : Jan 19, 2022 03:39:37 AM GMT

スプライトシートまたはテクスチャアトラスを作成して、モバイルアプリおよびゲームエンジン用のアニメーションを書き出します。プラグインを使用して、テクスチャアトラスを Unity またはお気に入りのゲームエンジンに読み込ませます。

概要

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

スプライトシート

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

フレーム単位のアニメーション内のスプライトに含まれるスプライトシート。

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

テクスチャアトラス

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

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

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

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

機能	スプライトシート	テクスチャアトラス
モバイルアプリでのパフォーマンス	低	高
アプリのロード効率	計算がないため、高くなります	JSON ファイルの計算もあるため、低くなります
サイズ	より大きなサイズを占めます	より小さなサイズを占めます
アニメーションの画質	中	高
生成されるファイルの数	2 つのファイル：1 つのビットマップと 1 つの json ファイル	変数：画像サイズに基づきます。
生成されるビットマップの数	スプライトシート内で使用されるフレームの数に基づきます。ビットマップファイルの数が増え、スプライトシートのサイズが増加する可能性があります。	固有のビットマップだけがスプライトに生成されるので、合計サイズは小さくなります。

スプライトシートの作成

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

ライブラリ内のシンボルまたはステージ上のシンボルインスタンスを 1 つ以上選択します。ビットマップも選択できます。

選択内容を右クリックし、「スプライトシートを生成」を選択します。

スプライトシートを生成ダイアログボックスで必要なオプションを選択し、「書き出し」をクリックします。

書き出しオプション	説明
画像のサイズ	スプライトシートの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、スプライトシートに含めるスプライトがすべての収まるようにシートのサイズを調整します。
画像形式	スプライトシートを書き出すファイル形式を指定します。PNG 8 bit と PNG 32 bit は、透明な背景（アルファチャンネル）の使用をサポートしています。PNG 24 bit および JPEG は、透明な背景をサポートしません。一般に、PNG 8 bit と PNG 32 bit では、見た目にはほとんど違いがありません。PNG 32 bit のファイルは、PNG 8 bit ファイルの 4 倍の大きさになります。
ボーダーの余白	スプライトシートの外縁の余白をピクセル単位で指定します。
シェイプの余白	スプライトシート内のイメージ間の余白をピクセル単位で指定します。
アルゴリズム	スプライトシート内にイメージを収めるのに使用するテクニックを指定します。オプションは以下の 2 つです。基本（デフォルト） MaxRects
データ形式	イメージデータの内部形式を指定します。書き出し後のスプライトシートのワークフローに最も適した形式を選択します。
回転	スプライトを 90 度回転させます。このオプションは一部のデータ形式でのみ使用できます。
カット	このオプションは、シートに追加されたシンボルフレームから未使用のピクセルをカットして、スプライトシート内のスペースを節約します。
フレームをスタック	このオプションを選択すると、選択したシンボル内の同じフレームが、生成されるスプライトシートに重複してコピーされないようにすることができます。

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

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

ライブラリで、ムービークリップを幹クリックします。

「スプライトシートを生成」を選択します。

スプライトシートダイアログボックスで、必要なオプションを選択します。

「書き出し」をクリックします。

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

アニメーションを書き出すためのその他のオプションについては、このビデオをご覧ください。

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

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

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

テクスチャアトラスの生成と Unity へ読み込みのワークフローを表すイラスト

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

Animate では、ライブラリで選択したシンボルまたはステージ上のシンボルインスタンス用のテクスチャアトラスを生成できます。

シンボルを右クリックし、メニューから「テクスチャアトラスを生成」を選択します。テクスチャアトラスを生成ウィンドウが表示されます。

テクスチャアトラスを生成

テクスチャアトラス用の適切な書き出しオプションを選択します。

書き出しオプション	説明
画像のサイズ	テクスチャアトラスの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、テクスチャアトラスに含める画像がすべての収まるようにシートのサイズを調整します。
サイズを最適化	「サイズを最適化」オプションをオンにすると、空のピクセルがビットマップから削除され、サイズが 2 のべき乗ではなくなります（デフォルトオプション）。これは、生成されるすべてのビットマップに適用されます。「サイズを最適化」オプションがオフの場合、ビットマップは選択されたサイズに基づいて生成されます。
画像形式	スプライトシートを書き出すファイル形式を指定します。PNG 8 bit と PNG 32 bit は、透明な背景（アルファチャンネル）の使用をサポートしています。一般に、PNG 8 bit と PNG 32 bit では、見た目にはほとんど違いがありません。PNG 32 bit のファイルは、PNG 8 bit ファイルの 4 倍の大きさになります。
解像度	0.3 ～ 3.0 の範囲の任意の値を選択します。
ボーダーの余白	テクスチャアトラスの外縁の余白をピクセル単位で指定します。
シェイプの余白	テクスチャアトラス内のイメージ間の余白をピクセル単位で指定します。
アルゴリズム	テクスチャアトラス内にイメージを収めるのに使用するテクニックを指定します。オプションは以下の 2 つです。基本 MaxRects（デフォルト）
データ形式	イメージデータの内部形式を指定します。デフォルトは JSON 形式です。
回転	画像を 90 度回転します。このオプションは一部のデータ形式でのみ使用できます。
傾斜させたオブジェクトをビットマップに統合	オブジェクトに傾斜変形を使用する場合は、このオプションを選択します。一部のゲームエンジンは傾斜変形を適切に解釈しないため、Animate でこれらのオブジェクトをビットマップ画像に変換します。
Animation.json ファイルを最適化	「Animation.json ファイルを最適化」オプションがオンの場合、このオプションは、インデント、分解されたマトリックスを削除し、使用される名前を短縮します（デフォルトオプション）。「Animation.json ファイルを最適化」オプションがオフの場合、このオプションは、インデントを保持してわかりやすい名前で書き出します。

シンボルをサイズに基づいて複数のビットマップに書き出すこともできます。

複数のビットマップでテクスチャアトラスを生成

選択した画像サイズを超えるアセットの場合、警告が表示されます。

テクスチャアトラスの出力をプレビューするには、「プレビュー」タブをクリックします。

作成したテクスチャアトラスのプレビュー

「参照」をクリックしてファイルの書き出し先をコンピューター上で選択するか、書き出し先のパスをテキスト領域に入力して、「書き出し」をクリックします。

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

Animation.json

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

spritemap.json

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

spritemap.png

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

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

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

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

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

Unity で、特定の場所にプロジェクトを作成します。その場所に、Assets という名前のサブフォルダーを含むフォルダーが作成されます。

Assets の下に Resources と Editor の 2 つのサブフォルダーを作成します。

Unity 用のサンプルの読み込みプラグインをダウンロードするには、ここをクリックします。「Downloads」タブで、「Unity Plugin」と対応するバージョンを選択してダウンロードします。

unity-plugin.zip には、Plugin.cs、WrapperPlugin.cs、AnimateEditor.cs および Effect.shader の各ファイルが含まれています。

このサンプルをダウンロードすると、利用条件およびプライバシーポリシーに同意したものと見なされます。

Animation.json、spritemap.json、spritemap.png などのテクスチャアトラスファイルと、Plugin.cs や Effect.shader などの Unity プラグインファイルを Assets／Resources に移動します。

AnimateEditor.cs ファイルと WrapperPlugin.cs ファイルを Assets フォルダーに移動します。

Unity で、AnimateEditor.cs ファイルをクリックし、Main Camera（メインカメラ）にドラッグします。

再生します。プロジェクトを再生すると、sprite map が様々なスプライトに分割されます。

AnimateEditor.cs を Editor サブフォルダーに移動します。

Unity で、WrapperPlugin.cs ファイルをクリックし、Main Camera（メインカメラ）にドラッグします。また、Main Camera から AnimateEditor.cs を選択解除または削除します。

要件に応じて、出力を再生または公開します。

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 では、シンボルの部分選択ダイアログからこのオプションを提供します。シンボルの部分選択を行うと、ラスターに変換するシンボルを選択しながら、残りをベクターとして残すことができます。

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