嗯，這裡記載了我最近學習的一些UGUI的知識，以後可能還會有擴充套件的，這算01吧

UGUI學習和分析

嗯，又到了更新部落格的時間，今天我將在這篇文件裡記載UGUI的部分基礎操作，未來的話可能會有更多的擴充，還是這句話，一起學習，一起成長

1.什麼是GUI

GUI也叫graphical user interface，即是使用者與遊戲進行互動的一個圖形視窗，包括揹包系統，任務列表，選單欄，控制移動的虛擬杆和控制按鈕，開始選單等等，我們都叫它GUI

2.Image的四種屬性

我們在UI設計種常用到Image，而它的四種屬性分別對應著不同的作用

1.simple 嗯，這種屬性就是圖片原本的樣子.

2.Sliced屬性假設我們想要將一個圖片放大，這時候它的邊框又不想放大，以免發生圖片模糊的情況，這時候我們就可以設定sliced屬性，通過sprite editor進行切割，這樣就可以自己設定縮放的位置了

3.tiled

這個屬性的作用是讓圖片平鋪整個Image

4.filled

這個屬性就是表示圖片顯示的方式了，修改fill amount，改變所佔面積

3.如何製作技能的冷卻效果

建立一個這樣的遊戲圖示，新增陰影在上面，給它一個button元件並且關聯到我們下面的指令碼，然後根據指令碼操作即可完成冷卻效果

4.

5.publicclassSkillTime : MonoBehaviour

{

6.publicfloat skillTime = 2;//技能時間

7.privateImage filled;//獲取陰影圖片

8.publicfloat timer = 0; //控制冷卻時間

9.privatebool isTouch = false;//判斷是否按下

10.

11.// Use this for initialization

12.void Start () {

13.filled = GameObject.Find("Filled").GetComponent<Image>();

14.

15.}

16.

17.// Update is called once per frame

18.void Update () {

19.if (isTouch == true)

20.{

21.timer += Time.deltaTime;

22.filled.fillAmount = (skillTime -timer) / skillTime;

23.if (timer >= skillTime)

24.{

25.timer = 0;

26.isTouch = false;

27.}

28.

29.

30.}

31.

32.

33.

34.}

35.publicvoid OnClick()

36.{

37.

38.isTouch = true;

39.

40.}

41.}

如果想要改變遊戲物體大小但是卻不想改動內部大小，可以在它上面建立一個空物體用來包裹，這樣每次改變的就會是空物體的大小了

這裡製作的是一個滑動框選擇關卡的案例，這裡記一下步驟

1.

我們呼叫素材建立一個圓，然後給它新增上Toggle屬性，把葉子賦值給Grafic屬性，這樣我們就可以點選它來勾選葉子了，然後我們將葉子複製三個一次排版，放在一個空物體下，我們叫它ToggleGroup，全選三個Toggle放在一組，這樣就可以實現單選的功能了

2.然後我們要將頁面的跳轉和這些單選按鈕繫結起來，這裡我們需要一個指令碼

這裡講一下指令碼思路

（1）我們需要繼承兩個介面IBeginDragHandler,IEndDragHandler

這兩個介面的作用就是控制頁面的拖拽，它們會在執行時候自動實現

（2）我們通過scrollRect.horizontalNormalizedPosition;來獲得滑鼠拖拽到的位置，建立一個數組儲存三個頁面應該在的位置，這裡我們獲得的是一個0-1的浮點值來儲存位置，通過計算絕對值的差值，通過比較差值來絕對我們將座標設定到什麼位置，在update方法裡控制頁面跳轉到的位置

（3）然後我們定義四個bool型別的方法，，通過檢測點選來決定跳轉到哪個位置陣列，再定義一個按鈕陣列，儲存哪個按鈕被點選，然後當滑鼠拖拽到相應位置時，按鈕陣列也會選擇相應的按鈕，通過對IsOn屬性的設定就可達到這種效果，當然我們定義的按鈕陣列需要再unity裡進行賦值

（4）至此，我們就可以實現滑鼠點選頁面的切換了

using System;

using System.Collections;

usingSystem.Collections.Generic;

