關於Unity中UI中的Image節點以及它的Image組件

 

一、圖片的Inspector面板屬性

Texture Type：一般是選擇sprite(2D and UI)

Sprite Mode：一般是選擇Single

Packing Tag：打包的標志值，最后打包的時候會把Tag相同的所有小圖打包成一個大圖。不像cocos打包圖集需要用到第三方軟件，這里Unity會幫我們把相同Tag的圖片打包成大圖，非常方便。

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

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

Sprite Editor按鈕，在Pivot右下角，很容易被忽視，點開會有一個面板跳出來，這里是設置圖片的九宮格縮放區域，就是指定哪些部位要縮放，自己用線拉出一個井字區域。

Filter Mode：縮放模式，用默認的就好

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

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

　　　　　　(3)Trilinear：

注意：圖片修改后一定要記得點擊Apply按鈕，應用設置，不然不會有改變。

 

二、Image節點的Image組件

1.把圖片設置好后拖進Image節點的Source Image屬性中，點擊Set Native Size按照圖片的原始大小填充Canvas。

2.Color屬性可以對圖片進行顏色混合，白色就是什么色也不加，原色。

3.Image Type：simple縮放的類型是拉伸

　　　　　　　　Tiled縮放的類型是平鋪，像鋪地板瓷磚一樣的。

　　　　　　　　Slice縮放的類型是九宮格縮放，就像微信聊天的氣泡一樣，只有部分拉伸。原理就是把圖片分成九宮格那樣的區域，四個邊角不變，只改變中間的區域，中間的橫和中間的豎。

　　　　　　　　　　 這樣縮放之后，再把四個邊角貼上去，整體形狀就不會改變。

　　　　　　　　Filed指定區域顯示，垂直，水平，圓周。比如一個圓，可以指定它只顯示一個半圓，或者四分之一圓顯示。經常用於游戲中的圓形進度條顯示。

　　　　　　　　　　Filed Method：(1)Radial 90 (2)Radial 180 (3)Radial 360按照角度來裁剪，一般是按照360度裁剪的。 (4)Vertical垂直裁剪 (5)Horizontal水平裁剪

　　　　　　　　　　Filed Origin：開始的點，Button就是中間底部的那個點開始，不斷變換圓心角來裁剪圓。　　　　　　　　　　　　

　　　　　　　　　　Filed Amount：表示裁剪的比例多少[0,1]，0到1進度條是遞增的，1到0進度條是遞減的。

　　　　　　　　　　Clock Wise：逆時針還是順時針，勾選的時候是順時針

 

三、九宮格縮放步驟

a.把要九宮格縮放的圖片點擊Sprite Editor按鈕選擇縮放區域，點擊Apply

b.把設置好的圖片拉到Image節點的Image組件的Sprite屬性里

c.選擇Image Type為Slice

d.改變Image節點的Width和Height大小，進行縮放，發現圖片中間部分縮放，沒有指定的邊角區域不縮放

 

四、Filed縮放步驟

a.把設置好的圖片拉到Image節點的Image組件的Sprite屬性里

b.選擇Image Type為Filed，這時候會多出幾個屬性進行選擇

c.配置好新屬性，並拖動Filed Amount來看效果

d.寫一個腳本掛在Image節點(具體節點名字是clock_bar)上來實現圓形進度條的效果，這個效果可以用於技能冷卻時間顯示。

using UnityEngine;
using System.Collections;
using UnityEngine.UI;
public class clock_bar : MonoBehaviour {
    Image img;
 
    float total_time;
    float now_time;

    bool is_running = false;
    // Use this for initialization
    // 要把組件的屬性綁定到編輯器，我們需要在組件類里面加上public，默認是關閉的，打鈎是啟動的意思
    public bool play_onload = false;
    
    void Start () {
        this.img = this.GetComponent<Image>();
        if (this.play_onload) {
            this.show_time_action(15.0f);
        }
    }
    
    // 15秒時間就到了
    public void show_time_action(float total_time) {
        this.img.fillAmount = 1.0f; // 當前的時間是滿的
        this.total_time = total_time;
        this.now_time = 0;

        this.is_running = true; // 開啟倒計時的動畫
    }
    // Update is called once per frame
    void Update () {
        if (!this.is_running) { // 沒有開啟這個倒計時的動畫
            return;
        }

        this.now_time += Time.deltaTime; // 走過的時間
        float per = this.now_time / this.total_time; // 過去時間的百分比
        if (per > 1.0f) {
            per = 1.0f;
        }
        // 我們計算的是剩余時間的百分比
        per = 1.0f - per;

        this.img.fillAmount = per;
        if (this.now_time >= this.total_time) {
            this.is_running = false;
        }
    }
}

 

五、小技巧：

當我們想使用Image組件類定義組件實例的時候，卻發現編輯器提示沒有這個方法

找到Image組件在Inspector面板中的位置，點擊右上角有一個問號標志，打開就會顯示API，可以知道Image原來是屬於UI包的，沒有導入包，所以提示類不存在

using UnityEngine.UI;