序章

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

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

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

練習を始める前に、スプライトアニメーションの定義について少し洞察を共有します。グラフィックデザインまたはマルチメディア業界では、スプライトという用語は、静的およびアニメーションの両方の画像の形式で、大きなシーンのごく一部を指します。アニメーションのニーズに合わせて、より具体的にはスプライトアニメーションと呼ばれます。

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

技術的には、スプライトアニメーションは、ポーズからポーズへの原理を使用してフレームごとに作成され、まっすぐ進みます。したがって、それらの使用は、多くの場合、最後のフレームが最初のフレームに接続して無限の動きをする場所でループします。

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

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

わかった！新しいファイルの作成から始めます。ループスプライトを作成する必要性に応じてワークスペースが編成されるように、「アニメーション」プリセットを選択します。ピクセルアートは大きなキャンバスの寸法を必要としません。特にスプライトのニーズでは、キャンバスは単一のオブジェクトまたは文字でのみ埋められます。したがって、通常、寸法には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フォルダー内に、すでに存在する空のレイヤーがあります。レイヤーを選択して削除します。

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

ポーズからポーズへ

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

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

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

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

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

アニメーション

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

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

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

出版

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

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

わかった！共有できるのはそれだけです。それがお役に立てば幸いです。次の方法でさらにヒントを作成できるようサポートしてください。

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

私のYouTubeチャンネルを購読する：

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

ありがとう ：）