Imageエレメントは画像を表示するためのUIエレメントです。画像の配置だけでなくButtonやPanelなどの背景画像としても利用されます。メニューのGameObject→UI→Imageを選択するとImageエレメントが作成されます。ImageエレメントにはImageコンポーネントが取り付けられています。Imageコンポーネントのプロパティの説明をします。Imageプロパティには表示する画像を設定します。画像はSpriteを指定します。TypeをSpriteにすることで作ることができます。Colorプロパティは表示される画像に色や透明度を付けるプロパティです。表示画像にはColorプロパティで設定した色が乗算されます。αを変更すると半透明にすることもできます。Materialプロパティは画像を描画するシェーダを変更したい場合などに使用します。MaterialをProjectビューで作成しこのMaterialをImageコンポーネントのMaterialプロパティに設定します。作ったMaterialのシェーダーを変更してください。UIシステム用のシェーダはシェーダリストのUIカテゴリに用意されていますのでその中から選ぶことができます。UIにスポットライトを当てたい場合はUI→Lit→Transparentを選びます。Typeプロパティは画像の表示方法を指定するプロパティです。TypeにはSimple,Sliced,Tiled,Filledが選択できます。Simpleの画像タイプはImageエレメントのサイズを変更した場合画像全体が引き伸ばされて(あるいは縮小されて)表示されます。この画像タイプではBorderの設定された9つの領域に分割されたSpriteを使用します。Editorを使用して設定します。画像をリサイズしたときに画像の四隅の角の部分は拡縮されず、中央部分は上下左右に拡縮されます。任意のサイズのウインドウの背景を表示したいときなどに使用します。Centerプロパティのチェックを外すと9つの領域のうち中央部分が表示されなくなります。角や辺の領域の確認に使えます。SpriteのBorderの設定方法を簡単に説明します。Editorボタンを押してください。Editorウインドウが表示されます。Editor内にあるウインドウのBorderに9つに分割する左、下、右、上の幅を入力してください。設定したら忘れずにApplyボタンを押してください。TiledモードはSlicedモードに似ていますがリサイズで大きくした時に中央部分の領域が繰り返されます。使用するSpriteにBorderが設定されていない場合は全体が繰り返し表示されます。Filledの画像タイプは画像を徐々に表示させていく(あるいは消していく)ときに使用します。格闘ゲームの体力ゲージのように残り体力量にしたがって徐々に短くなっていく画像や、円グラフのように中心部分から表示される角度を指定して描画することができます。Originプロパティで指定します。Amountプロパティで指定します。Methodによってどのように表示されるかを以下に示します。Horizontalの時は画像を水平方向に出し消しします。Originプロパティで左右のどちらから出し消しするか選べます。Amountの値により表示される領域を変化させることができます。Verticalのときは画像を縦方向に出し消しします。Originプロパティで上下のどちらから出し消しするか選べます。90の場合は角から扇状に画像を出し消しします。Originプロパティでどの角を中心にするかを指定できます。出し消しする方向をClockwiseプロパティで切り替えることができます。180の場合は辺の中心から扇状に画像を出し消しします。Originプロパティでどの辺の中央を出し消しの中心にするかを指定できます。出し消しする方向をClockwiseプロパティで切り替えることができます。360の場合は画像中心からぐるっと一周するように画像を出し消しします。Originプロパティでどの方向から出し消しするかを指定できます。出し消しする回転方向はClockwiseプロパティで切り替えることができます。TypeがSimpleとFilledのときに使用できます。Aspectにチェックを入れるとImageエレメントのサイズ(WidthやHeight)を変更したときに画像が縦伸びや横伸びしないように縦横比を維持して表示されます。画像表示の大きさはImageエレメントのサイズに内包される最大の大きさになります。Sizeボタンを押すとImageエレメントのサイズを元のスプライトのサイズと同じにします。Unitの影響はうける)。