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

4,706 view

前書き

こんにちは!私の名前はヒラ・カルマチェラです。この機会に、CLIP STUDIO PAINTを使用して、ゲームのスプラッシュ画面用にアニメーション化されたレトロなピクセルアートを作成した経験を共有します。

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

レトロデザインについて

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

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

YouTubeビデオチュートリアル

効果的かつ効率的な手順については、最初から最後までビデオをご覧ください。より多くのビデオチュートリアルを作成するために、[いいね]ボタンと[購読]ボタンをクリックすることを躊躇しないでください。ありがとう:)

https://youtu.be/qD7bo6rQSbU

書面による手順をご希望の場合は、この投稿を読んで完了してください。

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

始めましょう! Clip Studio Paintを開き、新しいキャンバスを作成します。最終的に作成する作品は1280x720pxですが、ピクセルアートを作成するには、そのサイズの10%を作成するだけで済みます。したがって、必要なキャンバスのサイズは128px x72pxです。

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

これで、キャンバス上でそれを見ることができます。ただし、グリッドサイズを調整する必要があります。 [表示]> [グリッド/ルーラー設定]に移動します。原点を中央に設定し、ギャップ(D)と分割数を1に設定します。

レトロな配色

ピクセルのコンパイルを開始する前に。まず、レトロなスタイルに合うカラーパレットを作成する必要があります。新しいレイヤーを作成してパレットにし、レイヤーに「レトロパレット」という名前を付けます。

次に、ツールボックスの前景色をダブルクリックして、色設定を開きます。最初に作成する色は「ホットピンク」です。 HEXフィールドに、コード「ff69b4」を入力します。次に、キャンバスにブラシをかけます。

以下は、必要なレトロパレットの色です。

残りの部分については、標準のパレットパネルで使用できる黒と白が必要です。

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

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

フィギュアツールを使用してピクセルアートを作成するには、アンチエイリアシング機能をオフにする必要があります。アンチエイリアシングは、デジタル画像オブジェクトの周囲のサンプルピクセルの色を追加および操作することにより、デジタル画像オブジェクトのエッジを滑らかに見せるための機能です。

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

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

3番目のツールは、「塗りつぶしツール」を使用してピクセルフィールドに簡単に入力できます。異なるレイヤーであっても重複するフィールドに入力できるように、[他のレイヤーを参照]タイプを選択します。次に、ツールプロパティで、[エリアスケーリング]のチェックを外します。この機能は、ピクセルオブジェクトにノイズを生成するアンチエイリアシングとほぼ同じです。

もちろん、4つ目のツールは、作品の不要なピクセルを消去するための「消しゴムツール」が必要です。トレースを残さずにピクセルを消去するには、ベクトルタイプを選択します。

OK!残りは、必要に応じて他のツールを使用できます。

レトロな背景

それでは、ピクセルの饗宴をしましょう。まず、作成するスプラッシュスクリーンの背景を、もちろんレトロなスタイルで作成します。

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

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

次に、新しいレイヤーを作成します。有名なレトロなデザインの典型であるサンセットオブジェクトを作成します。楕円形ツールを使用して、キーボードの「Shift」キーを押しながら円を描き、形が比例するようにします。

消しゴムツールを使用して、日没にストライプを作成します。私のようにパターンを模倣することができます。

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

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

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

建物の画像をライトとしていくつかのカラフルなピクセルで飾ります。

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

遠近法のために、1点に対角線上に線を引きます。

このレイヤーをコピーしてから、[編集]> [変換]> [水平方向に反転]に移動します。メッシュがキャンバス上で対称になるように配置します。次に、メッシュレイヤーとコピーを選択し、[レイヤー]> [選択したレイヤーをマージ]に移動します。

次に、メッシュイメージを作成するために作成された対角線を横切る水平線を作成します。

レトロなストリート環境

