マニュアル キャンセル

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

  1. Adobe Animate ユーザーガイド
  2. Animate の概要
    1. Animate の新機能
    2. ビジュアル用語集
    3. Animate の必要システム構成
    4. Animate キーボードショートカット
    5. Animate での複数のファイルタイプの取り扱い
  3. アニメーション
    1. Animate のアニメーションの基本
    2. Animate でフレームとキーフレームを使用する方法
    3. Animate でのフレームアニメーション
    4. Animate でのクラシックトゥイーンアニメーションの操作
    5. ブラシツール
    6. モーションガイド
    7. モーショントゥイーンと ActionScript 3.0
    8. モーショントゥイーンアニメーションについて
    9. モーショントゥイーンアニメーション
    10. モーショントゥイーンアニメーションの作成
    11. プロパティキーフレームの使用
    12. トゥイーンを使用した位置のアニメーション化
    13. モーションエディターを使用したモーショントゥイーンの編集
    14. トゥイーンアニメーションのモーションパスの編集
    15. モーショントゥイーンの操作
    16. カスタムイージングの追加
    17. モーションプリセットの作成と適用
    18. アニメーションのトゥイーンスパンの設定
    19. XML ファイルとして保存したモーショントゥイーンの操作
    20. モーショントゥイーンとクラシックトゥイーン
    21. シェイプトゥイーン
    22. Animate のボーンツールアニメーションの使用
    23. Animate でのキャラクターリグの操作
    24. Adobe Animate でのマスクレイヤーの使用
    25. Animate でのシーンの操作
  4. インタラクティブ機能
    1. Animate でのボタンの作成
    2. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. Animate のコードスニペットを使用したインタラクティブ機能の追加
    5. カスタム HTML5 コンポーネントの作成
    6. HTML5 Canvas でのコンポーネントの使用
    7. カスタムコンポーネントの作成例
    8. カスタムコンポーネントのコードスニペット
    9. ベストプラクティス - Animate を使用した広告
    10. バーチャルリアリティの作成と公開
  5. ワークスペースとワークフロー
    1. ペイントブラシの作成と管理
    2. HTML5 Canvas ドキュメントでの Google フォントの使用
    3. Creative Cloud ライブラリと Adobe Animate の使用
    4. Animate のステージとツールパネルの使用
    5. Animate ワークフローとワークスペース
    6. HTML5 Canvas ドキュメントでの Web フォントの使用
    7. タイムラインと ActionScript
    8. 複数のタイムラインの操作
    9. 環境設定
    10. Animate オーサリングパネルの使用
    11. Animate でのタイムラインレイヤーの作成
    12. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    13. オブジェクトの移動とコピー
    14. テンプレート
    15. Animate での検索と置換
    16. 取り消し、やり直し、ヒストリーパネル
    17. キーボードショートカット
    18. Animate でのタイムラインの使用
    19. HTML 拡張機能の作成
    20. 画像とアニメーション GIF の最適化オプション
    21. 画像および GIF の書き出し設定
    22. Animate のアセットパネル
  6. マルチメディアとビデオ
    1. Animate のグラフィックオブイジェクトの変形と組み合わせ
    2. Animate でのシンボルインスタンスの作成と操作
    3. 画像トレース
    4. Adobe Animate でのサウンドの使用方法
    5. SVG ファイルの書き出し
    6. Animate で使用するビデオファイルの作成
    7. Animate にビデオを追加する方法
    8. ビデオのキューポイントの操作
    9. Animate でのオブジェクトの描画および作成
    10. 線とシェイプの変更
    11. Animate CC での線、塗り、グラデーション
    12. Adobe Premiere Pro と After Effects の使用
    13. Animate CC のカラーパネル
    14. Animate で Flash CS6 ファイルを開く
    15. Animate でのクラシックテキストの操作
    16. Animate へのアートワークの挿入
    17. Animate に読み込まれたビットマップ
    18. 3D グラフィック
    19. Animate でのシンボルの操作
    20. Adobe Animate での線とシェイプの描画
    21. Animate でのライブラリの使用
    22. サウンドの書き出し
    23. Animate CC でのオブジェクトの選択
    24. Animate での Illustrator AI ファイルの操作
    25. スプレーブラシツールでのパターンの適用
    26. ブレンドモードの適用
    27. オブジェクトの配置
    28. コマンドメニューを使用したタスクの自動化
    29. 多言語テキスト
    30. Animate でのカメラの使用
    31. Adobe Scout での Animate の使用
    32. Fireworks ファイルの作業
    33. グラフィックフィルター
    34. サウンドと ActionScript
    35. 描画の環境設定
    36. ペンツールを使用した描画
  7. プラットフォーム
    1. 他のドキュメントタイプ形式への Animate プロジェクトの変換
    2. カスタムプラットフォームサポート
    3. Animate での HTML5 Canvas ドキュメントの作成およびパブリッシュ
    4. WebGL ドキュメントの作成とパブリッシュ
    5. AIR for iOS 用アプリケーションのパッケージ化
    6. AIR for Android アプリケーションのパブリッシュ
    7. デスクトップ用 Adobe AIR のパブリッシュ
    8. ActionScript パブリッシュ設定
    9. ベストプラクティス - アプリケーションでの ActionScript の整理
    10. Animate での ActionScript の使用
    11. ベストプラクティス - アクセシビリティガイドライン
    12. Animate ワークスペースのアクセシビリティ
    13. スクリプトの記述と管理
    14. カスタムプラットフォームサポートの有効化
    15. カスタムプラットフォームサポートの概要
    16. アクセシビリティコンテンツの作成
    17. カスタムプラットフォームサポートプラグインの操作
    18. ActionScript 3.0 のデバッグ
    19. カスタムプラットフォームサポートの有効化
  8. 書き出しとパブリッシュ
    1. Animate CC からファイルを書き出す方法
    2. OAM パブリッシング
    3. SVG ファイルの書き出し
    4. Animate によるグラフィックとビデオの書き出し
    5. AS3 ドキュメントのパブリッシュ
    6. モバイルアプリおよびゲームエンジン用アニメーションの書き出し
    7. サウンドの書き出し
    8. QuickTime ビデオファイルの書き出し
    9. ActionScript を使用した外部ビデオ再生の制御
    10. ベストプラクティス - モバイルデバイス向けのコンテンツ作成のヒント
    11. ベストプラクティス - ビデオ規則
    12. ベストプラクティス - SWF アプリケーションのオーサリングガイドライン
    13. ベストプラクティス - FLA ファイルの構造化
    14. FLA ファイルを Animate 向けに最適化するベストプラクティス
    15. ActionScript パブリッシュ設定
    16. Animate のパブリッシュ設定の指定
    17. プロジェクターファイルの書き出し
    18. 画像とアニメーション GIF の書き出し
    19. HTML パブリッシュ用テンプレート
    20. Adobe Premiere Pro と After Effects の使用
    21. アニメーションのクイック共有とパブリッシュ

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

