【Unity】Photoshop、Affinity Designerで作成した2Dキャラクターの画像をUnityにインポートする方法【2D PSD Importer】

はじめに

Photoshopや、Affinity Designerなどのソフトで作った2Dキャラクターを、レイヤー情報を保持した状態でUnityにインポートする方法を紹介します。

あらかじめ分けておいたパーツごとに分割されているため、アニメーションをさせやすくなっています。

2D PSD Importerとは

インポートするには、2D PSD Importerを使います。これは、PSBファイルをインポートするためのパッケージです。

PSD Importerと言いながら、インポートできるのはPS “B” ファイルなので気をつけて!

Unityのプロジェクト作成時に「2D」を選択していれば、デフォルトでインストールされています。

パッケージマネージャーからインストールすることも可能です。

2D PSD Importerのメリット

以下のように、パーツごとにレイヤーを分けて作ったキャラクターをそのままUnityへ持っていきたいときに、パーツごとにエクスポートするのは非常に大変です。

2D PSD Importerでインポートすると、パーツごとの位置情報はそのままに、Unityへまとめて持っていくことができます。さらに、リグを入れてアニメーションを作成することも簡単にできます。

今回は、Affinity Designerで自作したこちらのキャラクターをUnityへインポートします。

画像のエクスポート

Photoshopの場合

Photoshopでは、PSBファイルをエクスポートすることができます。エクスポートしたら、Unityの方にドラッグ&ドロップします。

Affinity Designerの場合

Affinity Designerの場合は、ラスタライズをしましょう。これをしておかないと、正しくエクスポートすることができません。

ラスタライズ(rasterize)とは点と線で構成されたベクター形式をピクセルで構成されるラスター形式に変換する処理のこと。

https://321web.link/rasterize/

レイヤーを右クリックして、ラスタライズ…を選択します。

レイヤー名に(ピクセル)とついていればOKです。

Affinity Designerでは、PSBファイルはエクスポートできないため、一旦PSDファイルをエクスポートします。エクスポートしたら、ファイルを右クリック > 名前の変更から、拡張子.psdを直接.psbに書き換えます。

あとはUnityにドラッグ&ドロップするだけです。

インポート完了

画像が無事インポートできると、各パーツごとに分かれたプレハブが生成されています。

ヒエラルキーにドラッグ&ドロップすると、作成した通りにしっかり分かれています。

おわりに

イラスト作成ソフトで作った2Dキャラクター画像をUnityへエクスポートする方法でした!

レイヤー情報そのままに持っていくのは、2D PSB Importerが必要ですが、Photoshopで作成したものしか使えないと思っている方もいらっしゃるのではないでしょうか?

Affinity Designerや他のペイントソフトでも、拡張子の書き換えだけでPSBファイルの生成とインポートができるようになりますので、Photoshopを使っていない方もぜひ試してみてください。

タイトルとURLをコピーしました