【Unity3D_UGUI速成班】——02. Image

這一節將主要講述Image的各項用法。Image控件專門呈現UI層級上的圖片顯示，通常可作為界面的配圖、漸進顯示的提示框和進度條、血條等。

--------------------------

2. Image

在Hierarchy下右鍵==>UI，拓展菜單有13個欄目，點選最Image。那么在Hierarchy欄目下會多出攜帶了Image的Canvas控件和EventSystem控件。

此時選中Image控件，在Inspector下查看，項目非常少，這是因為還沒有附上圖片的緣故。所以現在要附上圖片了。Image的圖片來源必須是Sprite（精靈）圖片，這種紋理格式與PNG圖片是契合度最高的，能夠呈現圖片中的透明部分。所以請大家先選中已導入到Assets中的圖片，在Inspector下將圖片的紋理類型轉換成Sprite，之后點擊下方的apply。之后再將其拖入到Image組件的“Source Image”下。

Image組件下除了Source Image外，還有Color、Image Type等屬性：

（1） Color可以抽象理解為對圖片投射燈光的顏色，點開之后可以任意更改。Image組件會將Color的顏色與圖片原先的顏色混合之后再呈現。筆者的圖片源是用PS制作的一個黑白相間的圓環，下面呈現出在白光（默認）、藍光、紅光下的變化，由於黑色不受影響，所以三幅圖中圓環黑色的部分一直不變；

     

（2） Preserve Aspect決定圖片是否采用原先的縱橫比。由於Image控件的寬高可以自由設置，所以很可能與圖片源的原始寬高比並不相同；Preserve Aspect是保證不論Image如何變化，其呈現的圖片寬高比都和原先相同。

（3） ImageType是呈現圖片的類型，共有Simple、Sliced、Tilled和Filled四種選項。

① Tilled選中后，會強制將原圖片以初始大小在Image控件的范圍內平鋪。先前的小圓環在Tilled模式下，令筆者不得不拓展Image的尺寸才能令大家看清效果。

② Filled模式可以理解為“漸進展開”，選中后會彈出一系列新選單。

Filled Method是圖片漸近展開的方式，可選的有垂直方向展開、水平方向展開、90°螺旋展開、180°螺旋展開和360°螺旋展開。

Filled Origin則是圖片展開的起點，螺旋展開式的起點為圖片的上下左右邊界，垂直展開的起點是圖片的頂部或者底部，水平展開的起點是左或者右。

Filled Amount是圖片展開的部分占圖片總面積的百分比，大家可以嘗試自主拖動來觀察變化。

Clockwise是螺旋式展開特有的屬性，方向：順施針（勾選）或者逆時針（反勾選）。

下方gif從左到右依次呈現了水平方向以左為起點、豎直方向以下方為起點、螺旋360°順時針方向以左為起點從零展開的變化。因此用UGUI Image來制作UI層面的進度條和血條都是非常理想的。

③ Sliced模式，可以理解為“保持邊緣”，為了說明這個模式，我們將圖片源換成黑白方框，然后將Image Type調味Sliced模式，會發現下方有一行提示：

翻譯過來是：這幅圖並未創立邊界。

這時候我們需要在ASsets里點中圖片源，在Inspector下點擊Sprite Editor。

打開后，可以看見圖片的邊緣出現了綠色的、可拖動的細線。將這些細線往圖片中部移動，那么4條細線會將圖片分割為9個區域。處於外圍的12346789號區域就是上圖所說的border邊界。在Sliced模式下，圖片的Border的粗細不受圖片縮放的影響。即將圖片橫向拉伸時，1、3、4、6、7、9區域的尺寸不變，而2、8號區域將會橫向拉伸、縱向不變。這對存在邊框的圖片有莫大的作用。好吧，其實這模式用度並不高-.-||。

終於又到了激動人心的代碼環節，老司機開車了！

 

using UnityEngine;
using System.Collections;
using UnityEngine.UI;//凡是對UGUI進行編輯的腳本都需要使用這個命名空間。
public class teachImage : MonoBehaviour {
    //Image是UI命名空間下的類，public后拖進一個已經建好的Image控件即可使用。
    public Image m_image;

    //定義一個計時器
    float timeCounter = 0;
    //設定一個時間總長，此處為3秒
    public float timeAmount = 3;

    // Use this for initialization
    void Start () {
        //設定圖片為filled模式，填充方式為螺旋式，從0開始。
        m_image.type = Image.Type.Filled;
        m_image.fillMethod = Image.FillMethod.Radial360;
        m_image.fillAmount = 0;
    }
    
    // Update is called once per frame
    void Update () {
        //進度條會在5秒內逐漸填滿
        if (timeCounter < timeAmount)
        {
            //計時器會不斷累加當前這一幀的時間
            timeCounter += Time.deltaTime;
            //image圖片會按照前時間/總時間的比例展開
            m_image.fillAmount = timeCounter / timeAmount;
        }
        //當時間超過了總時間，清空畫面，變換圖片的展開方式為水平從左向右再次展開
        else
        {
            m_image.fillMethod = Image.FillMethod.Horizontal;
            // fillOrigin的枚舉中： 0為左邊、1為右邊，具體請按 F12 查看。
            m_image.fillOrigin = 0;
            timeCounter = 0;
        }
    }
}

 

 

運行結果如下：

 

代碼中的要點在於：

 

①  Image對象的fillAmount、fillMethod、fillOrigin甚至ClockWise都是可以用代碼改變的，這給予了圖片顯示的多樣性。

②  結合Time類下的deltaTime，可以制作出結合了時間的進度條。