YouTube動画チュートリアル

ゲームのスプラッシュスクリーン用レトロピクセルアートアニメーション

32,408

babeoded

はじめに

こんにちは！ヒラ・カルマチェラです。今回は、CLIP STUDIO PAINTを使ってゲームのスプラッシュスクリーン用レトロピクセルアートアニメーションを作成した経験を共有したいと思います。

この投稿が、CSPを使ってピクセルアートやレトロデザインを作成しようとしている方々にとって、興味深いヒントとなることを願っています。

レトロデザインについて

レトロとは、70年代から90年代にかけて流行したデザインスタイルです。レトロは、古くから知られているヴィンテージスタイルとは異なります。レトロスタイルは、その時代において現代的で、さらには未来的な印象を与えました。レトロのユニークな特徴は、より輝かしい色、つまりネオンカラーの選択に見られます。レトロデザインスタイルは、ディスコ、パーティー、スポーティーなライフスタイルの台頭とともにその時代に発展しました。

同じ時代に、低解像度グラフィックでビデオゲームが開発され、現在ではピクセルアートとして知られています。レトロスタイルでピクセルアートを作成するヒントを作るのは、私にとって興味深いことです。

ピクセルアートのキャンバス設定

さあ、始めましょう！CLIP STUDIO PAINTを開き、新しいキャンバスを作成します。最終的な作品は1280px×720pxになりますが、ピクセルアートを作成するには、そのサイズの10%だけを作成すれば十分です。したがって、必要なキャンバスの寸法は128px×72pxです。

次に、ピクセルを描きやすくするためにグリッドを設定する必要があります。[表示] > [グリッド] に進みます。

これでキャンバス上に表示されます。しかし、まだグリッドサイズを調整する必要があります。[表示] > [グリッド・ルーラー設定] に進みます。原点を中央に設定し、[間隔(D)] と [分割数] を1に設定します。

レトロな配色

ピクセルをコンパイルする前に。まず、レトロスタイルに合うカラーパレットを作成する必要があります。パレットとして使用するために新しいレイヤーを作成し、そのレイヤー名を「retro palette」とします。

次に、ツールボックスの [描画色] をダブルクリックして [色の設定] を開きます。最初に作成する色は「ホットピンク」です。HEXフィールドに「ff69b4」と入力します。その後、キャンバスにブラシで塗ります。

以下は、私たちが必要とするレトロパレットの色です。

残りについては、標準パレットパネルから取得できる黒と白が必要です。

ピクセルアートのためのツール設定

さあ！ピクセルアートを特別な設定で作成するために使用できるツールがいくつかあります。最初のツールとして、線、曲線、図形ツールなどの「図形ツール」を使用して、正確なピクセルオブジェクトを作成できます。

図形ツールを使ってピクセルアートを作成するには、「アンチエイリアス」機能をオフにする必要があります。アンチエイリアスとは、デジタル画像オブジェクトの端が滑らかに見えるように、周囲のサンプルピクセルの色を追加したり操作したりする機能です。

アンチエイリアスを使用すると、もちろんピクセルアートは見栄えが良くありません。そのため、左側のツールプロパティパネルでこの機能を無効にする必要があります。アンチエイリアスのセクションにはいくつかのレベルがありますが、「なし」を選択します。

2番目のツールは、サブツールマーカーとドットペンタイプの「ペンツール」を使用できます。このタイプのペンは厚さ1pxの線描画を生成するため、有機的なピクセルオブジェクトを簡単に作成できます。

3番目のツールは、「塗りつぶしツール」を使ってピクセル領域を簡単に塗りつぶすことができます。「他レイヤーを参照」タイプを選択すると、異なるレイヤーであっても重なり合った領域を塗りつぶすことができます。次に、ツールプロパティで「領域拡縮」のチェックを外します。この機能はアンチエイリアスとほぼ同じで、ピクセルオブジェクトにノイズを発生させます。

4番目のツールとして、もちろん、作業上の不要なピクセルを消去するために「消しゴムツール」が必要です。ベクタータイプを選択すると、痕跡を残さずにピクセルを消去できます。

よし！残りのツールは必要に応じて使用できます。

レトロな背景

さあ、ピクセルアートを始めましょう。まずは、レトロスタイルでスプラッシュスクリーンの背景を作成します。

空と地面の領域を分ける地平線として、キャンバスを1pxの太さの線で分割します。

次に、「スポイトツール」を使用して、以前に作成したレイヤーパレットから色を採取します。空をアメジスト色で、地面の領域をカーマインで塗りつぶしました。

さて、新しいレイヤーを作成し、有名なレトロデザインの特徴である夕焼けのオブジェクトを作成します。楕円図形ツールを使用し、キーボードの「Shift」キーを押しながら円を作成して、形状が均等になるようにします。

消しゴムツールを使用して、夕焼けに縞模様を作成します。私の行ったパターンを真似しても構いません。

さて、再び新しいレイヤーを作成し、背景を山々のシルエット画像で飾ります。線ツールを黒で使用して、夕焼け画像の左右に山々を描きます。

山を黒で塗りつぶし、レイヤーの不透明度を50%に変更します。

新しいレイヤーを作成し、夕焼けの前に建物のシルエット画像を追加します。今回はドットペンを使用します。

建物の画像を、数色のピクセルでライトのように装飾します。

