2D PSD Importer で 2D アートワークフローを高速化する方法

2D ゲームは、数百から数千ものスプライトを使って制作されます。Unity の 2D チームは、アセットのインポートと反復修正に必要な手順など、アセット制作のラウンドトリップを行うワークフローの改善に継続的に取り組んでいます。主な改善点は、2D PSD Importer パッケージです。本記事の続きをお読みいただき、Photoshop PSB ファイルをプロジェクトにインポートする方法を学び、2D アセットを扱う際の生産性を向上させることができる現実のユースケースについて考察を深めてください。

レイヤー化された Photoshop ファイルの Unity へのエクスポートとインポートには時間がかかる場合があります。ソースファイルに変更を加えると、ファイルを微調整するたびにファイルを再インポートするという非効率的なループに陥る可能性があります。2D PSD Importer パッケージは、この問題を解決し、新しい機能でインポートプロセスを強化します。

パッケージマネージャーから 2D PSD Importer パッケージをインストールできます。これ以上のセットアップは必要ありません。準備ができたらすぐに Photoshop PSB ファイルのインポートを開始できます。

PSD Importer は、PSB ファイル形式をサポートしています。これは、より一般的な Adobe PSD 形式と機能的には同じです。違いは、PSB ファイルが PSD 形式よりもはるかに大きな画像をサポートすることです。

Photoshop で PSB ファイルを作成するには、「ファイル」 > 「別名で保存」をクリックし、「フォーマット」ドロップダウンから「ビッグドキュメント形式」を選択します。

ファイルをプロジェクトの Assets フォルダーにドラッグアンドドロップすると、Unity はすべての Photoshop レイヤーを子オブジェクトとして含むプレハブを自動的に作成します。子オブジェクトはそれぞれ Sprite Renderer コンポーネントを持ち、デフォルトでは、ソースファイルのトランスフォームおよび深度ソートデータを保持して、ソース画像を再現します。

インポートの動作は、インポート設定で変更できます。一部の設定は、画像をプロジェクトにインポートするためのデフォルト設定と同じです。その他に新しく、このパッケージで導入された設定があります。

たとえば、Import Hidden 設定を有効にすると、表示されているレイヤーだけでなく、PSB ファイルの非表示のレイヤーをインポートできます。

Mosaic 設定を有効にすると、レイヤーごとにスプライトを生成します。これを無効にすると、Photoshop のアクティブレイヤーを結合した単一のスプライトが作成されます。これは、画像を結合してエクスポートするようなものです。

Character Rig プロパティを使用すると、生成された各スプライトを元のトランスフォームと深度ソートデータを維持した形で持つプレハブを作成できます。

スプライトにボーンまたはウェイトデータが含まれている場合、2D PSD Importer は 2D アニメーションの作成に必要な Sprite Skin コンポーネントを追加します。これは、スキニングエディターと連携して機能します。

このオプションを無効にすると、スライスされた Photoshop レイヤーを含むスプライトが生成されますが、順序を保持したり、プレハブアセットを作成したりすることはありません。

Use Layer Grouping 設定を有効にすると、Photoshop のレイヤーグループを表す新しい空のゲームオブジェクトの下にプレハブの子オブジェクトを入れ子にできます。このオプションを有効にすると、Photoshop のレイヤー構造とまったく同じ階層構造が Unity で再現されます。

PSB ファイルを正しくエクスポートするために知っておくべきいくつかのルールがあります。たとえば、同じ名前の Photoshop レイヤーを複数作ることは避ける必要があります。2D PSD Importer は Photoshop のレイヤー効果をインポートしないことにも注意してください。

各設定の詳細については、2D PSD Importer のドキュメントを参照してください。

それでは、いくつかの役立つユースケースを見てみましょう。

最初のユースケースは、2D PSD Importer を使用して、インポートフェーズと画像の反復修正プロセスを高速化し、全体として 2D ワークフローを高速化することです。

グラフィックデザイナーが多数のアイコンを作成しているところ、または下の画像のように、レイヤーごとに 1 つずつ異なるグリフを作成しているところを想像してみてください。それらを異なるレイヤーに配置して、同じドキュメントにサイズまたは色の参照を含めることで、デザイナーは見た目の一貫性を保ちやすくなります。各レイヤーを 1 枚ずつ PNG ファイルにしてエクスポートしたり、すべての要素を含むレイアウトをエクスポートしたりする代わりに、PSB ファイルをインポートすることができます。

アイコンはゲーム内でフラットなグラフィックとして使用されるため、Character Rig 設定を無効にします。これにより、アセットが単純なスプライトシートになります。ファイルの各レイヤーは、独立したスプライトになります。

