これまでに学んだこと

このシリーズの最初のパートでは、Clip Studio Paintからスプライトを作成、編集、エクスポートする方法を学びました。

次に、ソフトウェアを使用してアニメーションスプライトを作成します。

 

現在、業界では、2Dゲームのアニメーションは通常2D BonesとMesh Deformationシステムで作成されています。スプライトの断片は、その周囲にポリゴンメッシュを作成する特定のプログラムにインポートされます。骨はこのメッシュのさまざまな領域に関連付けられており、3Dオブジェクトであるかのようにスプライトを「変形」する方法を提供します。その結果、スプライトのアニメーション全体に単一の画像のみが必要な非常に滑らかなアニメーションが作成されます。

 

2D Bone Animationシステムは現在の傾向ですが、カットアウトアニメーションシステムを使用して、ゲームのスプライトを作成することもできます。これは時間を節約するテクニックであり、最初のゲーム、プロトタイプ、または互換性のあるアートスタイルを備えた完全なゲームでも使用できます。

 

これは、ビデオのアニメーション、ソーシャルメディアのGIF、またはストリームチャネルのグラフィックを作成するための非常に親しみやすい方法でもあります。

 

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

Clip Studio Paintのカットアウトアニメーション

バージョン1.84以降、補間を使用してレイヤーのコンテンツをアニメーション化できるようになりました。これは、アニメーションツールセットの巨大な追加機能です。

跳ねるボールアニメーションを楽しんで、この新機能を学びましょう。

 

1.新しいファイルを作成し、バウンドするボールを描きます。

2.タイムラインパネルが表示されていることを確認し、この新しいタイムラインボタンをクリックします。確認ダイアログで[OK]を押すだけです。

3.この小さな「ランニングペーパー」ボタンをクリックして、このレイヤーでキーフレームを有効にします。現在のレイヤーに追加された小さなアイコンに注意してください。

 

4.サブツールをOPERATION-OBJECTに変更すると、補間がアクティブなときにアニメーション化できるプロパティがわかります。

 

5.タイムラインに戻り、この最初のポーズのキーフレームを設定しましょう。

Ballグラフィックをほんの少し動かすだけで、プログラムはそれをキーフレームとして登録できます。青いダイアモンドアイコンがタイムライン上およびオブジェクトのプロパティ内にあることがわかります。

6.タイムラインを時間の半分の部分（この例ではフレーム10）に移動し、ボールを地面から上に移動します。最初にタイムラインをフレーム10に移動してからオブジェクトに移動してください。 SHIFTを押し続けると、Y軸上のボールの動きを制限できます。

 

7.タイムラインをフレーム20に移動し、ボールを地面に戻します。

Playを押すと、小さな赤いボールが生きています。

8.ボールの跳ね返りをより面白くするために、タイミング（各キーフレームの持続時間/露出）を調整して、オブジェクトに「重み」の感覚を追加できます。

タイムラインに戻り、終了キーフレームにより近い中央キーフレームをクリックしてドラッグします。ボールは上向きの動きにより多くの時間を費やし、より速く落下します…

 

9.では、このアニメーションにSquashとStretchを追加して、少し漫画的にしましょう。

タイムラインに戻り、ボール（この例ではフレーム7）の上方移動の途中で、SCALEを使用してその形状を調整します-Y軸のみでボールをストレッチします。

不均一スケーリングを有効にするには、FIXED ASPECTをオフにしてください。形状のボリュームを維持します。 X方向にストレッチする場合は、Y方向に圧縮します。逆の場合も同様です。

 

10.この例を終了するために、最後のフレームの前にさらに2つのSquashおよびStretchフレームを追加しました。フレーム18ではボールをY（ストレッチ）で長くし、フレーム19ではX（スカッシュ）で広くしました。これにより、ボールは重力と地面への衝撃に反応します。

等間隔で補間なしのポーズを以下に示します。これにより、各フレームの変形を確認できます。

 

そして、下の図は、補間とタイミングの調整を伴う最終アニメーションです（タイムラインを短くし、フレームを追加して落下前に空にボールを保持することで、全体の動きが速くなります）。

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

キャラクターをアニメートする前に、ファイルオブジェクトに関する何か

跳ねるボールをアニメートしていると、おそらく何かに気づくでしょう。TRANSFORMツールを使用すると（回転、拡大縮小、移動）、オブジェクトの形だけでなく、キャンバス領域全体を変形に使用します。

 

