uGUIチュートリアル まとめ4 UI Image
UnityのuGUIのチュートリアル(UI Image)のまとめです.
UI Image - Unity Official Tutorials
Image
ImageはUI全般の背景画像とかで使われる
ImageはImage(Script)からなる
Image(Script)
Source Image
表示されるSpriteを選択できる.何も選ばないとColorプロパティの色の四角形となる
Color
Spriteに対して乗算する色を指定する.
Material
デフォルトではMaterialの指定は不要だが,Imageでシェーダーのプロパティを使いたい時に使用する.
この時,SourceImageがあるので指定したMaterialのテクスチャ設定は無視されるというか,内部的にSourceImageをmaterialの_MainTexに代入しているのかな
uGUIにmaterialを適用した例
Raycast Target
このUI要素の下にボタンなどのタップ判定をとるUI要素が重なっている場合,Raycast Targetがonだと重なっている部分のタップ判定はこのUI要素以下には通らない,offだとタップ判定が下のUI要素に届く
Image Type
Image TypeはSource Imageの使用方法に関する設定でSimple,Sliced,Tiled,Filledがある
Simple
SpriteをRectTransformのサイズに引き延ばす.
Preserve AspectOptionオプションははRectTransformに収まるギリギリまでAspect比率を保って拡大する
Set native Size ボタンはRectTransformをSource ImageのSpriteの大きさ(拡大縮小されてないサイズ)にする
Sliced
Source Imageで設定したSpriteを9つの領域に分け,4つ角以外の部分のみを拡縮し表示をする
Fill Centerオプションは輪郭部分のみを表示するか中央部分もぬりつぶすのかを指定できる
Spriteの9つの領域はSprite Editorで編集することができる
Tiled
RectTransformの左下を基準にSpriteを並べて表示する.
Sprite Modeの設定がsingleならば,RectTransformが大きくなるに連れて画像が敷き詰められるように配置される
Sprite ModeがMultipleならば拡大縮小する4つ角以外の部分が敷き詰められる
Filled
Spriteをどのように(Fill Method),どこ基準(Fill Origin)で,どのくらい(Fill Amount)塗りつぶすのかを設定できる.
Fill Amountは0~1の間の値で,0の時は何も塗らない,1の時は全部塗る,0.5の時は半分塗るという意味
円状に塗りつぶす時はClockwiseオプションで時計回りに塗りつぶすのか反時計周りに塗りつぶすのか設定できる.
Fill Methodは以下の4種類
- Horizontal 水平方向に塗りつぶす
- Vertical 垂直方向に塗りつぶす
- Radial 90 4つ角から90度塗りつぶす
- Radial 180 4辺から180度塗りつぶす
- Radial 360 Rectの中心から360度塗りつぶす
Fill Origin(基準位置)の種類は以下
- Horizontal => LeftとRight
- Vertical => TopとBottom
- Radial 90 => Bottom Left,Bottom Right,Top Left,Top Right
- Radial 180 => Bottom,Left,Top,Right
- Radial 360 => Bottom,Left,Top,Right
Preserve Aspectは画像のアスペクト比を保ったまま拡大縮小する設定で
Set Native SizeボタンはSprite画像のサイズをRectTransformにする設定である