Unity学习记录UGUI：开始界面

• 准备工作

1. 导入素材
2. 将所有的Sprite的Texture属性设置为Sprite（2D&UI）
3. 创建一个Image设为背景，选择一张图片

• 添加按钮

1. 创建一个Image，添加Button组件（Set Native Size（保持原有大小））
2. Button组件下的Transition可以选择变色模式，Target Graphic可以选择要改变的物体
3. Alt以中心点等比例放大

• Slider的设置

1. Value的值表示进度值
2. Fill Area填充颜色
3. Head Slider Area 圆点图标
4. 创建一个Image做背景在背景Image下创建两个不同颜色的Image，给背景Image添加Slider组件，把要改变的Image赋值给Fill Rect（如果图片改变，设置图片的Image Type属性为Filled）
5. 取消鼠标交互：取消Slider下Interactable选项。（只能通过代码改变Value的值）

• Image的四种属性

1. Simple属性：
2. Sliced属性：九宫贴图，在图片的Sprite Editor中设置图片的九宫格，边框不会改变。
3. Tiled属性：平铺
4.  Filled属性：切割，（技能冷却）Clockwise为逆时针方向

• 设计技能键和冷却效果

1. 创建Image，添加Button组件
2. 复制技能图标设置为Filled模式（可以取消Clockwise变为顺时针方向旋转）
3. 添加Text文本设为技能快捷键，添加Shadow阴影效果Outline边框效果
4. 添加一个脚本，指定Button点击事件

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;

public class SkillButton : MonoBehaviour
{
    public float coldTime = 1;  //冷却时间
    public KeyCode keyCode;
    private float timer = 0;    //计时器
    private Image fieldImage;
    private bool isStartTimer = false;

    private void Start()
    {
        fieldImage = transform.Find("FieldImage").GetComponent();       
    }

    private void Update()
    {
        if (Input.GetKeyDown(keyCode))
        {
            isStartTimer = true;
        }
        if (isStartTimer)
        {
            timer += Time.deltaTime;
            fieldImage.fillAmount = (coldTime - timer) / coldTime;
            //冷却结束
            if (timer>=coldTime)
            {
                fieldImage.fillAmount = 0;
                timer = 0;
                isStartTimer = false;
            }
        }
    }
    public void Onclick()
    {
        isStartTimer = true;
    }
}

• 利用Toggle开发多页背包

1. 创建一个Image1，在Image1下创建Image2
2. 给Image1添加Toggle组件
3. 把Image2赋值给Toggle组件的Graphic（Is On控制Graphic勾选显示，取消隐藏）

• 利用Toggle控制面板的切换

1. 创建3个Image1
2. 在Image1的父物体Image上添加Toggle Group组件
3. 把Image同时赋值给3个Image1下Toggle组件的Group属性
4. 在Image1下创建3个空物体，在空物体上创建Button（用来演示）
5. 把空物体赋值给Image1的点击事件，选择GameObject下的SetActive

• 设计三个Image1面板并控制切换

1. 选择Image1的空物体，点击Component下选择Layout/Gird Layout Group组件（网格排序）
2. 在空物体下创建多个Image图片会实现自动排序
3. Grid Layout Group组件的Cell Size控制图片的大小（只能在这里修改大小）
4. 组件下的Padding设置到边框的距离，Spacing设置每隔格子的间距

• Toggle的扩展（开关）

1. 传建一个Image做背景，添加Toggle组件
2. 在Image下创建两个Image和Text做开关（一个开，一个关）

3. using System.Collections;
   using System.Collections.Generic;
   using UnityEngine;
   using UnityEngine.UI;
   
   public class MyToggle : MonoBehaviour
   {
       public GameObject isOnGb;
       public GameObject isOffGb;
   
       private Toggle toggle;
   
       private void Start()
       {
           toggle = GetComponent();
           OnValueChange(toggle.isOn);
       }
   
       public void OnValueChange(bool isOn)
       {
           isOnGb.SetActive(isOn);
           isOffGb.SetActive(!isOn);
       }
   }
   

    