より複雑なオブジェクトをアニメーション化する場合、これは問題になる可能性があります。このような状況では、一般的なレイヤーではなく、ファイルオブジェクトをアニメーション化することをお勧めします。

 

//この画像について：左：赤いボールはレイヤー上にあり、変換ツールはドキュメント領域全体を参照として使用してオブジェクトを変換します。

右：緑色のボールはファイルオブジェクトであり、変換はオブジェクトのサイズに基づいています。

 

ファイルオブジェクトは、外部.CLIPファイルの内容を含むコンテナです。これ（ファイルオブジェクト）は、任意のドキュメントに配置できます。ソースファイルの変更は、ファイルオブジェクトが使用されているドキュメントに反映されます。

 

例として、ファイルオブジェクトを使用してメインキャラクターの作成を始めましょう。このプロセスは、3Dソフトウェアやスケルタルアニメーションツールでキャラクターをリギングするのと同等です。

 

ファイルオブジェクトを使用してゲームスプライトをリギングする

まず、新しいドキュメントを作成し、スプライトの完全な画像を貼り付けて、リグを作成するためのテンプレートとして使用できるようにします。キャンバスサイズを調整して、作成する予定のアニメーション用のスペースを確保します。

スプライトの断片をインポートするには、ファイル-インポート-ファイルオブジェクトの作成オプションを使用します。このチュートリアルの最初の部分で作成した透明なPNGまたは.CLIPファイルをインポートします。

また、フォルダからアイテムバンクパレットにファイルをクリックしてドラッグすることもできます。

 

 

すべてのスプライトをキャンバスに配置し、OPERATION-OBJECTサブツールを使用してパーツを配置します。

パーツのZ順序（他のオブジェクトの前/後ろにあるオブジェクト）を調整する必要がある場合は、対応するレイヤーをレイヤースタックで上下に移動します。レイヤーをすばやく選択するには、Ctrl + Shiftキーを押しながらキャンバスをクリックします。

//この画像について：左：レイヤーの順序が間違っている、右：パーツの重なりが正しい。

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

それでは、アニメーションワークフローを準備しましょう。タイムラインパレットをキャンバスのいずれかの側面に移動することを強くお勧めします。アニメーション化されているものを理解する方が簡単です。

新しいタイムラインをクリックして、アニメーションのいくつかのプロパティを設定します。例：アニメーションシーケンスの名前（アイドル、実行、ウォーク）。アニメーションのフレームレート（このカットアウトスタイルには12または15 fpsが適しています）および使用するフレームの量（20から始めます）。

 

THUMBNAIL SIZEオプションをNONEに変更すると、タイムラインの管理がさらに簡単になります。このオプションは、他のアニメーションパッケージ（Flash、Animate、Blenderなど）と同様に、各パーツの名前を表示するだけです。

 

Clip Studio Paintで補間をアニメーション化するには、タイムラインで補間を有効にする必要があります。すべてのレイヤーを選択し、このレイヤーでキーフレームを有効にするをクリックします。レイヤーアイコンが変更されます。

これで、スプライトのすべてのレイヤーで、つまりアニメーションの最初のフレームで行う必要のあることができます。

OPERATION-OBJECTサブツールを使用し、ピースの変換ピボット（回転の中心）を正しい位置に移動します（この例では、このピボットを中心から首のある頭部の下部に移動しました）

 

キャラクターの腕には、ピボットが肩の位置にある必要があります。次のステップに進む前に、各パーツのピボットを調整します...

 

ピボットポイントを設定している間、リグでいくつかのテストを実行します。アニメートする最適な方法が見つかるまで、キャラクターのジョイントを回転させます。

 

例では、間違って配置されたピボットのために手が機能していません...

 

ピボットの位置を微調整すると、手の関節を回転させて、腕全体が単一の画像でできているような錯覚を作り出すことができます。

ROTATION ANGLEオプションを0に設定すると、いつでもレイヤーのROTATIONをリセットできます。SCALEでも同じことが言え、100にリセットできます。

 

以下に、各ジョイントのピボットポイントを調整する方法の図を示します。

 

タイムラインで、各パーツにどのようにキーフレームが設定されているかに注目してください。

一部のレイヤーにキーフレームがない場合は、キャンバス上で少し移動するか、[キーフレームの追加]ボタンを使用して手動でキーフレームを作成してください。

 

できたキャラクターの権利はアニメーション化する準備ができています。

 

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

 

