はじめに
Unityで2Dゲームを作っていると、画像を表示したい場面がよくありますよね。
でも「Image」と「SpriteRenderer」って何が違うの？どっちを使えばいいの？と迷う人も多いと思います。
この記事では、Unity初心者の方に向けて、「UI.Image」と「SpriteRenderer」の違いと、具体的な使い分け方法、実際の使い方までを分かりやすく解説していきます！
1. ImageとSpriteRendererの違いとは？
| 項目 | Image（UI） | SpriteRenderer（2D描画） |
|---|---|---|
| 用途 | UIに画像を表示（ボタン、アイコンなど） | キャラや背景などゲーム内オブジェクト |
| 表示方法 | Canvas内で表示 | ワールド空間に表示 |
| レイヤー | UIレイヤー（画面固定） | Sorting Layerで管理（カメラに依存） |
| スケール・座標 | RectTransform | Transform |
| 透明度や色の変更 | Colorで可能 | Colorで可能 |
| 描画順 | Hierarchy順 + Canvas設定 | Sorting Layer + Order in Layer |
2. 使い分けのポイント
- UIを作るなら → Image
- 例：HPバー、メニュー、スキルボタン、アイテムアイコン
- ゲーム内の見た目を構成するなら → SpriteRenderer
- 例：キャラクター、背景、敵、アイテム、建物
- 目安：「Canvasの中かどうか」でまず判断！
使用素材について
今回は使用例として、Rド様のフリー素材を使わせていただきました。
スマホゲーム好きの方なら、一度は見たことがあるかもしれませんね！
Rド様の素材には、戦士やスライムをはじめ、様々なキャラクターやモンスターの高品質なドット絵が揃っています。
3. Imageの使い方（UIで画像を表示）
ステップ
1. Hierarchy > UI > Image を作成
2. CanvasとEventSystemが自動生成され、シーン上にImageが表示されます
3. Imageにスプライト画像を設定（Inspectorの「Source Image」欄）
4. RectTransformで位置・サイズを調整
5. 必要ならColorで色・透明度を変更
するとこのようにシーンに画像が表示されます。
補足
- アンカーやピボットで画面サイズに応じた位置調整が可能
- UIの描画順は「Hierarchyの順」＋「Canvasの設定」
4. SpriteRendererの使い方（ゲーム内で画像を表示）
ステップ
1. Empty Objectまたは2Dオブジェクトを作成（例：Sprite → Square）
2. SpriteRendererコンポーネントが付いていることを確認
3. Sprite欄に画像を設定
4. Sorting LayerやOrder in Layerで描画順を調整
5. Transformで位置・スケールを操作
するとこのようにシーンに画像が表示されます。
補足
- プレイヤーや敵などに使うことが多い
- アニメーションとの連携も容易
5. よくあるミスと対処法
| よくあるミス | 原因 | 対処法 |
|---|---|---|
| 画像が表示されない | Spriteが設定されていない | Sprite欄に画像を設定 |
| UIとキャラの位置がかぶる | Canvasとワールド空間の重なり | カメラやLayerを確認 |
| 描画順が変になった | Sorting Layerの設定ミス | Order in Layerを見直す |
6. まとめ
- ImageはUI向け。Canvasの中で使う。
- SpriteRendererはゲーム内のオブジェクト向け。ワールド空間に表示。
- 使い分けができると、ゲームのUIと演出がスッキリ整理できる！
Unityで画像を使うなら、この2つの違いと使い方をしっかり押さえておきましょう！
コメント