【Unity】2D Pixel Unit Maker - SPUM で自作パーツを追加してみた

Unity の 2D Pixel Unit Maker - SPUM で自作パーツを追加する方法をまとめます。

## 2D Pixel Unit Maker - SPUM とは

SPUM は、Unity で 2D ピクセルキャラクターを簡単に作成できるアセットです。

アセットストアリンク

https://assetstore.unity.com/packages/2d/characters/2d-pixel-unit-maker-spum-188715?locale=ja-JP

GitHub リポジトリリンク

https://github.com/soonsoon2/SPUM

### SPUM の特徴

- 簡単な操作でパーツを組み合わせてピクセルキャラクターを作成可能
- 初期のプリセットパーツが十分あるが、アドオンを購入することでさらに豊富なプリセットパーツが利用できる
- 自作パーツの追加も可能

この記事では自作パーツの追加について例をまとめます。

### 自作パーツを追加するメリット

よりオリジナリティの高い、再現度の高いキャラクターを作成できる
既存のパーツでは表現できないデザインを実現できる

### 公式の解説動画

公式のビデオチュートリアルもありますので、参考にしてください。

https://github.com/soonsoon2/SPUM?tab=readme-ov-file#video-tutotrial-how-to-use

リポジトリの「[How to import image sprite in your SPUM unity project](https://youtu.be/LH8rrBQ1yvw)」のリンクからアクセスできます。

## 自作パーツ追加の手順

以下の手順で自作パーツを追加します。

1. プリセットパーツのコピー
2. リソースの再インポート
3. パーツのドット絵編集
4. Unity のスプライトエディターでの調整

### 確認環境

- Unity 6
- SPUM 177

### プリセットパーツのコピー

SPUM の初期のプリセットパーツは `Assets/SPUM/Resources/Addons/Legacy/0_Unit/0_Sprite` 以下に保存されています。`0_Hair` などわかりやすいディレクトリにパーツが分かれています。

SPUM のプリセットパーツをコピーして、自作パーツを追加します。元のプリセットパーツは自作したいパーツに近いものを選択します。

Hair_3 がイメージに近かったです。

Hair_3 | Hair_3 を白での利用
:----|:--
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/1855b817-75a1-4d86-b97c-4e678ef1b5ae.png)|![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/b9bb28bc-ec12-4eb2-848a-cccbe9258fba.png)

コピー元と同じディレクトリに名前を変えて保存しています。
今回は Hair_3 を Hair_3_1 としてコピーしました。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/e11c466c-d98a-43a8-9988-af2d01e983c3.png)

### リソースの再インポート

`SPUM_Scene` を開き、`SPUM_Manager` のインスペクターから `REGENERATE DATA & LOAD PACKAGES` をクリックします。

SPUM_Scene を再生したら `Hair_3` と `Hair_3_1` が選択できるようになっています。

![スクリーンショット 2025-02-16 15.58.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/31213854-d024-43a2-88a4-7b245240ebb5.png)

### パーツの準備

ドット絵作成ツールなどで `Hair_3_1.png` を編集します。

今回はドット絵作成ツールとして [PIXEL STUDIO](https://store.steampowered.com/app/1204050/Pixel_Studio__pixel_art_editor/?l=japanese) を使用しました。

元の Hair_3_1.png | 変更後の Hair_3_1.png
:--|:--
SPUM で色が変更できるプリセットパーツは白とグレースケールで作成されています。 | 自作パーツは色を利用してもいいです。その場合は利用時に SPUM での色指定を白にします。
![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/55a112e3-4a9d-405d-940f-7742d6c77946.png) | ![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/7c80f41b-368e-4c95-9fa8-a540fdf90bdc.png)

### Unity のスプライトエディターでの調整

`Hair_3_1.png` を Unity で開き、スプライトエディターで調整します。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/9ae14fe6-7ceb-429e-9b12-f958c867a757.png)

スプライトエディターではドット絵のスライスの指定ができます。髪だと1枚のスプライトなので Pivot だけ調整すればいいです。
目や服の場合はスプライトをさらに分かれているのでそれぞれ調整が必要です。

例えば服は Right, Body, Left に分かれています。

![image.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/c8fe8e6f-c25d-4f09-97c5-833b2c9d6019.png)

今回のようにプリセットパーツをコピーして利用する場合は、元のパーツに沿っていれば変更する箇所が少なくて済みます。

これで `SPUM_Scene` で追加したパーツを利用することができます。

## 結果

髪、服を自作パーツで生成してみました。

![complete.gif](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/63607/706e2638-0e25-4b6d-a3d6-5c44c84bafdf.gif)

関連動画: https://www.youtube.com/shorts/R0V32eBthgI

## まとめ

SPUM は自作パーツを追加することでより自由なキャラクター制作が可能です。

ぜひ試してみてください！