4. 赋值

• 设计滚动列表Scroll Rect

1. 创建一个Image，添加Scroll Rect组件
2. 把要滚动的物体拖入Content
3. 如果不想显示超出部分添加Mask组件，同时设为Scroll的子物体
4. 如果不想显示背景，取消Show Mash Graphic选项

• 检测Scroll滑动（按页滑动）

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
using UnityEngine.UI;

public class ScrollRectScript : MonoBehaviour ,IBeginDragHandler, IEndDragHandler//继承接口，拖拽开始与结束
{
    private ScrollRect scrollRect;
    private float[] pageArray = new float[] { 0, 0.33333f, 0.66666f, 1 };
    private float targetHorizontalPosition = 0;
    private bool isDranging = false;
    public void OnBeginDrag(PointerEventData eventData)
    {
        isDranging = true;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        isDranging = false;
        //Vector2 v2temp = scrollRect.normalizedPosition; //滑动位置
        float temp = scrollRect.horizontalNormalizedPosition;     //水平滑动
        int index = 0;
        float offset = Mathf.Abs(pageArray[index] - temp);
        for (int i = 1; i < pageArray.Length; i++)
        {
            float offsetTemp = Mathf.Abs(pageArray[i] - temp);
            if (offsetTemp < offset)
            {
                index = i;
                offset = offsetTemp;
            }
        }
        targetHorizontalPosition = pageArray[index];
       // scrollRect.horizontalNormalizedPosition = pageArray[index];       //无缓动效果，直接移动
    }

    void Start () {
        scrollRect = GetComponent();
	}
    private void Update()
    {
        if (isDranging==false)
        {
            scrollRect.horizontalNormalizedPosition = Mathf.Lerp(scrollRect.horizontalNormalizedPosition, targetHorizontalPosition, Time.deltaTime);    //第三个值为速度，实现缓动效果
        }
        
    }
}

• 添加控制页数滑动的单选按钮

1. 创建一个空物体存放按钮
2. 创建两个Image互为父子，为父物体添加Toggle组件，赋值给Graphic（被选中）
3. 创建4个按钮
4. 在4个按钮的父类上添加Toggle Group组件，并赋值

• 在ScrollRectScript脚本中添加四个方法，赋值给四个按钮

 public void One(bool isOn)
    {
        if (isOn)
        {
            targetHorizontalPosition = pageArray[0];
        }
    }

    public void Two(bool isOn)
    {
        if (isOn)
        {
            targetHorizontalPosition = pageArray[1];
        }
    }

    public void Three(bool isOn)
    {
        if (isOn)
        {
            targetHorizontalPosition = pageArray[2];
        }
    }

    public void Four(bool isOn)
    {
        if (isOn)
        {
            targetHorizontalPosition = pageArray[3];
        }
    }

• 通过滑动控制按钮

  *public Toggle[] toggleArray;
  
   public void OnEndDrag(PointerEventData eventData)
      {
          isDranging = false;
          //Vector2 v2temp = scrollRect.normalizedPosition; //滑动位置
          float temp = scrollRect.horizontalNormalizedPosition;     //水平滑动
          int index = 0;
          float offset = Mathf.Abs(pageArray[index] - temp);
          for (int i = 1; i < pageArray.Length; i++)
          {
              float offsetTemp = Mathf.Abs(pageArray[i] - temp);
              if (offsetTemp < offset)
              {
                  index = i;
                  offset = offsetTemp;
              }
          }
          targetHorizontalPosition = pageArray[index];
          *toggleArray[index].isOn = true;
         // scrollRect.horizontalNormalizedPosition = pageArray[index];       //无缓动效果，直接移动
      }

   

1. 给数组赋值（四个按钮）

• 设计输入框

1. 创建一个InputField（Content Type的Password不显示明文）