読者です 読者をやめる 読者になる 読者になる

ゆにてく備忘録

Unityやその他学んだ事を忘れないために書くぶろぐ

uGUIチュートリアル まとめ4 UI Image

UnityのuGUIのチュートリアル(UI Image)のまとめです.


UI Image - Unity Official Tutorials

Image

f:id:n_taku:20170330223428p:plain

ImageはUI全般の背景画像とかで使われる
ImageはImage(Script)からなる

Image(Script)

f:id:n_taku:20170330224332p:plain

Source Image

表示されるSpriteを選択できる.何も選ばないとColorプロパティの色の四角形となる

Color

Spriteに対して乗算する色を指定する.

Material

デフォルトではMaterialの指定は不要だが,Imageでシェーダーのプロパティを使いたい時に使用する.
この時,SourceImageがあるので指定したMaterialのテクスチャ設定は無視されるというか,内部的にSourceImageをmaterialの_MainTexに代入しているのかな

uGUIにmaterialを適用した例

tsubakit1.hateblo.jp

tsubakit1.hateblo.jp

Raycast Target

このUI要素の下にボタンなどのタップ判定をとるUI要素が重なっている場合,Raycast Targetがonだと重なっている部分のタップ判定はこのUI要素以下には通らない,offだとタップ判定が下のUI要素に届く

f:id:n_taku:20170402192325g:plain

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オプションは輪郭部分のみを表示するか中央部分もぬりつぶすのかを指定できる

f:id:n_taku:20170402161914g:plain

Spriteの9つの領域はSprite Editorで編集することができる

f:id:n_taku:20170402163503g:plain

Tiled

RectTransformの左下を基準にSpriteを並べて表示する.
Sprite Modeの設定がsingleならば,RectTransformが大きくなるに連れて画像が敷き詰められるように配置される

f:id:n_taku:20170402174247g:plain

Sprite ModeがMultipleならば拡大縮小する4つ角以外の部分が敷き詰められる

f:id:n_taku:20170402174441g:plain

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にする設定である

f:id:n_taku:20170402182048g:plain