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

概要

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

スプライトシート

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

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

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

テクスチャアトラス

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

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

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

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

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

スプライトシートの作成

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

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

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

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

    書き出しオプション 説明
    画像のサイズ スプライトシートの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、スプライトシートに含めるスプライトがすべての収まるようにシートのサイズを調整します。
    画像形式 スプライトシートを書き出すファイル形式を指定します。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 度回転させます。このオプションは一部のデータ形式でのみ使用できます。
    カット このオプションは、シートに追加されたシンボルフレームから未使用のピクセルをカットして、スプライトシート内のスペースを節約します。
    フレームをスタック このオプションを選択すると、選択したシンボル内の同じフレームが、生成されるスプライトシートに重複してコピーされないようにすることができます。

モバイルアプリ用スプライトシートのアニメーションの書き出し

モバイルアプリ用スプライトシートのアニメーションの書き出し
Train Simple - Matthew Pizzi

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

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

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

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

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

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

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

    generate-texture-atlas (2)
    テクスチャアトラスを生成
  3. テクスチャアトラス用の適切な書き出しオプションを選択します。 

    書き出しオプション 説明
    画像のサイズ テクスチャアトラスの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、テクスチャアトラスに含める画像がすべての収まるようにシートのサイズを調整します。
    画像形式 スプライトシートを書き出すファイル形式を指定します。PNG 8 bit と PNG 32 bit は、透明な背景(アルファチャンネル)の使用をサポートしています。一般に、PNG 8 bit と PNG 32 bit では、見た目にはほとんど違いがありません。PNG 32 bit のファイルは、PNG 8 bit ファイルの 4 倍の大きさになります。
    ボーダーの余白 テクスチャアトラスの外縁の余白をピクセル単位で指定します。
    シェイプの余白 テクスチャアトラス内のイメージ間の余白をピクセル単位で指定します。
    アルゴリズム

    テクスチャアトラス内にイメージを収めるのに使用するテクニックを指定します。オプションは以下の 2 つです。

    • 基本(デフォルト)
    • MaxRects
    データ形式 イメージデータの内部形式を指定します。デフォルトは JSON 形式です。
    回転 画像を 90 度回転します。このオプションは一部のデータ形式でのみ使用できます。
    傾斜させたオブジェクトをビットマップに統合 オブジェクトに傾斜変形を使用する場合は、このオプションを選択します。一部のゲームエンジンは傾斜変形を適切に解釈しないため、Animate でこれらのオブジェクトをビットマップ画像に変換します。 
  4. テクスチャアトラスの出力をプレビューするには、「プレビュー」タブをクリックします。

    texture-atlas-preview
    作成したテクスチャアトラスのプレビュー
  5. 参照」をクリックしてファイルの書き出し先をコンピューター上で選択するか、書き出し先のパスをテキスト領域に入力して、「書き出し」をクリックします。 

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

Animation.json

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

spritemap.json

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

spritemap.png

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  8. AnimateEditor.csEditor サブフォルダーに移動します。

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

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

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

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

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

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

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

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

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

注意:

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

ドキュメントをテクスチャとして書き出し
ドキュメントをテクスチャとして書き出し

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

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

シンボルの部分選択
シンボルの部分選択

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

シンボルの部分選択
シンボルの部分選択

テクスチャのパブリッシュに関するチュートリアル

テクスチャのパブリッシュに関するチュートリアル
柔軟性や忠実性を実現するためにベクターを使用してアセットを作成し、ビットマップテクスチャへとパブリッシュする方法を学びます。

本作品は Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License によってライセンス許可を受けています。  Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。

法律上の注意   |   プライバシーポリシー