この記事では、Clip Studio Paintを使用してゲームのグラフィックス（スプライト）を作成する方法を紹介します。

 

これは3部構成のシリーズになります。

 

[パート1] Clip Studio Paintのみを使用して、モバイルゲームプロトタイプ用のアニメーション対応スプライトを作成するプロセスを説明します。

 

[パート2]アニメーションに焦点を当てます-切り抜きスタイルの方法を使用してシーケンスをアニメーション化する堅実なワークフローを提供し、ソフトウェアで利用できるようになった新しい補間機能を導入します。

 

[パート3]は、エクスポートと、さまざまなアセットの作成を高速化するために使用できるいくつかのヒントとテクニックに専念します。

 

 

やってみましょう。

 

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

 

ステップを計画する

何よりもまず、ゲーム開発用のアセットを作成する際には、最終的なディスプレイ出力を考慮することが非常に重要です。

 

グラフィックを作成するための最適な画面比率と解像度について、調査するか、単にチーム（主任アーティスト、プロデューサー、またはプログラマー）と話すことを強くお勧めします。

 

[経験則：]

 

-ベクトルアートは常に優先されますが、処理が遅くなります。

ゲームのスタイルがこの作成方法をサポートしている場合、ほとんどのグラフィックをベクターモードで作成します。

 

 

-ラスター/ビットマップグラフィックスの作成は高速ですが、アートの完了後に解像度を上げる必要がある場合、スケーリングの問題が発生する可能性があります。

 

最終解像度の最小サイズのでアセットを作成してください。生成されるスプライトの解像度が常に高くなります。

 

このプロジェクトでは、ビットマップ/ラスターモードでアセットを作成します。

 

アートワークを作成するのに最適な画像サイズの基準を得るために、ゲームを公開できるプラットフォームの一般的な画面解像度について簡単に調査しました。

 

私の研究から2つの重要な情報を得ました：

 

a。最大画面解像度は2224ピクセル（青い領域）です。

 

b。ゲームがモバイルおよびタブレットデバイスで動作することを確認するには、1080ピクセル（赤い領域）の近くに重要なグラフィックを配置する必要があります。

アートボードを作成する

前の情報を念頭に置いて、このゲームのモックアップ用のすべてのグラフィックを含むアートボードを作成しました。このようにすることで、ゲームをよりよく理解でき、生産中に一貫性を維持するのが簡単になります（バッチで作業できるため）。

//この画像について：スケッチブックからコンセプトをアートボードにインポートし、すぐにラフな図面を開始します。すべてのグラフィックを同じファイルにまとめると、それらの関係（サイズと色）を確認するのに役立ちます。

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

 

このシリーズの後半では、これらのスプライトでアニメーションの切り抜き方法を使用します-Clip Studio Paintで一般的なフレームごとの通常の描画方法ではありません。

 

これが機能するには、移動する各パーツを描画して分離する必要があります。

この段階では、すべてのオブジェクトのすべての異なるレイヤー（線、色、シェーディング）を処理する必要がある場合、プロセスは非常に面倒になります。

 

ここでの提案は、[作成/作成に焦点を合わせ、後で組織に任せる]ことです。

 

この例では、すべてのグラフィックスが単一の図面のように作成されました：線のレイヤー、フラットな色のレイヤー、シェーディングなど

 

//この画像について：私のアートボードでは、すべてのグラフィックスが同じレイヤー構造を共有しています-同時に作成と整理を行おうとすると、創造的なプロセスが壊れてしまいます。

 ピースの整理とエクスポート

Clip Studio Paintには非常にインテリジェントな機能があり、選択した複数のレイヤーから操作（ピクセルの移動、コピー/カット/貼り付け、クリア）を実行できます。

 

（A）レイヤースタックで選択されています。

（B）それらはすべてレイヤーグループを介して選択されます。

//この画像について：Clip Studio Paintでは、選択した複数のレイヤーのピクセルを選択して影響を与えることができます。レイヤーを結合することなく、図面の一部を変更するのに非常に便利な機能です。

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

 

次に、スプライトの各部分を正しくエクスポートして、Clip Studio Paintで切り抜きアニメーションを作成したり、さまざまなアニメーションツール（Spine、Spriter、Unity）で使用できるAtlas Imageを作成したりできるようにします。

//この画像について：Atlasは複数のスプライトを含む大きな画像です-ゲームまたはキャラクターで使用するすべてのスプライトを含む単一の画像をデバイスが読み込む（呼び出す）だけでよいため、メモリ消費が削減されます。

エクスポートプロセスを高速化するために多くの方法を試しました。以下は、このタスクを達成するための最も効果的な方法だと思うステップのシーケンスです。

[ ステップ1。]

 

レイヤースタックで、グラフィックの作成に使用するすべてのレイヤー（線、色、網かけなど）を選択します。次に、なげなわツールを使用して、スプライト上で変換する領域を選択します（この例では、女の子の頭だけをエクスポートします）

 

[ ステップ2。]

 

選択をアクティブにして、編集-コピー（またはCTRL + C）に移動し、次にファイル-クリップボードから新規作成

[ステップ3.]

 

新しいファイルは、スプライトの一部とファイルの構造（将来の編集に便利）をそのまま使用して作成されます。ここで、スプライトの背景が透明になるように、ペーパーレイヤーの表示をオフにします。

 

//重要：スプライトが四角形内に正確に含まれていることに注意してください。余分なスペースはありません。これは、エンジンのスプライトをエクスポートする際の良い習慣です。

[ステップ4.]

 

これで、スプライトを新しいファイルにエクスポートできます。ファイル-エクスポート（シングルレイヤー）に移動し、PNGを選択します。

[ステップ5.]

 

それに応じてスプライトに名前を付けることは常に良いことです。このプロジェクトでは、次のようにキャラクターのピースに名前を付けます：GIRL_（Name of the BodyPart）.png

[ステップ6.]

 

このPNGエクスポートダイアログは、元のアートを変更せずにグラフィックのサイズを調整できるため便利です。プログラマーがゲームでキャラクターのサイズを半分にする必要があるとしましょう。 SCALE RATIOの値を50％に変更すると、画像を簡単に再度エクスポートできます（例）。

これで完了です...

 

...この最初のスプライト用。 :(

 

嬉しいことに、Clip Studio Paintでこのプロセスを高速化する方法があります。

 

[自動アクション（マクロ）を使用して、このシーケンスを自動化できます。]

 

私はこのアクションを作成し、あなたと共有します。ダウンロードリンクを取得するには、この記事の脚注を参照してください。

このアクションをインポートするには、自動アクションサブツールに移動し、インポートセットを選択します。後でデフォルトの自動アクションセットにコピーまたは移動できます。

 

アートボードに戻り、[画像の領域を選択]をスプライトにエクスポートし、小さな再生ボタンをクリックします。

 

一時ファイルが自動的に閉じる前に、アクションは名前とサイズを要求します。

画像のすべての部分に対してこのプロセスを繰り返します。この例では、キャラクターを「リグ」してアニメートするために必要なすべてのパーツがあります。

―――――――――――――――――――――――――――――――――― ――――――――――――――――――――――

 

それでおしまい。

 

次の記事では、切り抜きのアニメーション手法を使用して、Clip Studio Paintでこのスプライトを[アニメーション]する方法を示します。

 

これは非常に効率的な作業方法であり、ゲームのシーケンスや、プロジェクトで使用するさまざまな種類のアニメーションを作成するために使用できます（TwitchおよびYoutubeグラフィック、ソーシャルメディアのGifなど）。

 

資料をダウンロードする