次に、環境のオブジェクトを作成します。レトロなストリートの雰囲気を演出します。簡単です。道路の左右の路肩に道路標示とヤシの木のラインを作成します。

レイヤーフォルダを作成して、環境オブジェクトのレイヤーを収集します。新しいレイヤーを作成してパスを作成します。

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

新しいレイヤーを作成して、道路標示を作成します。ラインツールを使用して白い道路標示を作成します。

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

レトロな車のオブジェクト

OK!次に、メインモデルを作成します。レトロカーオブジェクトの新しいレイヤーを作成します。ドットペンを使って描きます。

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

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

アニメーションプロセス

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

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

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

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

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

レトロカーから背景レイヤーまで、すべてのモデルレイヤーを選択します。レイヤーパレットを除外して、下部に保存することができます。次に、[レイヤー]> [フォルダーの作成]に移動し、レイヤーを挿入します。次に、選択したすべてのレイヤーが1つのフォルダーに収集されます。フォルダの名前を「コンパイル」に変更します。

コンパイルフォルダをコピーし、コピーフォルダの名前を「cel_01」に変更します。次に、[レイヤー]> [レイヤーの変換(H)]に移動して、cel_01フォルダーをユニットレイヤーに変更します。 cel_01レイヤーをAnimationフォルダーにドラッグします。

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

次のセルを作成するには、同じようにします。コンパイルフォルダをコピーしてから、コピーの名前を「cel_02」に変更します。単位層に変換される前。このフォルダ内のいくつかのモデルを変換して、動きの錯覚を作成する必要があります。

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

道路標示が移動すると、ヤシの木もキャンバスの下部に移動する必要があります。論理的な観点からは、ビューに近づくオブジェクトは大きく見えます。それで、それがシフトするにつれて、ヤシの木は拡大されなければなりませんでした。

ヤシの木のレイヤーを選択し、[編集]> [変換]> [自由変換]に移動します。左側のツールプロパティで、[補間方法]の設定を[ハードエッジ]に変更して、スケーリングによってピクセルノイズが発生しないようにします。

次に、建物レイヤーを選択し、ライトがちらつくように見えるようにライトの装飾を変更します。

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

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

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

次のセルについては、連続変換を変更して同じことを行い、動きの錯覚を生成してください。

レンダリングと公開

OK! 2フレームごとにアニメーションセルを作成して塗りつぶし、合計24フレームにしました。

このアニメーションをレンダリングして公開する前に。このアニメーションのサイズは128x72ピクセルであることを思い出してください。そのため、すぐにレンダリングすると、このサイズが表示されます。

そのためには、最初にサイズを変更する必要があります。 [編集]> [画像の画像解像度の変更]に移動します。解像度設定画面が表示されます。

幅を1280pxに、高さを720pxに変更します。次に、補間方法をハードエッジに変更します。次に、ピクセル配置を壊すことなく画像が拡大されます。

次に、このアニメーションをレンダリングします。ループ機能で表示できるアニメーション結果が必要な場合は、アニメーションGIF形式でエクスポートする必要があります。 [ファイル]> [アニメーションのエクスポート]> [アニメーションGIF]に移動します。ストレージディレクトリを指定します。

レンダリングウィンドウが表示されます。幅を1280pxに、高さを720pxに変更します。

ただし、一部のゲームプロジェクトでは。通常、開発者はスプラッシュ画面を画像シーケンスで表示するように要求します。これは、アニメーションがプログラミングスクリプトを使用して作成されるためです。そのためには、[ファイル]> [アニメーションのエクスポート]> [画像シーケンス]を選択します。

レンダリング設定ウィンドウが表示されます。ストレージディレクトリを指定します。 PNG形式とフレームのエクスポートチェックリストを選択します。

OK!私が共有できるのはそれだけです。それがお役に立てば幸いです。さらにヒントを提供するために私をサポートしてください。
私のYouTubeチャンネルを購読する:

https://youtube.com/BABEODED/

コメント

関連する記事

新着

公式 新着