概要

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

スプライトシート

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

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

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

テクスチャアトラス

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

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

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

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

機能

スプライトシート

テクスチャアトラス

モバイルアプリでのパフォーマンス

アプリのロード効率

計算がないため、高くなります

JSON ファイルの計算もあるため、低くなります

サイズ

より大きなサイズを占めます

より小さなサイズを占めます

アニメーションの画質

生成されるファイルの数

2 つのファイル:1 つのビットマップと 1 つの json ファイル

変数:画像サイズに基づきます。

生成されるビットマップの数

スプライトシート内で使用されるフレームの数に基づきます。ビットマップファイルの数が増え、スプライトシートのサイズが増加する可能性があります。

固有のビットマップだけがスプライトに生成されるので、合計サイズは小さくなります。

スプライトシートの作成

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

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

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

  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 度回転させます。このオプションは一部のデータ形式でのみ使用できます。

    カット

    このオプションは、シートに追加されたシンボルフレームから未使用のピクセルをカットして、スプライトシート内のスペースを節約します。

    フレームをスタック

    このオプションを選択すると、選択したシンボル内の同じフレームが、生成されるスプライトシートに重複してコピーされないようにすることができます。

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

    書き出しオプション 説明
    画像のサイズ テクスチャアトラスの合計サイズをピクセル単位で指定します。デフォルトの設定は「自動サイズ調整」で、テクスチャアトラスに含める画像がすべての収まるようにシートのサイズを調整します。
    サイズを最適化
    • 「サイズを最適化」オプションをオンにすると、空のピクセルがビットマップから削除され、サイズが 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 ファイルを最適化」オプションがオフの場合、このオプションは、インデントを保持してわかりやすい名前で書き出します。
  4. シンボルをサイズに基づいて複数のビットマップに書き出すこともできます。

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

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

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

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

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

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

Animation.json

このファイルにはアニメーションに関する情報が含まれています。同一のフレームは、デフォルトで、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 リリース以降でのみ使用できます。 

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

  1. プロパティインスペクターパネルで、「パブリッシュ設定」をクリックします。

  2. 基本」タブで、ドキュメントをテクスチャとして書き出し」に隣接するスパナアイコンを選択します。

  3. イメージ設定」タブで、「変更」をクリックして、任意のシンボルを選択します。

  4. OK」をクリックします。

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

ビットマップテクスチャを使用したアニメーションの実行方法については、このビデオをご覧ください。
アドビのロゴ

アカウントにログイン