UnityでUIを作成する上でImageとSpriteの違い

Unityでコンテンツを作成する際、UI等を表現する際には主にuGUIを使用します。
uGUI上で画像を使用するにはImageコンポーネントを使用しますが、場合によってはSprite Rendererを使用する必要がある場合があります。

・uGUI Image

uGUI ImageはCanvasと組み合わせ、Canvas Rendererで画像をSpriteアセットを参照して描画します。
基本的なUnity上で座標設定等で使用されるTransformではなく、RectTransformを使用してシーン内でのオブジェクトの位置を指定します。

・Sprite Renderer

Sprite RendererはSpriteアセットを参照してポリゴン形状を生成し、それに張り付けるような形で画像を描画します。
uGUI Imageとは異なり、Transfromを基準としてシーン内でのオブジェクトの位置を指定します。

・ImageとSpriteの比較

どちらにも共通する仕様として、
・Spriteアセットの指定
・Colorの指定
・SortingLayer/Order in Layer/Hierarchy上での順、を利用しての描画順の制御
・Materialを設定することでスプライト画像を描画するためのカスタムシェーダーを設定
することができます。

Draw Modeの設定は両者にありますが、Draw Mode FillはImageにしかない為、一枚の画像を使ってインジケーターのような表現をするためにはImageの方が優れます。
Sprite Rendererは比較すると機能はシンプルなので、基本的にはUIを表現する上ではImageの方が高機能となっています。
ですが、目的によってはImageにも欠点はあります。
例えばImageもSprite RendererもMaterialの設定によってカスタムシェーダーを使用して特殊な描画が可能ですが、ImageのMaterialはインスタンス化されておらず、実行中にリアルタイムに部分的にマテリアルのパラメーターを変更して動きを見せたいといった表現はやりにくくなっています。
さらに多くの画像を組み合わせたり、重ねたり、動かしたりするような表現を行う場合はSprite Rendererの方が負荷的にも効率的な上、座標系がTransfromな為に制御もやりやすくなっています。

3D空間や3Dモデルを使ったコンテンツを作成する場合でも2D空間のUIは多くの場合必要不可欠となりますので、目的に応じて機能を使い分けていく必要があるでしょう。

エンジニアリング事業部からの最新情報をお届けします