この3部シリーズを締めくくるために、ファイルオブジェクト機能を利用してゲームの複数のアセットのアニメーションプロセスを高速化する方法と、ゲームエンジンで使用するためにグラフィックをエクスポートする方法を紹介します。

 

このプロトタイプでは、パズルのすべてのピースが同じアニメーションを共有しています。

次の手順では、このタスクを達成するための効率的な方法を示します。

プロキシオブジェクトのアニメーション化

まず、後でカラフルなグラフィックに置き換えられるプロキシ/テンプレートグラフィックを作成することから始めましょう。私は単に赤いピースのコピーを作成し、それをグレーに変換しました。このパズルのピースは、猫とブロックの2つの部分で構成されています。

 

グラフィックを透明なPNGとしてエクスポートします。

 

次に、新しいドキュメントを作成し、ファイル-インポート-ファイルオブジェクトの作成を使用して、エクスポートされたグラフィックをファイルオブジェクトとして配置します。

 

タイムラインパネルを有効にして、新しいタイムラインを作成します。キャラクターと同様に、ピースのアニメーションのさまざまなシーケンスを使用できます。 IDLEアニメーションループから始めます。

 

 

忘れないでください-補間を有効にするには、レイヤーを選択し、このレイヤーのキーフレームを有効にするをクリックする必要があります。

 

前に使用したのと同じ方法を使用して、プレーヤーがヒントを必要とするときに再生されるこのループをアニメーション化しました。基本的にはパーツのスカッシュとストレッチですが、速度がわずかに異なります。

 

新しいタイムラインを作成して、別のアニメーションシーケンスを追加します。今回は、ピースが「爆発」する（またはステージを離れる）ときの動きを追加します。

 

以下に、このアニメーションの主要な進捗状況を示します。

 

Opacityプロパティを使用して、内側のピースが消えるアニメーションを作成できました。不透明度をアニメーション化すると、キーフレームの下に半菱形が表示されます。

 

何かが足りないと感じたので、余分なレイヤーを追加し、この「ねじれ」形状を描いて、猫のグラフィックと共に回転させました。補間モードでアニメーション化する前に、新しい図面をファイルオブジェクトに変換することを忘れないでください。

 

以下に、このアニメーションの進行状況を見ることができます。回転するグラフィックが白に変更され、外側のピースの不透明度がアニメーション化されたため、ピース全体がゲームシーンから消えます。

 

 

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

アニメーションのグラフィックスを置き換える

OK。それがこのアセットのアニメーションである場合、それをゲームの他のすべてのグラフィックスにどのように伝達できますか？

簡単な方法をお見せしましょう。

 

灰色のプロキシオブジェクトを置き換える残りの部分をエクスポートすることから始めましょう。以下に示すように、これらはピースの異なる色（赤、青、緑、黄色）になります。このパズルのメインステージに配置します。

 

ここで、アニメーションを作成するファイルに戻り、置き換えるオブジェクトのレイヤーを選択して、[ファイルオブジェクト-ファイルオブジェクトのファイルを変更]を選択します。

 

内側の部分（猫）と外側の部分（フレーム）の色付きのグラフィックを見つけます-グラフィックは置き換えられ、アニメーションは引き続き機能します。

 

あなたはそれぞれの色のついたピースに対してプロセスを繰り返す必要があります。

 

これですべてのピースが置き換えられ、ゲームの準備ができました。

 

それでおしまい。ソースファイル（グレーのグラフィックがアニメーション化されているファイル）を保存しない限り、これをテンプレートとして使用し、アニメーションを保持しながら、必要な他のグラフィックスまたはバリエーションでコンテンツを置き換えることができます。

 

この手法は、複数のキャラクターを含むゲームで使用できます。たとえば、最初にテンプレート（プロキシ）フィギュアを作成し、ゲームで必要な各ピースとアニメーションを完成させ、後でこれらのグラフィックに「スキン」を追加して、同じアニメーションループ。

 

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

アニメーションのエクスポート

これは必須ではありませんが、エクスポートする画像を最適化することをお勧めします。行うべき非常に重要なことは、アニメーションの主題が「境界ボックス」に限定され、周囲に余分な透明度（空のスペース）がないことを確認することです。

 

あなたができる素敵なトリックは、グラフィックの周りに選択ボックスを作成し、アニメーションタイムラインを移動して、選択範囲外にピクセルがあるかどうかを確認することです。

 

以下の例では、左の画像は、頭のてっぺんが選択領域の外側にある様子を示しています。右の画像は、アニメーション全体を通して選択領域内にスプライトがどのようにあるかを示しています。

 

選択がまだアクティブな状態で、ファイル-アニメーションのエクスポートに移動し、イメージシーケンスを選択します。

 

次のダイアログボックスで、画像をエクスポートするフォルダーを見つけ、これらのオプションに注意を払ってください。

 