さて、地面の領域に移り、地面の上にメッシュを作成するために新しいレイヤーを作成します。ここでも、ターコイズブルーの線ツールを使用して、正確なデザインを作成します。

遠近法のために、単一の点に斜めに線を引きます。

このレイヤーをコピーし、[編集] > [変形] > [左右反転] に進みます。メッシュがキャンバス上で対称になるように配置します。その後、メッシュレイヤーとコピーを選択し、[レイヤー] > [選択中のレイヤーを結合] に進みます。

次に、作成された斜線に沿って水平線を作成し、メッシュ画像を作成します。

レトロな街並み

次に、環境のオブジェクトを作成します。レトロな街並みの雰囲気を作り出す予定です。シンプルに、道路標識と、道路の左右の路肩にヤシの木の列を作ります。

環境オブジェクトのレイヤーをまとめるためにレイヤーフォルダーを作成します。パスを作成するために新しいレイヤーを作成します。

次に、パスを形成する図形の交差部分を、画像ではエレクトリックイエローで塗りつぶします。レイヤーの不透明度を50%に変更します。

道路標識を作成するために新しいレイヤーを作成します。線ツールを使用して白い道路標識を作成します。

次に、ヤシの木を作成するために別の新しいレイヤーを作成します。ドットペンツールを使用して作成します。左右対称になるようにします。

レトロカーオブジェクト

よし！メインモデルを作成する時間です。レトロカーオブジェクト用に新しいレイヤーを作成します。ドットペンを使用して描画します。

車のレイヤーの上に新しいレイヤーを作成し、黒を使用して車のモデルの表面に影を作成します。レイヤーの不透明度を50%に変更します。その後、そのレイヤーを車のレイヤーと結合します。

補足として、新しいレイヤーで車の下に影を作成します。レイヤーの不透明度を50%に変更します。

アニメーション作成プロセス

さて、シーンに命を吹き込む時が来ました。アニメーション化する部分は、街の環境と建物のライトの2つです。

そのためには、タイムラインパネルを準備します。[ウィンドウ] > [タイムライン] にチェックを入れます。画面の下部にタイムラインパネルが表示されます。

タイムラインパネルで、[新規タイムライン] をクリックします。すると、新しいタイムライン設定が表示されますので、タイムライン名を入力します。フレームレートと再生時間を24に設定します。シーンとショットを1、分割線を6に設定します。その後、[画像補間] を [ハードエッジ] に変更します。

アニメーションを作成するには、アニメーションセルにリンクされる特殊なレイヤーを含むアニメーションフォルダーが必要です。

そのためには、[新規アニメーションフォルダー] をクリックします。すると、レイヤーパネルの上部にアニメーションフォルダーが表示されます。フォルダー名を「Animation」に変更します。現在、アニメーションフォルダーは空です。作成したモデルを処理して、アニメーションセルをコンパイルする必要があります。

レトロカーから背景レイヤーまでのすべてのモデルレイヤーを選択します。レイヤーパレットは除外して、一番下に保存できます。次に、[レイヤー] > [新規レイヤーフォルダー作成] を選択します。その後、選択されたすべてのレイヤーが1つのフォルダーにまとめられます。フォルダー名を「Compilation」に変更します。

「Compilation」フォルダーをコピーし、コピーしたフォルダーの名前を「cel_01」に変更します。次に、[レイヤー] > [レイヤー変換 (H)] に進み、cel_01フォルダーを単一レイヤーに変換します。cel_01レイヤーをAnimationフォルダーにドラッグします。

タイムラインパネルで、選択した各フレームについて赤でマークされたフレーム番号1が選択されていることを確認し、[セル指定] をクリックします。セルにリンクするレイヤーを選択するよう求められます。cel_01を選択します。

次のセルを作成するには、同様の手順を実行します。「Compilation」フォルダーをコピーし、コピーした名前を「cel_02」に変更します。単一レイヤーに変換する前に、動きの錯覚を生み出すために、このフォルダー内の一部のモデルを変形させる必要があります。

さて、cel_02フォルダー内の道路標識レイヤーを選択します。道路標識がキャンバスの下に向かって進んでいるように見えるように画像を編集します。必要なのは、特定の箇所のピクセルを削除または追加することだけです。

道路標識が動くと、ヤシの木もキャンバスの下に向かって移動する必要があります。論理的な観点からすると、視界に近づくオブジェクトは大きく見えます。そのため、移動するにつれて、ヤシの木を拡大する必要がありました。

ヤシの木レイヤーを選択し、[編集] > [変形] > [自由変形] に進みます。左側のツールプロパティで、[補間方法] の設定を [ハードエッジ] に変更して、拡大縮小がピクセルノイズを引き起こさないようにします。

さて、建物のレイヤーを選択し、ライトの装飾を変更して、ライトが点滅しているように見せます。

次に、cel_02フォルダーを選択します。[レイヤー] > [レイヤー変換 (H)] に進みます。cel_02レイヤーをAnimationフォルダーにドラッグします。タイムラインでフレーム番号3を選択し、[セル指定] をクリックします。cel_02を選択します。このアニメーションでは、再生時間24に対して2フレームごとにセルを設定します。

タイムラインでフレーム番号3を選択し、[セル指定] をクリックします。cel_02を選択します。

このアニメーションでは、再生時間24に対して2フレームごとにセルを設定します。

次のセルについても、継続的な変形を変更して動きの錯覚を生み出すように、同じことを行ってください。