スプライトシート
スプライトシートとは、いくつもの小さなグラフィックをタイル状（グリッド状）に並べたビットマップイメージファイルです。複数のグラフィックを 1 つのファイルにコンパイルしておけば、Animate などのアプリケーションでそれらのグラフィックを使用したいときに、1 個のファイルをロードするだけですみます。このようにロード効率が良いということは、ゲーム開発のようにパフォーマンスが特に重視される状況では有用です。
スプライトシートは、ムービークリップ、ボタンシンボル、グラフィックシンボル、ビットマップを適宜組み合わせて作成することができます。組み合わせるアイテムは、ライブラリパネルまたはステージのいずれかから選択できますが、同時に両方から選択することはできません。選択したシンボルのビットマップとフレームは、スプライトシート内ではそれぞれが単独のグラフィックとなります。ステージから書き出す場合、シンボルインスタンスに適用したすべての変形（拡大／縮小、傾斜など）は、書き出されたイメージに保持されます。
テクスチャアトラス
Animate では、ムービークリップ、グラフィック、ボタンなどのシンボルからテクスチャアトラスを作成できます。組み合わせるアイテムは、ライブラリパネルまたはステージのいずれかから選択できますが、同時に両方から選択することはできません。選択したシンボルのベクターとキーフレームは、テクスチャアトラス内ではそれぞれが単独のビットマップになります。ステージから書き出す場合
スプライトシートとテクスチャアトラスの違い
必要に応じてモバイルアプリでスプライトシートまたはテクスチャアトラスのいずれかを使用できます。スプライトシートとテクスチャアトラスの主な違いを次の表に示します。
| 機能 | スプライトシート | テクスチャアトラス |
| モバイルアプリでのパフォーマンス | 低 | 高 |
| アプリのロード効率 | 計算がないため、高くなります | JSON ファイルの計算もあるため、低くなります |
| サイズ | より大きなサイズを占めます | より小さなサイズを占めます |
| アニメーションの画質 | 中 | 高 |
| 生成されるファイルの数 | 2つのファイル：1 つのビットマップと 1 つの json ファイル | 変数：画像サイズに基づきます。 |
| 生成されるビットマップの数 | スプライトシート内で使用されるフレームの数に基づきます。ビットマップファイルの数が増え、スプライトシートのサイズが増加する可能性があります。 | 固有のビットマップだけがスプライトに生成されるので、合計サイズは小さくなります。 |
-
書き出しオプション 説明 画像のサイズ スプライトシートの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、スプライトシートに含めるスプライトがすべての収まるようにシートのサイズを調整します。 画像形式 スプライトシートを書き出すファイル形式を指定します。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 は、ゲームプラットフォームおよびモバイルアプリケーションへのアニメーションの書き出しに役立ちます。携帯電話やゲームエンジンでアニメーションを表示したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。
モバイルアプリまたはゲームエンジンに対するアニメーションの書き出し方法
-
書き出しオプション 説明 画像のサイズ テクスチャアトラスの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、テクスチャアトラスに含める画像がすべての収まるようにシートのサイズを調整します。 サイズを最適化 - 「サイズを最適化」オプションをオンにすると、空のピクセルがビットマップから削除され、サイズが 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
書き出されたシンボルの場合、このファイルにはアニメーションを再構成するために最低限必要となる一意の全テクスチャのビットマップ表現が含まれています。
Animate で生成されたテクスチャアトラスファイルをお気に入りのゲームエンジンに読み込むことができます。テクスチャアトラスファイルを読み込めるように、使用するゲームエンジンに対応するプラグインを作成できます。Unity ツール用にサンプルの読み込みプラグインが用意されています。
テクスチャアトラスを Unity に読み込むには、次の手順を実行します。
-
Unity 用のサンプルの読み込みプラグインをダウンロードするには、ここをクリックします。「Downloads」タブで、「Unity Plugin」と対応するバージョンを選択してダウンロードします。
unity-plugin.zip には、Plugin.cs、WrapperPlugin.cs、AnimateEditor.cs および Effect.shader の各ファイルが含まれています。
このサンプルをダウンロードすると、利用条件およびプライバシーポリシーに同意したものと見なされます。
Unity プラグインでは、Animate で生成されたテクスチャアトラスファイルに対するカラー効果をサポートしています。このプラグインでは、複数レイヤーを対象としたマスクもサポートします。マスク機能は、Unity 2017 リリース以降でのみ使用できます。
アニメーターとして引き続き、ベクター形式でコンテンツを作成し、
1. キャンバスのドキュメントを作成します。ファイル／新規を選択して、新規ドキュメントウィンドウを表示します。
2. 詳細設定タブを選択し、HTML5 キャンバスをクリックします新しい FLA ドキュメントが開きます。
3. ファイル／パブリッシュ設定をクリックします。「基本」タブでドキュメントをテクスチャとして書き出しが有効化されている場合、「画像設定」タブにはテクスチャパブリッシングオプションが表示されます。デフォルトでは、すべてのシンボルがテクスチャパブリッシングに含まれています。選択的にテクスチャのシンボルを選択するには、隣接する設定アイコンをクリックします。
デフォルトでは、テクスチャのパブリッシュは 2 倍の解像度に設定されています。さらに、
注意：
テクスチャパブリッシングは HTML5 Canvas ドキュメントタイプにのみ使用できます。
ベクターファイル／ラスターファイルの選択は、ファイルサイズとパフォーマンスを選ぶ場合と似ています。HTML5 プラットフォームはラスターコンテンツ用に最適化されています。したがって、一部の複雑なシェイプでは、ベクター画像をラスターへと事前変換するとよいでしょう。一部の基本コンテンツでも、ベクターコンテンツを使用できます。Animate では、シンボルの部分選択ダイアログからこのオプションを提供します。シンボルの部分選択を行うと、ラスターに変換するシンボルを選択しながら、残りをベクターとして残すことができます。
シンボルの部分選択を開くには、パブリッシュ設定ダイアログで「変更」をクリックし、リストからシンボルを選択します。デフォルトでは、すべてのシンボルが選択されています。
Animate では、ビットマップテクスチャによって様々なプラットフォームでのアニメーションのパフォーマンスが向上します。ビットマップテクスチャを使用してベクターの複雑さを軽減したい場合は、この例の最後にあるチュートリアルをご覧になり、次の手順に従ってください。
Twitter™ および Facebook の投稿には、Creative Commons の規約内容は適用されません。