Photoshop ファイルのインポート時に自動生成されるプレハブは、結果の画像を組み立ててきちんと位置関係を維持する必要がある場合に役立ちます。これは、複数のキャラクターやレイヤー化された要素がある時に発生します。たとえば下の画像の木のような場合です。

インポートすると、木はすでにシーンに配置できる状態になっています。各スプライトの位置と回転は正しく、ゲームオブジェクトの深度の並べ替え順序を処理する Order in Layer の値も正しいです。数値が大きいほど、ゲームオブジェクトはカメラに近づきます。

PSB ソースファイルをプロジェクトの Assets フォルダーに置き、Photoshop のレイヤーデータから直接読み取ることで、アーティストは Unity とより効率的かつ柔軟に統合できます。

この画像のようなアクセサリが多数付いたキャラクターを含む Photoshop ファイルをインポートしたと仮定します。

2D PSD Importer がないと、PNG スプライトシートのすべてのアクセサリをエクスポートして、Unity で自動的にスライスすることになります。次に、アクセサリのスプライトを Unity のキャラクターに手動で配置し、Photoshop の参照を再現します。

2D PSD Importer を使用すると、すべてのアクセサリを（インポートした時点で）最終的な位置に配置できるので、Photoshop で必要なすべての調整を行うことができます。Photoshop で満足いくまで調整して、ファイルを Photoshop で保存するだけでその変更を確定させることができます。

2D PSD Importer は、2D Animation パッケージと組み合わせることで、アニメーションのための 2D アートを準備するための優れたソリューションにもなります。

Photoshop で描いたキャラクターは Unity のプレハブなので、スプライトエディターでリグを付けられます。

上の画像では、PSB ファイルをインポートして作成したプレハブを選択し、スプライトエディターをクリックしました。この場合、スキニングエディターを選択し、ボーンとウェイトを追加してメッシュスケルトンの作成を開始できます。キャラクターのプレハブを手動で組み立てる手間が省けるため、時間を節約できます。

2D Animation パッケージの詳細については、こちらをご覧ください。

Photoshop レイヤーに基づいて自動生成されたプレハブは、フレームバイフレームアニメーションを作る時にも便利です。

この Photoshop ファイルには、タイムライン内でアニメーション化されたキャラクターがあります。各レイヤーは、アニメーションのフレームを表します。

Unity でこのアニメーションを再現する手順は簡単です。

• PSB ファイルをインポートする
• Character Rig オプションを無効にして、スプライトシートを取得する
• PSB アセットをシーンビューにドラッグアンドドロップする
• アニメーションを保存する場所を尋ねるポップアップで「Save」をクリックする
• Sprite Renderer コンポーネントと Animator コンポーネントがアタッチされたゲームオブジェクトが作成される
• 再生ボタンを押す
• 新しく作成されたゲームオブジェクトを選択して、必要に応じてアニメーションウィンドウでアニメーションを調整する

レベルデザインは、視差効果のある 2D 背景など、2D PSD のもう 1 つの実用的なユースケースです。

視差効果は、背景を複数のレイヤーに分割し、各レイヤーをカメラからの距離をずらして配置することで実現されます。2D PSD Importer パッケージを使用すると、アーティストは Photoshop から PSB ファイルを直接操作し、背景をレイヤーに分割し、Unity で生成されたプレハブに変更を直接適用して、すべての変更を確認できます。

2D PSD Importer パッケージは、法線マップのインポートにも役立ちます。この Photoshop ファイルには、すべてのキャラクターアートのレイヤーを含むグループと、生成された法線マップを含むグループがあります。

それらを Unity に取り込むために、キャラクターアートのみが表示された PSB ファイルと、法線マップのみがアクティブな 2 つ目の PSB ファイルをエクスポートします。

法線マップを自動的に適用するために、最初は Character Rig 設定を無効にしてスプライトシートを取得します。次に、アートのスプライトエディターを開き、セカンダリテクスチャを追加します。

URP/2D Renderer に含まれている Sprite-Lit シェーダーなど、法線マップをサポートし、2D ライトが機能するスプライトのシェーダーを選択してください。

本記事の内容は、Unity プロジェクトを使って作業している 2D アーティストが Photoshop からレイヤーを含むファイルをインポートすることでどのように恩恵を受けられるかを示すほんの一例です。このチュートリアルの動画版はこちらです。また、こちらのブログ記事には、2D プロジェクトに役立つヒントが多数紹介されています。2D アートアセットに最適な解像度の選択について書いた記事もご覧いただき、最新の 2D サンプルプロジェクトである『Dragon Crashers』もチェックして、2D PSD Importer の別の使用例に触れてみましょう。