筆記19 UGUI

Canvas

添加、渲染組件、接收射線組件

縮放組件（懶人必會法、完美自適應：錨點、UI中心）

Text（富文本、描邊、陰影）

Image

圖片形式、圖片展開方式（可做進度條、血條）

血條的製作

立即減血

using UnityEngine.UI;

//UI相關的，都要先寫好名稱空間using UnityEngine.UI;
public class HPBar : MonoBehaviour {
    //給區間。使得unity裏面由原本的天數值，變成了滑塊
    [Range(0,1)]
    //讓外界設置一個血量的百分比
    public float HpValue = 1;
    //拿到修改的Image。FillImage填充的Image。
    public Image FillImage;
    //寫完後，在unity裏，把填充的Image拖到右側C#組件裏

    void Start () {
		
	}
	
	void Update () {
        //正常等於HpValue。此處由於是不規則血槽，0.75即爲滿血。
        //HpValue表示從0到1，所以此處還需要 * 0.75f
        FillImage.fillAmount = HpValue * 0.75f;
	}
	
    //給外界一個刷新血量的方法。最小血量、最大血量
    public void RefreshHp(float minHp, float maxHp)
    {
        //顯示的百分比 = 最小血量 /最大血量
        HpValue = minHp / maxHp;
    }
} 

滑動減血

using UnityEngine.UI;

//UI相關的，都要先寫好名稱空間using UnityEngine.UI;
public class HPBar : MonoBehaviour {
    //給區間。使得unity裏面由原本的天數值，變成了滑塊
    [Range(0,1)]
    //讓外界設置一個血量的百分比
    public float HpValue = 1;
    //拿到修改的Image。FillImage填充的Image。
    public Image FillImage;
    //寫完後，在unity裏，把填充的Image拖到右側C#組件裏

    //做滑動減血。
    //生成一個值
    public float value;

    void Start () {
        //首先它倆值一樣（第一時間是滿血的），這樣就不會做差值
        value = HpValue;
	}
	
	// Update is called once per frame
	void Update () {
        /*Value的值，利用插值來計算。(現在的值value,應該達到的值HpValue，
        時間1 * Time.deltaTime即血條移動速度)*/
        value = Mathf.Lerp(value, HpValue, 1 * Time.deltaTime);

        //正常等於HpValue。此處由於是不規則血槽，0.75即爲滿血。
        //HpValue表示從0到1，所以此處還需要 * 0.75f
        //此處，用Value替換HpValue
        FillImage.fillAmount = Value * 0.75f;
	}

    //給外界一個刷新血量的方法。最小血量、最大血量
    public void RefreshHp(float minHp, float maxHp)
    {
        //顯示的百分比 = 最小血量 /最大血量
        HpValue = minHp / maxHp;
    }
}

Raw Image（普通紋理、偏移與壓縮）

button

顏色、精靈切換，按鈕事件，製作技能按鈕

製作技能按鈕的代碼

 using UnityEngine.UI;

public class ButtonTest : MonoBehaviour {
    //給外界開放一個窗口，CD需要多長時間
    public float CD = 2f;
    //添加名稱空間後，拿到上面填充是圖片
    private Image FillImage;
    //計時器。到達CD的時間就可以從頭來了
    private float timer = 0;

    void Start () {
        //在這裏拿到它的子物體的組件
        FillImage = transform.GetChild(0).GetComponent<Image>();
        //爲了不用在unity裏做關聯，拖上腳本就可以使用。那麼就要動態給按鈕添加事件
        //首先得到這個按鈕組件，之後得到onClick，接着加一個監聽（監聽方法的名稱）
        GetComponent<Button>().onClick.AddListener(buttonClick);
	}
	
	void Update () {
		if (timer >= 0)
        {
            //圖片轉動的百分比等於它自身減去每一幀它會走的百分比
            //此處減上2秒纔會結束
            FillImage.fillAmount -= 1/CD * Time.deltaTime;
        }
	}

    //需要一個button事件。就是當點了這個按鈕之後，就會調這個事件
    void buttonClick()
    {
        //全黑
        FillImage.fillAmount = 1;
        //timer等於2
        timer = CD;
    }
}

控件之間的導航

Toggle

    public void ToggleChanged(bool b)
    {
        Debug.Log(b);
    }
    //寫完，到unity裏面關聯

Slider滑動條、進度條

Scrollbar滑動條

Dropdown下拉框(修改模板）

InputField輸入框

Panel(其實就是一個半透明的灰色的Image)

Scroll View滑動視圖

圖集

事件

這些控件的所有事件，都是通過unity封裝好的幾個接口來實現的。
例如：幫Image實現點擊的接口，那麼它也會變成button。

先寫明名稱空間，這個名稱空間下面有很多事件

 using UnityEngine.EventSystems;

鼠標接口（5個）：鼠標移進來，鼠標移出去。點擊鼠標，鬆開鼠標。點擊。

public class EventTest : MonoBehaviour, IPointerEnterHandler,
IPointerExitHandler, IPointerDownHandler,IPointerUpHandler,IPointerClickHandler,
{
    public void OnPointerClick(PointerEventData eventData)
    {
        Debug.Log("Click");
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        Debug.Log("Down");
    }

    public void OnPointerEnter(PointerEventData eventData)
    {
        Debug.Log("Enter");
    }

    public void OnPointerExit(PointerEventData eventData)
    {
        Debug.Log("Exit");
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        Debug.Log("Up");
    }
} 

public class EventTest : MonoBehaviour, IBeginDragHandler,
IDragHandler,IEndDragHandler   
{
    public void OnBeginDrag(PointerEventData eventData)
    {
        Debug.Log("beginDrag");
    }

    public void OnDrag(PointerEventData eventData)
    {
        Debug.Log("drag");
        //跟隨鼠標移動
        transform.position = Input.mousePosition;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        Debug.Log("endDrag");
    }   
}