Unity—UGUI

Canvas

Canvas 组件可以控制如何渲染属于该 Canvas 的 UI 元素。此渲染主要由 Render Mode 设置进行控制。
渲染具有三种可能的模式：

• Screen Space - Overlay，在这种模式下，画布将填充屏幕，画布的所有 UI
  元素都会渲染在其他所有元素之上,画布填满整个屏幕，UI元素在场景中渲染在其他物体的前方，如果调整屏幕大小或者改变分辨率，画布将会自动改变大小以适应屏幕显示。
• Screen Space - Camera，在这种模式下，画布将填充屏幕，但会渲染到特定摄像机，并受到与摄像机的距离的影响,画布以指定的距离放置在指定的相机前，UI元素被指定的相机渲染，相机设置会影响到UI的呈现
• World Space，在这种模式下，UI 存在于场景中，并渲染到其他对象的前面或后面（例如，3D
  世界中角色上方的名称标签）,使画布渲染在世界空间，该模式使画布在场景中像其他游戏对象一样，可以通过手动调整它的Rect
  Transform来改变画布的大小，GUI控件可能会渲染于其它物体的前方或后方 Canvas Scaler
  这个脚本用于当它们被显示在不同的屏幕尺寸控制UI元素的相对尺寸的一个简单的方法。
• Graphic Raycaster. 这被用来检测UI事件，如点击。它将确定哪个UI元素被点击和事件发送到该元件，以便适当的组件可以反应。
  选择Camera模式的时候，一般会使用额外的摄像机组为UI摄像机，设置Depth大于主摄像机，渲染层只渲染UI，以及 flags 设置为 Depth only,不渲染空白部分

Text

将想要着重标记的字放在语法中，就可以显示额外的效果

Slider

Background: 后置背景
Fill: 前置背景
Handle Slide: 手柄滑动控制前置背景覆盖后置背景

Interactable ： 选中此项则用户不可以点击，不可以随机修改数值

• Unity 中图片的类型 Image type
  
  Simple ：没有特殊效果，就是图片原本的样式
  Sliced：可以通过设置图片的边界，让边界内的图像可以进行拉伸，但是边界外的图像不影响，在Sprite Editor中设置边界
  Tiled ：平铺，将图片拉伸后，图片的样式不改变，但是图像会增多
  Filed：可以使用滑块的效果，比如血槽，蓝条，技能冷却时
  
  
  
  
  Shaow Script ：给UI元素加上阴影的效果，一般用于字体
  Outline Script：给UI元素加上边框的效果，一般用于字体

Toggle

添加此项，可以使被选择的UI元素消失或者出现，进行一张图片的切换
Toggle Groups ：通过一个对象控制所有Toggle，可以实现页面的切换等

Grid layout Group:Unity内置组件，可以自动排列子对象，可用于设置道具栏
需要注意的是，Grid layout Group 组件只会排列它的直属子对象，位于直属子对象的子对象则不会进行排列
同理还有Vertical layout Group .Horizontal layout Group

所以应该在Grid对象的下面创建一个用于排列的空对象，再在空对象里面创建实际的道具栏
为了实现关卡选择界面滚动的效果，添加一个空的Image对象，附加 Scroll Rect 组件

滚动的同时不希望关卡选择的图片溢出到界面外，加上一个 Mask 组件，可以控制一个区域，使溢出区域的图片消失

注意，Mask 组件需要与 Image 组件一起使用

• 用代码控制图片滚动

public class ScrollPanel : MonoBehaviour,IBeginDragHandler,IEndDragHandler
{
    private float m_ScrollInit = 0.33f;
    private ScrollRect m_ScrollRect;
    private float[] m_Position =new float[4];
    private float m_TargetPosition;
    private bool m_IsDragging = false;
    void Start()
    {
        m_ScrollRect = GetComponent<ScrollRect>();

        InitPosition();
    }

