序章

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

 

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

レトロデザインについて

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

 

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

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

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

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

 

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

レトロな配色

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

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

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

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

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

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

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

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

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

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

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

 

わかった！残りは、必要に応じて他のツールを使用できます。

レトロな背景

それでは、ピクセルの饗宴をしましょう。もちろん、レトロなスタイルで作成するスプラッシュ画面の背景を作成することから始めます。

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

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

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

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

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

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

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

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

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

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

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

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

レトロストリート環境

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

 

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

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

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

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

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

わかった！次に、メインモデルを作成します。レトロな車のオブジェクトの新しいレイヤーを作成します。ドットペンを使用して描画します。

車のレイヤーの上に新しいレイヤーを作成し、黒を使用して車のモデルの表面に影を付けます。レイヤーの不透明度を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フレームごとにセルを設定します。

 

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

レンダリングと公開

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

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

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

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

 

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

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

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

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

 

わかった！共有できるのはそれだけです。それがお役に立てば幸いです。さらにヒントを提供するために私をサポートしてください。

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