Menu

© 2026 ういやまラボ

JPEN
BLOGTOOLSPRODUCTNOTES
リストに戻る

【Unity】Unity 2Dゲーム開発の基礎：Spriteとスプライトシートを使いこなす

作成: 2025-12-07最終更新: 2026-07-10

インポートしたドット絵がぼやける、キャラの大きさがバラバラになる——2Dの初手でつまずくのはたいていインポート設定です。Sprite設定・Pixels Per Unit・Filter Modeの3点から、スプライトシートのSprite Editor分割、Sprite Atlasまでを解説します。

2Dゲームを作ろうと最初の画像をインポートしたとき、多くの人が同じ場所でつまずきます。 せっかくのドット絵がぼやけて表示される。キャラと背景の大きさの比率がめちゃくちゃになる。——原因はどちらも、画像そのものではなくUnity側のインポート設定にあります。

この記事では、2Dゲームのビジュアルの根幹であるSprite（スプライト） の正しいインポート設定から、複数のコマを1枚にまとめたスプライトシートの分割・活用までを解説します。

2Dスプライトのイメージ。粘土風の2Dゲーム画面に、キャラクターのアニメーションコマが並んだスプライトシートが浮かんでいる

この記事でわかること

  • Spriteの基本設定とSprite Renderer
  • ドット絵がぼやける問題の直し方（Filter ModeとCompression）
  • Pixels Per Unit——2Dの「大きさの基準」を揃える
  • スプライトシートのSprite Editor分割（自動／グリッド）
  • なぜ1枚にまとめるのか（ドローコールとSprite Atlas）

目次

Sponsored

Spriteとは？

2Dゲームの画面に表示されるもの——キャラクター、背景、アイテム、エフェクト——は、ほぼすべてSpriteという画像アセットです。

UnityにPNGなどの画像をインポートすると、デフォルトではTexture TypeがDefault（3D用テクスチャ）として扱われます。2Dで使うにはInspectorで切り替えます。

  1. プロジェクトウィンドウで画像アセットを選択します。
  2. InspectorのTexture TypeをSprite (2D and UI)に変更します。
  3. Applyを押して適用します。

tips: プロジェクト作成時に2Dテンプレートを選んでいれば、画像は最初からSpriteとしてインポートされます。3DテンプレートやURP 3Dで2Dを混ぜるときは手動変更が必要です。

シーンに配置されたSpriteはSprite Rendererコンポーネントが描画します。色（Color）による着色や、Flip X/Yによる反転（左右の向き変え）もこのコンポーネントで行えます。

ドット絵がぼやける：Filter ModeとCompression

「元の画像はカリカリのドット絵なのに、Unityに入れるとぼやける」 ——2Dで最も多い相談です。原因は2つの設定にあります。

ドット絵のぼやけ比較図。同じドット絵のキャラクターが、Bilinear設定では輪郭がにじんでぼやけ、Point設定ではピクセルの角が立ってくっきり表示されている
  • Filter Mode: 画像を拡大縮小するときの補間方法です。デフォルトのBilinearは隣のピクセルと色を混ぜて滑らかにするため、ドット絵ではにじみになります。ドット絵は Point (no filter) に変更してください。ピクセルの角がそのまま残ります。
  • Compression: テクスチャ圧縮です。圧縮は写真的な画像には有効ですが、ドット絵では色化けや汚れの原因になります。ドット絵は None が基本です。

逆に、手描きイラスト系の高解像度画像ならBilinear＋圧縮ありのデフォルトで問題ありません。「ドット絵ならPoint＋None」 とセットで覚えてください。

Pixels Per Unit：大きさの基準を揃える

Pixels Per Unit（PPU）は、画像の何ピクセルをシーンの1ユニットとして扱うかの設定です（デフォルト100）。

Pixels Per Unitの図。同じ32ピクセルのキャラ画像が、PPU 100では小さく、PPU 32ではちょうど1ユニットの大きさで表示される。足元のグリッド1マス＝1ユニット

たとえば32×32ピクセルのドット絵キャラは、PPU 100だとシーン上で0.32ユニットの小さな存在になります。PPUを32にすれば、ちょうど1ユニット＝グリッド1マス分の大きさになります。

重要なのは値そのものより 「プロジェクト内で基準を統一する」 ことです。キャラは32、背景タイルは16、とバラバラにすると配置のたびにスケール調整が必要になります。ドット絵なら「タイル1枚のピクセル数＝PPU」に揃えるのが定番です。物理演算も1ユニット＝1メートル相当で計算されるため、PPUの統一は 2D物理 の挙動にも効いてきます。

Sponsored

スプライトシートとSprite Editor

キャラクターの歩き・ジャンプのような連続コマは、1コマ1ファイルではなく、1枚の画像にまとめた「スプライトシート」 で管理するのが基本です。

スプライトシートの例：スライムのアニメーション

上はスライムのアニメーション用スプライトシートの実例です。この1枚をUnity上で個々のコマに分割するのがSprite Editorの仕事です。

Sprite Editorを使った分割方法

  1. Sprite Modeの変更: 画像を選択し、InspectorでSprite ModeをSingleからMultipleに変更します。
  2. Sprite Editorを開く: Sprite Editorボタンをクリックします。
  3. 自動分割 (Automatic): 左上のSliceメニューでType: AutomaticのままSliceを実行すると、透明部分を解析して個々のスプライトを自動検出します。サイズがまちまちな素材向きです。
  4. グリッド分割 (Grid by Cell Size): コマが等間隔に並んでいるシートは、Type: Grid by Cell Sizeで1コマのピクセルサイズ（例: 32×32）を指定して分割するほうが正確です。アニメーション用シートは基本こちらです。
  5. 手動調整: 矩形をドラッグで作成・修正できます。スプライト名やピボット（基準点）も個別に設定可能です。
  6. 適用: 右上のApplyを忘れずに。押さないと分割情報が保存されません。