    void Update()
    {
        //if (m_IsDragging)
        //{
        m_ScrollRect.horizontalNormalizedPosition = Mathf.Lerp(m_ScrollRect.horizontalNormalizedPosition, m_TargetPosition, 4f*Time.deltaTime);
        //}

    }
    public void OnBeginDrag(PointerEventData eventData)
    {
        m_IsDragging = true;
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        //float temp = m_ScrollRect.horizontalNormalizedPosition; //获取 ScrollRect 的水平坐标
        //Debug.Log(temp); //  0.33
        float m_EndDrag = m_ScrollRect.horizontalNormalizedPosition; // 取得结束Drag后的水平坐标
        int index = 0;
        float offset = Mathf.Abs(m_Position[0] - m_EndDrag);
        for(int i= 0; i < m_Position.Length; i++)
        {
            float tempOffset = Mathf.Abs(m_Position[i] - m_EndDrag);
            if(tempOffset < offset)
            {
                index = i;
                offset = tempOffset;
            }
            
        }
        m_TargetPosition = m_Position[index];
        m_IsDragging = false;
    }
    private void InitPosition()
    {
        m_Position[0] = 0;
        for (int i = 1; i < m_Position.Length; i++)
        {
            m_Position[i] = m_Position[i - 1] + m_ScrollInit;
        }
    }
}

InputField

有三个组件，InputField 控制子对象的开关
PlaceHolder控制当用户没有输入任何东西时，显示的文本，当用户开始输入之后，PlaceHolder关闭
Text控制用户输入的字体

Content Type ，对用户的输入进行限制，验证用户的输入是否正确（正则表达式）

button

Transtion ：控制按钮被点击或者被选中时的类型，可以设置为颜色，图片等
HighLighted Sprite : 按钮被选中时的图片
Pressed Sprite ：按钮被点击时的图片
Selected Sprite：按钮被点击后的图片

实现界面渐入渐出

        Component[] comps = GameObject.Find("Canvas").GetComponentsInChildren<Component>();
        foreach (Component c in comps)
        {
            if (c is Graphic)
            {
                (c as Graphic).CrossFadeAlpha(0, 1, true);
            }

        }

实现图片闪烁

    private Image m_Image;
    private float m_Alpha = 1f; //图片的Alpha值
    private void Start()
    {
        m_Image = GetComponent<Image>();
    }
    void Update()
    {
        m_Alpha = Mathf.PingPong(Time.time, 1);
        m_Image.color = new Color(m_Image.color.r, m_Image.color.g, m_Image.color.b, m_Alpha);
    }

Mathf.PingPong(float t,float length) :循环值t，使输出不会大于length，也不会小于0。返回值将在0和length之间来回移动,一般使用 Time.time
Mathf.Repeat(float t,float length);循环值t，使输出不会大于等于length，也不会小于0。返回值会从 0 > length-1 ,0 > length-1 ,一直重复

Event

• 1.在编辑器中直接绑定
  优点：方便快捷 缺点：无法得知是哪个对象调用的此方法

• 2.AddListener
  通过代码添加，可以获得调用的对象引用（推荐使用）

        Button btn = transform.Find("Button").GetComponent<Button>();
        btn.onClick.AddListener(Fun1);
        InputField ifd = transform.Find("InputField").GetComponent<InputField>();
        ifd.onEndEdit.AddListener(Fun2);

建立在点选的基础之上，1.选中了某个物体，滑动鼠标滚轮，就执行
2.选中了物体，移动，会执行，上下左右…
3.选中UI，敲回车，执行



InputField 那种选中才是选中，按钮之类的那种是点击

    public void OnDrag(PointerEventData eventData)
    {
        //PointerEventData 与指针（鼠标/触摸）事件关联的事件信息
        //eventData.position 是 屏幕坐标，仅仅适用于 overlay 模式
        transform.position = eventData.position;
        //通用方式，将屏幕坐标转换为世界坐标
        transform.position = GetWorldPosition(eventData);
    }
    public class DragDemo : MonoBehaviour,IBeginDragHandler,IDragHandler
{
    private Vector3 offset; //偏移量
    private Vector3 worldPoint;//世界坐标
    public void OnBeginDrag(PointerEventData eventData)
    {
        worldPoint = GetWorldPosition(eventData);
        offset = transform.position - worldPoint; //获得偏移量
    }

    public void OnDrag(PointerEventData eventData)
    {
        worldPoint = GetWorldPosition(eventData);
        //根据偏移量移动当前UI
        transform.position = worldPoint + offset;
    }

    private Vector3 GetWorldPosition(PointerEventData eventData)
    {
        RectTransform parent = transform.parent as RectTransform;
        Vector3 worldPos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(parent, eventData.position, eventData.pressEventCamera, out worldPos);
        return worldPos;
    }

}