Unity 6｜1枚の画像から複数のスプライトを切り出す方法【Sprite Editor・Multiple・Slice】
Unityで2Dゲームを作っていると、キャラクターの表情や歩行アニメーション、アイテムの画像などが1枚のPNG画像にまとめられていることがあります。
このような画像をそのまま取り込むと、Unityは最初、画像全体を1つのスプライトとして扱う場合があります。しかし、設定を変更して範囲を切り出せば、1枚の画像から複数のスプライトを利用できます。
この記事では、Unity 6のSprite ModeのMultiple設定から、Sprite EditorでのSlice（切り出し）、Projectウィンドウでの確認までを順番に説明します。プログラムを書く必要はありません。
この記事でできるようになること
- PNG画像をUnityのProjectウィンドウに取り込む
Texture TypeをSprite (2D and UI)にするSprite ModeをMultipleにするSprite Editorを開いてSliceで分割するApplyで保存し、切り出したスプライトを個別に使う
重要：Multipleにしただけでは、画像の中身が自動的に切り出されるわけではありません。 Sprite Editorで切り出し範囲を設定し、変更を適用する必要があります。
まず「スプライト」と「スプライトシート」を理解する
スプライト（Sprite）は、Unityの2Dゲームでキャラクター、背景、アイテムなどを表示するために使う画像の単位です。
スプライトシート（Sprite Sheet）は、複数の絵を1枚にまとめた画像です。例えば、プレイヤーの「立つ・歩く・ジャンプする」姿を1枚のPNGファイルに並べられます。
今回の作業は、PNGファイルを物理的に何枚もの画像ファイルに分割する操作ではありません。元の画像ファイルは1枚のまま、Unityの内部で各部分を別々のスプライトとして参照できるように設定します。
手順1：画像をProjectウィンドウに取り込む
- Unityで2Dプロジェクトを開きます。
- Projectウィンドウの
Assets内に、必要ならSpritesフォルダーを作成します。 - 複数の絵が入ったPNGファイルを、そのフォルダーにドラッグ＆ドロップします。
- Projectウィンドウで取り込んだ画像ファイルを選択します。
ポイント： 今回は、複数のイラストが透明な背景上に離れて配置されているPNG画像が、自動切り出しの練習に適しています。
手順2：Texture TypeとSprite Modeを設定する
画像を選択すると、Inspectorに画像のインポート設定が表示されます。
| 項目 | 設定値 | 意味 |
|---|---|---|
Texture Type | Sprite (2D and UI) | 2D用のスプライト画像として扱う |
Sprite Mode | Multiple | 1枚の画像から複数のスプライトを定義できるようにする |
設定を変更したら、Inspector側に表示されるApplyを押してインポート設定を反映してください（表示状態やUnityのバージョンによっては設定の反映方法が異なる場合があります）。
注意： ここでのApplyと、後でSprite Editor内で押すApplyは、異なる操作段階にあります。
手順3：Sprite Editorを開く
Projectウィンドウで元画像が選択されている状態で、InspectorのSprite Editorボタンを押します。
Sprite Editorウィンドウが開き、画像が表示されます。画面内のメニューや位置はUnity 6の細かなバージョン、ウィンドウ構成で異なる場合がありますが、切り出しにはSlice機能を使用します。
Sprite Editorボタンが見つからない場合：
Texture TypeがSprite (2D and UI)になっているか確認してください。また、2D Sprite関連パッケージが使用できる状態かPackage Managerで確認します。
手順4：Sliceで切り出す
Sprite EditorのSliceを開き、画像の並び方に応じてTypeを選びます。
方法A：Automatic（自動切り出し）
絵と絵の間に透明な余白がある場合に向いています。
Sliceを開きます。TypeをAutomaticにします。- 必要に応じて
Pivotや既存の切り出し領域を扱うMethodを確認します。 Sliceを実行します。- それぞれの絵に矩形の切り出し領域が作られたか確認します。
Automaticは、基本的に画像の透明度を利用して各絵の境界を推定します。背景が不透明で絵同士の区切りが認識できない画像では、期待どおりに分かれないことがあります。
方法B：Grid by Cell Size（指定サイズのマス目で切り出し）
キャラクターのアニメーションが同じサイズのマス目に並んでいる場合に向いています。
Sliceを開きます。TypeをGrid by Cell Sizeにします。- 例として、1コマが64×64ピクセルなら、セルのサイズを
64 × 64に設定します。 - 画像に余白や間隔がある場合は、
OffsetやPaddingを調整します。 - プレビューを確認し、
Sliceを実行します。
Grid by Cell Countを選べば、セルの大きさではなく、列数と行数から分割することもできます。
例えば、次のような歩行キャラクターのスプライトシートは、1コマ32×32ピクセルの絵が3列×4行に並んでいます（元画像は96×128ピクセル）。Grid by Cell Countで列を3、行を4にするか、Grid by Cell Sizeで32 × 32を指定すると、12コマに分けられます。
行ごとに「下向き・左向き・右向き・上向き」、列ごとに「左足を出す・立ち・右足を出す」が並んでいます。切り出した後、1→2→3→2の順に表示すると歩いているように見えます。
練習用の画像： 上の図は見やすいように拡大し、背景色を付けています。Unityで試すときは、次の原寸・背景透過のPNG（96×128ピクセル）をダウンロードして使ってください。ドット絵を取り込んだら、Inspectorで次のように設定し、最後にApplyを押して確定します。
| 項目 | 設定値 | 理由 |
|---|---|---|
Pixels Per Unit | 32 | 1コマ（32×32ピクセル）がUnityの1マス（1ユニット）になります。初期値の100のままだと0.32マス分になり、小さく表示されます |
Filter Mode | Point (no filter) | 拡大してもドットがにじまず、くっきり表示されます |
Compression | None | 圧縮による色の崩れを防ぎます。小さな画像なので、ファイルサイズはほとんど変わりません |
Pixels Per Unitは「何ピクセルでUnityの1マスにするか」を決める設定です。地面のタイルも32ピクセルで作っている場合は、キャラクターがタイル1マスと同じ大きさになり、配置や移動量も考えやすくなります。
同じ並び方で、その場に立って待つアイドル（待機）のスプライトシートも用意しました。切り出しの設定は歩行と同じで、列3・行4（または32 × 32）です。
列ごとに「立ち・息を吐く（上半身が1ドット沈む）・まばたき」が並んでいます。1→2→1→2…と交互に表示すると呼吸しているように見え、ときどき3をはさむとまばたきします。後ろ向きは目が見えないので、3コマ目ではバンダナの垂れが揺れます。
| 切り出し方法 | 向いている画像 |
|---|---|
Automatic | 背景が透明で、絵が離れている画像 |
Grid by Cell Size | 1コマのピクセルサイズが決まっている画像 |
Grid by Cell Count | 何列・何行に分けるかが決まっている画像 |
手順5：切り出した範囲を確認・調整する
切り出した領域が、キャラクターの腕や足を途中で切っていないか確認しましょう。必要ならSprite Editor上の矩形の境界を調整できます。
また、キャラクターアニメーションでは各コマの大きさやPivot（基準点）を揃えることが重要です。コマごとに基準点が違うと、アニメーション再生時に位置が揺れて見える原因になります。
手順6：Sprite EditorでApplyを押す
切り出し結果を確定するには、Sprite EditorウィンドウのApplyを押します。
Applyを押さないまま閉じると、編集した切り出し情報が反映されない場合があります。切り出したら必ず確認する習慣をつけましょう。
手順7：Projectウィンドウで結果を確認する
- Sprite Editorを閉じます。
- Projectウィンドウで元のPNG画像の左側にある展開用の矢印をクリックします。
- 元画像の下に、複数のスプライトが表示されるか確認します。
- そのうち1つをSceneビューへドラッグ＆ドロップします。
1つだけをSceneビューに置けたら成功です。 元画像の下にスプライトが現れない場合は、Sprite Mode、切り出し領域、Sprite EditorのApplyをもう一度確認します。
よくある疑問・トラブル
Multipleに変更したのに、分割されません
Multipleは「複数のスプライトを登録できるモード」にする設定です。Sprite EditorでSliceするか、手動で範囲を作る必要があります。
Automaticで2つの絵がくっついてしまいます
Automaticは透明部分を手がかりにします。絵同士が接触していたり、透明でない背景でつながっていたりすると、1つとして認識されることがあります。手動調整かGridを試してください。
Sprite Editorボタンがありません
Projectウィンドウで画像ファイルそのものを選択しているか、Texture TypeがSprite (2D and UI)かを確認してください。必要ならPackage Managerで2D Spriteパッケージも確認します。
切り出したのにProjectウィンドウに出てきません
Sprite EditorのApplyを押したか確認し、元画像の左側の矢印を展開してください。
画像がぼやけます
これは切り出しとは別の問題です。ドット絵の場合は、画像のインポート設定でFilter ModeをPoint (no filter)、CompressionをNoneにすると、くっきり表示されます。まずは切り出しを完了し、見た目の調整は次の作業として分けると理解しやすくなります。
配置したスプライトが小さく表示されます
画像のインポート設定にあるPixels Per Unitを、1コマのピクセル数に合わせます。1コマが32×32ピクセルなら32にすると、1コマがちょうどUnityの1マスの大きさになります。変更したらApplyを押して確定してください。
練習問題：4つのアイテムを1枚のPNGから切り出そう
ポーション、スライム、コイン、宝石など、4つの絵が透明背景に並んだPNG画像を用意し、次の順番で試してください。
- ☐ PNGファイルをAssets内に取り込んだ
- ☐
Texture TypeをSprite (2D and UI)にした - ☐
Sprite ModeをMultipleにした - ☐ Sprite Editorを開いた
- ☐
AutomaticまたはGridでSliceした - ☐ Sprite Editorで
Applyした - ☐ Projectウィンドウで個別のスプライトを確認した
- ☐ 切り出したスプライトを1つSceneに配置した
まとめ
今回の流れは、「Multipleで複数扱いを許可する → Sprite Editorで範囲を決める → Sliceで切り出す → Applyで確定する → Projectウィンドウで確認する」です。
最初は、MultipleとSliceの違いが分かりにくいかもしれません。Multipleは設定、Sliceは切り出し範囲を作る操作と考えると整理しやすくなります。
複数のスプライトを利用できるようになると、2Dキャラクターの歩行アニメーションや、アイテムの表示切り替えなどにも発展できます。