Unity を検索

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

2021年4月20日 カテゴリ: Engine & platform | 11 分 で読めます
Dragon Crashers red dragon spitting fire!
Dragon Crashers red dragon spitting fire!
取り上げているトピック
シェア

Is this article helpful for you?

Thank you for your feedback!

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

なぜ 2D PSD Importer を使うのか

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

Menu with 2D PSD Importer in it

2D PSD Importer パッケージの使用方法

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

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

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

Save as menu - showing the format is 'Large Document Format'.

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

The asset folder - all of the dragon's arms, legs etc.

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

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

Menu showing the 'import hidden' setting.
Unity 2021.1 の 2D Importer パッケージのインスペクタービュー

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

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

Editor screenshot. Game character is in the middle with all the different layers on the right.
ほとんどの画像描画ソフトウェアでは、レイヤー化された画像を PSD にエクスポートできる。これらのファイルの名前を PSB に変更して、2D PSD Importer で使用できる。

スプライトにボーンまたはウェイトデータが含まれている場合、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 ファイルをインポートすることができます。

The photoshop file of a medieval type helmet with a feather in it
Photoshop ファイルと、そのファイル内のレイヤーがどのように Unity のスプライトとしてインポートされるかを示す例。

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

個別のパーツから大きなオブジェクトを作る

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

A tree in photoshop is on the left and an image of the tree fully ready to go is on the left

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

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

2D Animation のスケルトンアニメーションを使用してキャラクターをアニメーション化する

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

A photoshop file of a happy witch with blue hair

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

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

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

The character in Photoshop is a Prefab in Unity, ready to rig in the Sprite Editor

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

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

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

フレームバイフレームアニメーションの作成

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

Pixel art of things like bunnies, chickens, bats, tentacles and crystal balls.
アート提供:Henry Software(アセットストアでも入手できます!)

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

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

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

視差レイヤーを使用したステージの設計

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

In editor screenshot - scene set is sunny and there are ruins.

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

法線マップとマスクマップの作成

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

A photoshop file - a side-shot of a holographic glass girl
2D PSD Importer は非表示のレイヤーをインポートしないようにもできるため、2 つのバージョンのキャラクターアセットを簡単に作成できます。

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

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

In the sprite editor - image is a cluster of holographic glass looking parts that make up the girl above

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

その他のリソース

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

このコンテンツはサードパーティのプロバイダーによってホストされており、Targeting Cookiesを使用することに同意しない限り動画の視聴が許可されません。これらのプロバイダーの動画の視聴を希望する場合は、Targeting Cookiesのクッキーの設定をオンにしてください。

2021年4月20日 カテゴリ: Engine & platform | 11 分 で読めます

Is this article helpful for you?

Thank you for your feedback!

取り上げているトピック