前書き

こんにちは！私の名前はヒラ・カルマチェラで、これが私の最初の投稿です。この機会に、Clip Studio Paintを使用してループスプライトアニメーションを作成した経験を共有します。私はゲームのニーズに合わせてグラフィックデザインプロジェクトに取り組んでいました。多くの場合、私が取り組んでいるゲームは8ビットスタイルまたは一般的にピクセルゲームと呼ばれています。

この投稿が、CSPを使用してピクセルアートを作成する方法を探している人にとって興味深いヒントになることを願っています。さらに、ループスプライトに対してアニメーション化を試みます。

ループスプライトアニメーションとは何ですか？

練習を始める前に、スプライトアニメーションの定義について少し説明します。グラフィックデザインまたはマルチメディア業界では、スプライトという用語は、静的なシーンとアニメーション化されたイメージの両方の形で、大きなシーンの小さな部分を指します。アニメーションのニーズ、より具体的にはスプライトアニメーションと呼ばれるもの。

業界では、スプライトアニメーションは、ゲームやアプリケーションプログラムなどのインタラクティブメディアのニーズによく使用されます。スプライトアニメーションは通常、ゲームキャラクターに適用され、さまざまなジェスチャで移動したり、シーンやユーザーインターフェイス（アイコンやボタンなど）をサポートする視覚効果として移動したりできます。

技術的には、スプライトアニメーションは、ポーズとポーズの原則を使用してフレームごとに作成されます。したがって、それらの使用は、最終フレームが最初のフレームに接続して無限の動きを行うループであることがよくあります。

通常、ゲームプロジェクトでは、スプライトアニメーションを使用してキャラクターのさまざまな動きを作成します。例：アイドル動作、ウォーキング、ランニング、攻撃、防御、怪我、死。各動きは、スプライトシートと呼ばれる形式でパッケージ化されるシーケンスです。

ピクセルアート用のファイルの準備

OK！新しいファイルの作成から始めます。 「アニメーション」プリセットを選択して、ループスプライトを作成する必要性に応じてワークスペースを整理します。ピクセルアートは大きなキャンバスサイズを必要としません。特にスプライトのニーズの場合、キャンバスは単一のオブジェクトまたは文字でのみ塗りつぶされます。そのため、通常は寸法に32ピクセルの倍数のみを使用します。

このプロジェクトでは、サイズW = 192ピクセル、H = 192ピクセルのキャンバスを作成しました。このサイズは、余分なヘッドルームがある場合でもキャラクターのジェスチャーを行うのに十分です。

以下のように私が行った設定に従うことができます。

キャンバスが作成された後、次に準備する必要がある重要なものは「グリッド」です。これは、イメージを形成するようにピクセルを配置するのに本当に役立つ架空の線です。

ステップは、表示>グリッドのメニューに入ることです。確認するだけで、キャンバス上にチェスパターンの横線と縦線が表示されます。

その後、表示>グリッド設定のメニューに戻ります。グリッド設定のウィンドウが表示されます。ここで、ギャップ= 1ピクセル、分割数= 0を変更します。すると、より小さく、よりタイトな正方形のチェスパターンが表示されます。

ピクセルを描く

これで、ピクセルを描画または配置してスプライトを作成する準備ができました。このプロジェクトでは、攻撃的な動きをするゴブリンキャラクターを作成します。もちろん、アニメーションを作成する前に、まずキャラクターを作成する必要があります。

アニメーションキャラクターを作成する上で最も重要なことは、レイヤーシステムで画像を整理することです。これはアニメーション処理を容易にすることを目的としているため、特定のポーズを作成するために特定のレイヤーを再描画するだけです。スプライトアニメーションは、ポーズとポーズの原則に大きく依存していることに注意してください。

これが各ポーズ用に作成したレイヤーです。

これを簡単にします。最初は、「pose_01」という名前のレイヤーフォルダーを1つ作成するだけです。後で、次のポーズのためにこのフォルダーをコピーできます。次に、最初の身体部分のレイヤーを作成します。まず頭から始めましょう。

一般的な描画技法と同様に、ラインアートの作成から始めることができます。幸いなことに、CSPにはピクセルの配置に使用できるツールがあります。 「マーカー」タイプの「ドットペン」を使用して、各ストロークがグリッドボックスをピクセルで簡単に塗りつぶすようにします。

次に、ピクセルを配置して、キャラクターの頭を形成します。このプロジェクトでは、3/4ビューのゴブリンキャラクターを作成しました。

通常、私はラインアートとカラーリングの間に異なるレイヤーを作成します。ただし、ピクセルアートを作成した私の経験に基づいて、すべてのプロセスを1つのレイヤーにまとめる方が効率的です。キャラクターの身体部分に基づいて単純にレイヤーを分離することは、アニメーションのニーズに依存します。

そのため、色を付けるには、レイヤーのニーズに応じて、色調を濃淡から濃淡まで単純に調整します。

アニメーションのレイヤーシステム

次に、別のレイヤーで他の身体部分を作成します。このゴブリンキャラクターの胴体を、頭、左手、胴体、武器、右手、左脚、右脚の順に、レイヤーの次のセクションに分割します。