Sprite Editorの2つの分割方法の比較図。Automatic（自動）は大きさがまちまちな素材を点線の枠で自動検出し、Grid by Cell Sizeは同じ大きさの歩行コマを等間隔のグリッドで区切る

AutomaticとGrid by Cell Sizeは、素材の並び方で選ぶのがコツです。歩行や攻撃のように同じサイズのコマが等間隔に並んだアニメシートはGridが確実。エフェクトやアイテムをサイズ無視で1枚に詰め込んだ素材集は、透明部分を解析してくれるAutomaticが向いています。

Apply後、プロジェクトウィンドウでアセットの矢印を展開すると、分割された個々のスプライトが子アセットとして現れます。これをそのまま 2Dアニメーション のクリップ作成に使えます。

なぜスプライトシートを使うのか？

ドローコールの図。バラバラの画像を1枚ずつ描くと描画命令が何度も走るが、1枚のシートにまとまっていると1回の命令でまとめて描ける
  • パフォーマンス向上: 複数のSpriteが同じテクスチャを共有していると、Unityは1回の描画命令（ドローコール）にまとめて処理できます。画面に数百のスプライトが出る2Dゲームでは効果が大きい最適化です（詳細は ドローコールとバッチングの記事 参照）。
  • 管理の容易さ: 関連画像が1ファイルにまとまり、アセット整理がシンプルになります。
  • メモリ効率: 多数の小さい画像より1枚の大きい画像のほうがメモリ効率も良好です。

tips: 「別ファイルの画像たちを、Unity側で自動的に1枚にまとめる」公式機能がSprite Atlasです。素材を1枚に描き直さなくても同じ効果が得られます（おまけ参照）。

実践：歩行アニメ素材をシートから用意する

アクションの主人公の歩き、見下ろしRPGの4方向歩行、横スクロールの走り——2Dゲームの「キャラが動く」は、ほとんどが 1枚のスプライトシートを分割してアニメにする という同じ流れで作れます。ここまでのインポート設定を、実際の制作手順に落とし込んでみましょう。

スプライトシートから歩行アニメを作る流れ。1枚のシートをSprite Editorで分割して個別のコマにし、コマをまとめてドラッグすると歩行アニメのクリップになる3ステップのパイプライン図
  1. インポートと基本設定: 歩行コマが横に並んだPNGをインポートし、Texture TypeをSprite (2D and UI)に。ドット絵ならFilter Mode: Point・Compression: Noneにして、PPUを1コマのピクセル数に合わせておきます（前半で解説した3点）。
  2. Multipleに切り替え: Sprite ModeをSingleからMultipleへ変更します。
  3. Grid by Cell Sizeで分割: Sprite Editorを開き、1コマのサイズ（例: 32×32）を入れてSlice→Apply。コマが等間隔ならAutomaticよりもGridのほうがズレません。
  4. アニメ化: 分割された子スプライトをプロジェクトウィンドウで 全選択し、シーンのオブジェクトへまとめてドラッグ。Unityが自動でAnimation ClipとAnimatorを生成してくれます（保存名をwalkなどに）。

ポイントは2つです。

  • 分割方法は「素材の並び方」で決める: 等間隔のアニメシートはGrid by Cell Size、大きさがまちまちなエフェクト集などはAutomatic。ここを間違えるとコマがずれて、再生時にアニメがガタつきます。
  • コマのピボットを揃える: 各コマの基準点（ピボット）がバラバラだと、再生中にキャラが上下にブレます。Sprite Editorで全コマのPivotをBottomに統一しておくと、足が地面についたまま滑らかに歩きます。

ここで作ったクリップの再生速度やループ、「歩き」と「待機」の切り替えは、2Dアニメーション入門 のAnimatorで制御します。状態を条件でつなぐところまで踏み込むと、実際にプレイヤー入力で動かせるキャラクターになります。

おまけ：先に知っておくと良いこと

  • Sprite Atlas: Create > 2D > Sprite Atlasで作成し、対象フォルダを登録するだけで複数スプライトを実行時に1枚へパッキングしてくれる公式機能です。UIアイコンなど「ファイルは別々に管理したいがドローコールは減らしたい」場面の定番です。
  • 9スライス: ウィンドウ枠やボタンのように「角は固定・辺だけ伸ばす」画像は、Sprite EditorでBorderを設定しSprite RendererのDraw ModeをSlicedにすると、どんなサイズでも角が崩れません。
  • ピボットの使いどころ: キャラの足元をBottomにしておくと、地面への配置や拡大縮小が直感的になります。回転の中心もピボットです。
  • 描画順: 2Dの前後関係はSorting LayerとOrder in Layerで制御します。Z座標ではなくこちらを使うのが2Dの流儀です。

まとめ

  • 2Dで使う画像はTexture Type: Sprite (2D and UI)。
  • ドット絵はFilter Mode: Point＋Compression: None。ぼやけの原因はほぼこれ。
  • PPUはプロジェクトで統一（ドット絵はタイルサイズ＝PPUが定番）。物理挙動にも影響する。
  • 連続コマはスプライトシートにまとめ、Sprite Mode: Multiple＋Sprite Editorで分割。等間隔ならGrid by Cell Size。
  • 同じテクスチャを共有するとドローコールが減る。まとめられない素材はSprite Atlasで。

インポート設定は地味ですが、2Dゲームの見た目の品質を最初に決める工程です。「Point・None・PPU統一」の3点を最初に済ませてから制作に入りましょう。