Unity UGUI -- Image

Image控件

Image控件向使用者顯示非互動式圖像。這可以用于裝飾、圖示等，圖像也可以從腳本更改來反映其他控件的變化。該控件類似于Raw Image 控件，但提供了更多的選項來動畫圖像和精确歸檔控件矩形。然而，Image控件要求它的紋理是精靈，而原始圖像可以接受任何紋理。

Properties 屬性

Property:	Function:
Source Image 圖像源	The texture that represents the image to display (which must be imported as a Sprite).
Color 顔色	The color to apply to the image. 圖檔的顔色
Material 材質	The Material to use for rendering the image. 圖檔的材質
Image Type	The method used to display the image. The options are Simple, Sliced, Tiled and Filled (see below).
Preserve Aspect (Simple and Filled Image Types only)	Should the image’s original proportions of height and width be kept rather than rescaled?
Fill Center (Sliced and Tiled Image Types only)	Should the center slice of the image be filled as well as the borders?
Fill Method (Filled Image Type only)	Specifies the way the image should “grow” to fill the space during an animation. The options are Horizontal, Vertical, Radial90, Radial180 and Radial360 (see below).
Fill Origin (Filled Image Type only)	The point in the image from which the fill should proceed. The options are various combinations of Bottom, Top, Left and Right, depending on which Fill Method is selected (see below).
Fill Amount (Filled Image Type only)	The fraction of the image (range 0.0 to 1.0) that is currently filled.
Clockwise (Filled Image Type only)	Should the fill proceed in a clockwise direction? (Radial fills only.)
Set Native Size	Button to set the dimensions of the image box to the original pixel size of the texture.

Raycast Target 選項：

控件是否需要響應，勾選後事件會在EventSystem在Update的Process觸發。

Packing Tag：

打包的标志值，最後打包的時候會把Tag相同的所有小圖打包成一個大圖。不像cocos打包圖集需要用到第三方軟體，這裡Unity會幫我們把相同Tag的圖檔打包成大圖，非常友善。

Pixels Per Unit 100：

表示100像素為1個Unity機關(1米)，也可以在Scene視圖中看出，640X960分辨率的圖檔在視圖中占的網格橫方向有6格多一點，豎方向9格多一點。

Pivot：

表示錨點的位置，就是圖檔自身原點的位置(center==(0.5,0.5))　　

Image Type

1: Simple: 圖檔縮放到目标大小;

2: Slice（切片）: 圖檔按照九宮格縮放;

3: Tiled（平鋪）: 圖檔平鋪填充到目标大小;

4: Filled:指定區域顯示，垂直，水準, 圓周;

Simple

圖檔整張全顯示，不裁切，不疊加，根據邊框大小會有拉伸。

Preserve Aspect（鎖定比例）：針對Simple模式，勾選之後，無論圖檔的外形放大還是縮小，都會一直保持初始的長寬比例。

使用場景：遊戲背景、圖示、對話框背景、一般圖像

Sliced

圖檔9宮格拉伸，如下圖，圖檔的四個角會保持原狀，中間的區域會随着方向進行拉伸。1和4部分會随着圖檔的橫向拉伸而拉伸，2和3部分會随着圖檔的縱向拉伸而拉伸，圖檔的中間部分會拉伸5進行填充。

Fill Center（填充中心）：勾選後，5顯示，反之，5不可見。

使用場景：對話框、按鈕、血條

注意事項：

使用Slice時，會比Simple/Tile用更多Vertices (4 vs 36)；
需要在Sprite Editor中，設定相關圖檔的Border；
注意圖像中的展開部分，在拉伸後是否美觀；

Unity UGUI -- Image

Tiled

若圖檔已經過裁切，則使用Tiled模式後，根據圖檔邊框拉伸，圖檔的四個角會保持原狀，而1和4部分會随着圖檔的橫向拉伸而拉伸，2和3部分會随着圖檔的縱向拉伸而拉伸，圖檔的中間部分會用5進行平鋪填充。若圖檔未裁切，則使用Tiled模式後，根據圖檔邊框拉伸，圖檔保持原大小不做變化，隻是用自身平鋪填充。

Fill Center（填充中心）：（已裁切的圖像源才有此選項）勾選後，5顯示，反之，5不可見。

使用場景：背景

注意事情：

需要在Sprite Editor中，把圖檔的Wrap Mode設定為Repeat,否則會産生許多不必要的Vertices；
要確定Tile無縫地拼到其他Tile；

Filled

Filled（填充的）：指定區域顯示，根據填充方式、填充起點、填充比例決定圖檔顯示哪一部分。

Fill Method（填充方式）：分為Horizontal水準、Vertical垂直、Radial90度圓、Radial180度圓、Radial360度圓。

Fill Origin（填充起點）：Bottom、Right、Top、Left，随着填充方式不同有所變化。

Fill Amount（填充比例）：0是完全不顯示，1是完全顯示。

使用場景：血條、經驗、魔法量、下載下傳進度、完成度

圖檔資源的Inspector面闆屬性

導入的圖檔資源，在Inspector面闆可以看到如下屬性

Texture Type 選項：貼圖類型

Default：預設

Normal map：法線貼圖

Editor GUI and Legacy GUI：UI貼圖

Sprite(2D and UI)：精靈

Cursor：滑鼠指針

Cookie：遮罩貼圖

Lightmap：烘焙貼圖

Single Channel：單通道

UI切圖一般使用Sprite(2D and UI)

Sprite Mode 選項：

1.Single（單個）

2.Multiple（多個）

3.Polygon（多邊形）

根據需求選擇，其他設定保持預設

點選Sprite Editor進入編輯圖檔，如果選擇Multiple模式可以自由框選多個

Advanced 選項：進階(可自定義一些貼圖屬性)

保持預設

Wrap Mode 選項：貼圖與貼圖之間的拼接模式

保持預設

Filter Mode 選項：過濾模式

(1) Point(no filter)：沒有縮放

(2) Bilinear：B樣條線性插值，放大幾倍，就是把同樣的像素複制幾次。

(3) Trilinear：

建議保持預設

注意：圖檔修改後一定要記得點選Apply按鈕，應用設定，不然不會有改變。