using UnityEngine;

usingUnityEngine.EventSystems;

using UnityEngine.UI;

publicclassScrollpanelbutton : MonoBehaviour,IBeginDragHandler,IEndDragHandler {

//這裡是獲得scrollRect這個元件

privateScrollRect scrollRect;

//這裡三個值分別儲存三個頁面的位置

privatefloat[] ArrayList =newfloat[] { 0, 0.5f,1 };

privatefloat targetHorizontalPosition=0;

publicfloat speed = 10;

privatebool isDraging = false;

//定義一個數組儲存點選按鈕

publicToggle[] MovepageArray;

// Use this for initialization

void Start () {

scrollRect = GetComponent<ScrollRect>();

}

// Update is called once per frame

void Update () {

if(isDraging==false)

scrollRect.horizontalNormalizedPosition= Mathf.Lerp(scrollRect.horizontalNormalizedPosition,targetHorizontalPosition, Time.deltaTime * speed);

}

publicvoid OnBeginDrag(PointerEventData eventData)

{

isDraging = true;

}

publicvoid OnEndDrag(PointerEventData eventData)

{

isDraging = false;

float PosX = scrollRect.horizontalNormalizedPosition;//這個可以獲得到滑鼠當前拖拽到水平的什麼位置，用0到1的浮點數進行量化

int index = 0;

float offset = Mathf.Abs(PosX-ArrayList[index]);//這裡計算的是當前位置和我們定義位置的差值

for (int i = 1; i <ArrayList.Length; i++)

{

floatoffsetNew = Mathf.Abs(PosX -ArrayList[i]);//這裡判斷目前位置與定義頁首距離誰跟近，然後定義座標到更近的位置

if (offsetNew < offset)

{

index = i;

offset = offsetNew;

}

}

targetHorizontalPosition =ArrayList[index];

MovepageArray[index].isOn = true;

//scrollRect.horizontalNormalizedPosition =ArrayList[index];

}

publicvoid OnMovePage1(bool isOn)

{

if(isOn)

targetHorizontalPosition =ArrayList[0];

}

publicvoid OnMovePage2(bool isOn)

{

if (isOn)

targetHorizontalPosition =ArrayList[1];

}

publicvoid OnMovePage3(bool isOn)

{

if (isOn)

targetHorizontalPosition =ArrayList[2];

}

1.}

關於UI控制元件中的toggle和slider

Slider通常用來設計滾動條

這裡設定的分別是背景，填充顏色和拖動的按鈕，再在這裡獲取0到1的值來程式碼控制滾動條

Toggle通常用來做單選框

我們通過給這些按鈕新增一個toggle元件，全選給一個toggleGroup,再分別設定graphic就可以來控制單選了

當然我們也可以對Toggle進行擴充套件，來增加自己想要的功能

這裡我們想要通過點選實現切換，但是一般的toggle無法實現我們想要的效果，這時候該怎麼做呢？這裡我們可以新增一個MyToggle的指令碼來對該元件進行擴充套件，實現這樣的功能

1.我們知道toggle控制元件傳遞的是bool型別的值

2.我們建立如下指令碼，邏輯如下

1.我們獲取到兩個遊戲物體和toggle元件

2.我們寫一個isOnValueChange的方法，通過setActive傳遞bool值，來實現元件的隱藏和顯示

3.在start方法裡進行傳參和呼叫，這裡我們初始化toggle元件，然後每次點選時就會向toggle元件傳遞isON的屬性，這樣便可以實現On和Off的切換了，

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; public class MyToggle : MonoBehaviour {
    //獲取toggle元件和兩個遊戲物體
    public GameObject isSwitchOn;
    public GameObject isSwitchOff;
    private Toggle toggle;
 // Use this for initialization
 void Start () {
        toggle = GetComponent<Toggle>();
        isOnValueChange(toggle.isOn);
 }
 
 // Update is called once per frame
 void Update () {
  
 }
    public void isOnValueChange(bool isOn)
    {
        //這裡控制組件的顯示和隱藏
        isSwitchOn.SetActive(isOn);
        isSwitchOff.SetActive(!isOn);
    }
1. }