-ファイルの命名：ファイルの名前のプレフィックスを追加します。

 

-PNG形式を選択して透明度を維持します。

 

-サイズ設定では、選択領域を選択して、作成した境界ボックス内の画像をエクスポートします。 （このオプションについては以下の注を参照してください）

 

必要に応じて、この画面からスプライトのサイズを変更することもできます。

 

//注：[サイズ設定-選択領域]オプションは、Clip Studio Paint EXバージョンでのみ使用可能です。 Proバージョンをお持ちの場合は、エクスポートする前に画像を適切なサイズに切り抜くことができます。 //

できた！これで、これらの画像をゲームエンジンに読み込むことができます。

 

ほとんどすべてのゲーム作成ツールキットは、画面にアニメーションキャラクターを表示する方法としてイメージシーケンスを使用します。これは最も一般的な手法ですが、ゲーム開発に関しては最適化（この言葉も）が常に好まれることを覚えておくと便利です。

 

次のステップでは、無料のスタンドアロンツールを使用してスプライトシートとアトラス画像を作成する方法を示します。

 

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

AtlasイメージとSpriteSheetsの作成

ゲーム開発シナリオでは、スプライトシートとアトラスイメージは、システムのメモリにイメージをロードするために使用される処理能力の削減に役立ちます。

 

異なるPNGを読み込んでアニメーションを表示する代わりに、アニメーションのすべてのフレームと座標と情報を含むデータファイルを含む単一の画像を提供して、エンジンがスプライトシートを「読み取り」、特定の時間に特定の画像を見つけることができます。

 

アトラスの画像は同じですが、アニメーションのフレームの代わりに、ゲームのさまざまなグラフィックを1つの画像にまとめています。

 

残念ながら、Clip Studio Paintを使用してスプライトシートまたはAtlas画像を作成する簡単な（自動の）方法はありません。

 

この例では、「Free Texture Packer」というツールを使用します。これは無料のツールであり、使用できるオンラインバージョンもあります（この記事の脚注のリンク）。

 

使用方法を順を追って説明します。

 

[ ステップ1。]

 

プログラムを開き、画像をロードします。この（青色の）領域にドラッグアンドドロップすることもできます。

 

[ ステップ2。]

 

画像が読み込まれると、スプライトシートのプロパティの調整を開始できます。プログラマーまたはリードアーティストと話をして、アセットがエンジンにどのようにインポートされるかについての詳細を入手する必要があります。

 

ここで最も重要なオプションは次のとおりです。

 

-幅/高さはスプライトシート/アトラスのサイズです。通常、ゲームエンジンは256,512,1024,2048のマップで動作します。ほとんどの場合、POWER OF TWOオプションをチェックする必要があります。また、テクスチャを同じサイズに強制する必要がある場合はサイズを固定する必要があります。

 

-回転を許可、トリムを許可、およびトリムモードを変更して、スプライトシート内により多くの画像を収めることができます。静止画像（アトラス）では、トリムモードと回転モードが有効になっています。アニメーションの場合は、スプライトが整列し、その周囲に同じ透明なスペースがあるように、それらをオフにするとより安全になります。

以下の例では、少女アイドルアニメーションを2048x2048の正方形のテクスチャにパックすることを選択します。

 

ツール内でアニメーションをプレビューするには、右側のパネルですべての画像を選択し、[アニメーション]ボタンをクリックします。スライダーを使用して速度を制御します。

 

プロセスを完了するには、データ/座標ファイルのフォーマットを選択し（これはプログラマーと使用しているエンジンによって通知されます）、保存するフォルダーを見つけて、[エクスポート]をクリックします。

 

最終的な結果は、テクスチャマップイメージとデータファイル（テキストエディタで開くことができます）になります。これらは同じ時間である必要があります。

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

 

結論

Flash、Animate、最近ではSpineを使用してプロトタイプやインディーゲーム用のシンプルなアニメーションを作成してきましたが、Celsysがアニメーション機能としてInterpolationを追加したとき、ようやくワークフローをさらに簡素化する機会がありました。

 

このシリーズが有益であり、これらのテクニックを使用して最初のゲームプロジェクトを開始できることを願っています。

 

このタイプのアニメーションワークフローは、他のタイプのプロジェクトのアセットを作成するために使用できることを覚えておく価値があります。StreamまたはYoutubeチャンネルのアニメーショングラフィック、ソーシャルメディア用の楽しい小さなgifとミーム、またはカットアウトスタイルを使用したアニメーションショーツです。

 

この記事を読んだ後に何かを作成した場合は、フィードであなたの作品を宣伝できるようにお知らせください。

 

読んでくれてありがとう。

次のヒントでお会いしましょう。

 

-ダド

 

資料とリンクのダウンロード