レイヤーシステムは、アニメーション化プロセスを促進することを目的としています。現在、1つのポーズを表すレイヤーフォルダーは1つしかありません。次に、一連の動きをするために他のポーズが必要になります。レイヤーシステムを通じて、さまざまなポーズのキャラクターを再描画する代わりに、必要なレイヤーを再描画し、ポーズを変更せずに他のレイヤーをコピーするだけです。

タイムラインの準備

すべての身体の部分が完成したら、各部分をチェックして、適切につなぎ合わせ、比例した身体の統一を形成できるようにしてください。次に、作成されたレイヤーシステムと共に「pose_01」を使用して、他のポーズを作成します。

その前に、アニメーション化プロセスのためにタイムラインを事前に準備します。ステップは、メニューのウィンドウ>タイムラインに入ることです。次に、タイムラインパネルが下部画面に表示されます。

次に、[レイヤー]メニューの[レイヤーの複製]に移動して、レイヤーフォルダー "pose_01"をコピーします。

次に、[レイヤー]メニューの[レイヤーの変換]に移動して、レイヤーフォルダーのコピーをレイヤー（標準）に変換します。レイヤーの名前を変更するダイアログボックスが表示されます。 「animating_pose_01」に変更します。これで、アニメーション化する1つのセルができました。

「animating_pose_01」レイヤーをAnimationフォルダー（アニメーションプリセットで新しいファイルを作成するときに自動的に作成されるLayerフォルダー-このフォルダーで指定された各レイヤーはアニメーションセルと見なされます）に移動します。

Animationフォルダー内には、既に存在する空のレイヤーがあります。レイヤーを選択して削除します。

ここで、「animating_pose_01」レイヤーをアニメーションセルとして指定する必要があります。簡単に言えば、タイムラインパネルのサポートアイコンを使用できます。タイムラインでフレーム1を選択し、次に示すように「セルを指定」アイコンをクリックします。確認するダイアログボックスが表示されます。「animation_pose_01」を選択して、[OK]をクリックします。

ポーズをとる

これで、アニメーションに初期キーフレームができました。次に、2番目のポーズなどを作成する必要があります。手順は、レイヤーフォルダー「pose_01」を再度コピーし、レイヤー名をダブルクリックして「pose_02」に名前を変更します。

レイヤーフォルダー「pose_01」を選択し、不透明度を50％に変更して透明にします。そのため、レイヤーフォルダー「pose_02」でポーズを変更できます。

単純に、私がすることは、以前のポーズで維持可能な新しいポーズを作成するために、意図した動きに応じて特定のレイヤー上のいくつかのピクセルをシフトすることです。その間、レイヤー「ヘッド」のような他のレイヤーのピクセル構造は変更せず、新しいポーズに従うように位置を変更しただけです。

2番目のポーズが終了したら、次のステップは、レイヤーフォルダー "pose_02"をレイヤーに変換することです（通常：animating_pose_02）。次に、アニメーションフォルダーに保存し、アニメーションセルとして指定しました。セルの指定プロセスでは、フレーム4にanimating_pose_02を保存します。つまり、最初のキーフレーム（animating_pose_01）に約0.1秒、または3フレームに等しい期間を指定します。

上記の手順を実行して、最後のポーズまでポーズを作成します。このプロジェクトでは、ゴブリンキャラクターが攻撃的な動きをするために7つのポーズを作成しました。注意すべき点は、最後のポーズです。つまり、pose_07は最初のポーズ、つまりpose_01に継続する必要があります。そのため、無限の動きやループアニメーションが作成されます。

アニメート

実際には、一連のモーションになるために必要なキーフレームを表すポーズがすでにあるため、このプロセスは非常に簡単です。タイムラインでアニメーションが適切に実行されることを確認する前に。すべてのレイヤーフォルダーを非表示状態に調整します。

次に、すべてのセルがタイムラインのそれぞれのフレームにあることを確認します。 CSPタイムラインの興味深い機能は「オニオンスキン」です。この機能により、確認中のポーズの前後にポーズを確認できます。

タイムラインで再生アイコンを押すと、アニメーションをテストできます。 23番目のフレームまでセルを埋めているだけで、アニメーションが停止せず、タイムラインの針が動き続ける場合、心配する必要はありません。これは、ファイル作成の開始時に、再生時間を正しく設定しなかったために発生します。これにより、簡単に右にスクロールして右側の青いタイムラインの針を見つけ、必要なフレームにドラッグして保存できます。

出版

私たちのアニメーションの動きを確信した後は気持ちがいいです。それからそれを公開する時が来ました。通常、クライアントのニーズに応じて、スプライトアニメーションをスプライトシートにパッケージ化します。スプライトシートは透明な背景PNGで作成され、ゲーム開発者が作成しやすくなります。その後、スプライトはコーディングによってアニメーション化されます。

ただし、クライアントの送信または承認プロセスとして、通常、スプライトアニメーションをループアニメーションGIFにエクスポートします。手順は、メニューの[ファイル]> [アニメーションのエクスポート]> [アニメーションGIF]に移動します。その後、いくつかのボックスが表示され、必要に応じて確認するだけです。

OK！共有できるのはそれだけです。役立つことを願っています。次の方法でヒントを作成してください。

私のInstagramをフォローしてください：

YouTubeチャンネルを登録する：

私の他の投稿を読んでください：

ありがとう：）