「アイドル」タイプのアニメーションのアニメーション化

キャラクターリグを設定したら（ピボットジョイントを配置し、すべてのパーツにキーフレームを設定）、この最初のポーズをアニメーションの最後のフレームに複製します。

 

複数のフレームを複製する最も簡単な方法は、タイムラインですべてのキーフレームを選択し、Altキーを押したまま、目的の位置にクリックしてドラッグすることです。

 

次に、タイムラインの選択をアニメーションの中央部分に移動し、キャラクターのすべての部分（彼女の足を除く）を選択し、少し下に移動します（呼吸の上下を作成します）。

 

Ctrlキーを押しながらマウスの左クリックを使用して、レイヤーをすばやく切り替えて選択できることを忘れないでください。キーボードの矢印を使用してパーツを移動することもできます。

これが結果です。非常に簡単ですが、それは始まりです。

アニメーションの硬直性を破る「単純な」方法は、可動部分のタイミングを変更することです。以下の例では、彼女の体のキーフレーム（女の子+ボディレイヤー）を遅らせて（左に動かして）他の部分よりも高速です。私も彼女の腕と手の両方を比例して遅らせました。

 

最後に、私は頭と髪のキーフレームを遅らせたので、それらの部分が体に「引きずられている」ように見えます。

 

全体のアイデアは、胸から始まり、鉄道車両のように他の部分を順番にドラッグする動きをシミュレートすることです。

 

タイミングに関しては、これらの微妙な変化に気付くように目を訓練する必要があります。どの部分が他よりも最初に動き始めるかを確認してください。

ここまでは、ピースの平行移動（上と下）を処理しましたが、今度はローテーションを追加します。

 

ヘッドパーツから始めて、タイムラインの中央のキーフレームを選択し（クリックして赤になります）、反時計回りに回転します-ほんの小さな動きです。

また、それに応じて彼女の髪の回転を修正する必要があります。

 

そのような小さな調整が彼女の頭と髪にどのように重量を追加したかを見てください。物事はより面白くなり始めています。

 

私は彼女の腕と手にも同じことをしました-各パーツのフレーム間でちょうど回転します。

 

Scaleプロパティもアニメーション化できます。

私は彼女の足（GIRL_LEGLとGIRL_LEGR）の両方を選択し、OPERATION-OBJECTツールを使用して足を「押しつぶし」、体重に反応させました。

 

バウンスボールの演習で行ったように、FIXED ASPECTプロパティをオフにして、オブジェクトのボリュームを維持できるようにしてください（Yで押しつぶし、Xで引き伸ばし、またはその逆）。

 

スカッシュアンドストレッチは、アニメーションのさまざまな部分で使用できるため、より漫画的です。下の例では、スケールを使用してボディとヘアのフレーム間をスカッシュ/ストレッチする方法に注目してください。それらは今ではあまり硬く見えません。

 

ゲームのアニメーションループを作成（およびプレビュー）する際の「ルール」は、アニメーションサイクルの最初と最後で常に同じポーズにすることです。 （ALTキーを押しながら、フレームをドラッグアンドドロップして複製します）。

 

ヒント：アニメーションのテスト中に、アニメーションを0〜19で再生するようにしてください（20フレームのアニメーションがある場合）-Clip Studio Paintでは、タイムラインの青いハンドルを動かして再生を制限できます。

同じフレーム（1と20）を2回公開しないため、ループのプレビューが改善されます。

 

アニメーションの最初の段階と最新の段階の比較をご覧ください。

この非常に魅力的なアニメーションループを作成するために、3つの（実際には2つの）異なるポーズを使用したことを思い出してください。

このプロセスは、スプライトに命を吹き込むために使用できるさまざまな動きの素晴らしい出発点です。

 

キャラクターのような複雑なオブジェクトのアニメーションは混乱を招く可能性があるため、タイミングの感覚を身に付けるまでシンプルに保ちます。アニメーションのこれらの12の古典的な原則をすべて同時に適用しようとするのはあまりにも圧倒的です。

 

それでおしまい。気に入っていただければ幸いです。このシリーズの3番目と最後のパートに進んでください。アニメーショングラフィックの作成を高速化するためのヒントとコツを紹介します。もちろん、これらのアートワークをゲームに対応させる方法についても説明します。 。

 

以下のリンクからこの演習のソースファイルをダウンロードしてください。

 

資料をダウンロードする