嗯，这里记载了我最近学习的一些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. public class SkillTime : MonoBehaviour {
6. public float skillTime = 2;//技能时间
7. private Image filled; //获取阴影图片
8. public float timer = 0; //控制冷却时间
9. private bool 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. public void 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;
public class Scrollpanelbutton : MonoBehaviour,IBeginDragHandler,IEndDragHandler {
//这里是获得scrollRect这个组件
private ScrollRect scrollRect;
//这里三个值分别保存三个页面的位置
private float[] ArrayList =new float[] { 0, 0.5f,1 };
private float targetHorizontalPosition=0;
public float speed = 10;
private bool isDraging = false;
//定义一个数组保存点击按钮
public Toggle[] 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);
}
public void OnBeginDrag(PointerEventData eventData)
{
isDraging = true;
}
public void 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++)
{
float offsetNew = Mathf.Abs(PosX -ArrayList[i]);//这里判断目前位置与定义页首距离谁跟近，然后定义坐标到更近的位置
if (offsetNew < offset)
{
index = i;
offset = offsetNew;
}
}
targetHorizontalPosition =ArrayList[index];
MovepageArray[index].isOn = true;
//scrollRect.horizontalNormalizedPosition =ArrayList[index];
}
public void OnMovePage1(bool isOn)
{
if(isOn)
targetHorizontalPosition =ArrayList[0];
}
public void OnMovePage2(bool isOn)
{
if (isOn)
targetHorizontalPosition =ArrayList[1];
}
public void 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.Generic;
using UnityEngine;
using UnityEngine.UI;
//获取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. }