Unity3D学习笔记（二十二）：ScrollView和事件接口

昨天问题

InputField光标被遮挡问题：背景图片输入层级高于光标的层级，把光标弄成子物体，子物体层级高

自制的滑动框，选项怎么对齐，把Template的Pivot.y改为1

分辨率的区别：16:9和1920x1080

16:9，屏幕像素按比例缩放，文本会变模糊

1920x1080，屏幕像素是固定的

Canvas Group：控制一组UI的某些属性（所有子物体的UI组件的属性）

Alpha：改变所有子物体的透明通道，0不显示，1显示

Interactable：改变所有子物体的交互状态，可交互，不可交互

Blocks Raycasts：改变所有子物体的射线检测，接受射线检测，不接受射线检测

Ignore Parent Group：是否忽略父物体的Canvas Group的影响

登录界面的淡入淡出效果

Panel组件（少用）

作用：背景图或父物体

 

ScrollView组件（拖动框）

Content：可拖动的物体，改变image的父物体Content的坐标

Horizontal、Vertical：是否可以水平、垂直拖动

Movement Type：移动类型

----Elastic：回弹原位，会自动回到对齐的位置

--------Elasticity回弹系数，值越大回弹越慢

----Unrestricted：自由拖动，无限制，拖到哪就是哪

----Clamped：有限制的，拖动物体的拖动框最多能跟视窗对齐，父物体边缘限制在视窗边缘

Inertia：惯性

----Deceleration Rate：惯性的衰减系数，0相当于没有惯性，1

Scroll Sensitivity：鼠标滚轮的滚动系数

Viewport：视窗，如果未指定，则视窗默认为ScrollRect的范围

Horizontal ScrollBar：水平滚动条

----Visibility：显示方式

--------Permanent：永久显示

--------Auto Hide：自动隐藏

--------Auto Hide And Expand Viewport：自动隐藏并且扩展视窗

Vertical ScrollBar：垂直滚动条

Mask遮罩：图片圆形显示

遮罩依赖于Image图片形状，必须与Image一起使用，否则无效

Show Mask Graphic：是否显示遮罩的图片

Viewport里的遮罩

自制拖动框

综合练习-拖动框

Hrizontal Layout Group：水平自动布局组件（对自己的子物体）

Padding：距离四个边缘的间距，距离四个变量的距离

Spacing：各个元素之间的间距

Child Alignment：子物体的对齐方式

Child Control Size：

----Width：是否强行扩大子物体的宽度，来填补额外的可用空间

----Height：是否强行扩大子物体的高度，来填补额外的可用空间

----勾选后，子物体的宽高会变成不可编辑

Child Force Expand：是否强行扩大物体间的横向间隔，来填补额外的可用空间

Movement Type - Clamped：

需要在Content的长度比Viewport大的情况下才可以拖动

可以使用自动扩容组件，给Content动态添加长度

Content Size Fitter（自动扩容组件）

Horizontal Fit：水平自动扩容

----Unconstralned：不需要自动扩容

----Min Size：最小值

----Preferred Size：最合适的值（常用）

一般情况下，需要和自动布局组件或Text组件一起使用

自动扩容后，宽高变为不可修改

名称显示

代码操作

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;
public class SelectUI : MonoBehaviour {
    public Text nameText;
    public string playerName;
    private Toggle toggle;
    // Use this for initialization
    void Start () {
        toggle = GetComponent<Toggle>();
        toggle.onValueChanged.AddListener(OnValueChanged);
    }

       // Update is called once per frame
       void Update () {

       }
    void OnValueChanged(bool isOn)
    {
        Debug.Log("OnValueChanged");
        nameText.text = isOn ? playerName : "";
    }
}

UGUI事件接口

命名空间：using UnityEngine.EventSystems;

继承了UGUI事件接口的类，挂载物体上，只要子物体或自己本身能接受射线检测，接口就是可以执行的。

接口简介：指针点击接口

IPointerClickHandler：当鼠标指针点击，执行接口里的方法（在图片内点击，在图片内抬起）

IPointerDownHandler：当鼠标指针按下

IPointerUpHandler：当鼠标指针抬起，执行接口里的方法（在图片内点击，在图片内外抬起）

IPointerEnterHandler：当鼠标指针进入

IPointerExitHandler：当鼠标指针离开

右键点击按钮

代码操作

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class RightButton : MonoBehaviour,
    IPointerEnterHandler,
    IPointerExitHandler,
    IPointerDownHandler,
    IPointerUpHandler,
    IPointerClickHandler
{
    public Graphic graphic;//改变颜色的图像
    public Color normalColor = Color.white;
    public Color enterColor = Color.white;//当鼠标进入时按钮的颜色
    public Color pressColor = Color.white;//当鼠标按下时按钮的颜色
    //onClick存储所有的在点击的时候执行的方法
    public RightButtonEvent onClick = new RightButtonEvent();
    private bool isExit = true;//鼠标是否离开图片区域
    private void Awake()
    {
        if (graphic == null)
        {
            graphic = GetComponent<Graphic>();
        }
    }
    public void OnPointerEnter(PointerEventData eventData)
    {
        //当鼠标进入时改变颜色
        graphic.color = enterColor;
        isExit = false;
    }
    public void OnPointerExit(PointerEventData eventData)
    {
        graphic.color = normalColor;
        isExit = true;
    }
    public void OnPointerDown(PointerEventData eventData)
    {
        //只有按下鼠标右键才有效果
        if (eventData.button == PointerEventData.InputButton.Right)
        {
            graphic.color = pressColor;
        }
    }
    public void OnPointerUp(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Right)
        {
            //判断鼠标是否在图片内部
            if (isExit)
            {
                graphic.color = normalColor;
            }
            else
            {
                graphic.color = enterColor;
            }
        }
    }
    public void OnPointerClick(PointerEventData eventData)
    {
        if (eventData.button == PointerEventData.InputButton.Right)
        {
            onClick.Invoke();
        }
    }
    [System.Serializable]//这个类是可序列化的
    public class RightButtonEvent : UnityEvent
    {
    }
}

隐式实现

显示实现，两个接口有同名方法时使用

默认不区分鼠标左键右键和中键，可通过枚举类型，判断鼠标按键

给事件添加方法

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class RightButtonTest : MonoBehaviour
{
    private RightButton rightButton;
       // Use this for initialization
       void Start () {
        rightButton = GetComponent<RightButton>();
        rightButton.onClick.AddListener(Click);
    }

       // Update is called once per frame
       void Update () {

       }
    public void Click()
    {
        Debug.Log("点击了右键按钮");
    }
}

鼠标点击，跟随移动

PointerEventData类

button：鼠标按键的枚举

position：当前鼠标在屏幕中的位置

pressPosition：按下时鼠标在屏幕中的位置

enterEventCamra：当进入时的事件相机（在overlay 模式下为null）

pressEventCamra：当按下时的事件相机（在overlay 模式下为null）

代码操作

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.Events;
using UnityEngine.EventSystems;
using UnityEngine.UI;
public class ClickButton : MonoBehaviour, IPointerClickHandler {
    public GameObject image;
    public void OnPointerClick(PointerEventData eventData)
    {
        //转换坐标的API
        //转换出来的是局部坐标，localPosition
        //第一个参数：想要以哪个坐标系为参考（一般情况下都是父物体坐标系）
        //第二个参数：屏幕坐标（鼠标所在的屏幕坐标）
        //第三个参数：相机
        //第四个参数：转换成功之后的局部坐标
        //返回值
        Vector2 outPos;
        bool isSuccess = RectTransformUtility.ScreenPointToLocalPointInRectangle(
            image.transform.parent as RectTransform,
            eventData.position,
            Camera.main,//eventData.pressEventCamera,
            out outPos
            );
        if (isSuccess)
        {
            image.transform.localPosition = outPos;
        }
    }
    // Use this for initialization
    void Start () {

       }

       // Update is called once per frame
       void Update () {

       }
}

Overlay模式 ，代码可以填写null

Camera模式，可以填渲染摄像机

使用锚点坐标来移动的问题

将锚点设置在画布的左下角(0,0)，通过用锚点坐标改变图片位置

但当锚点不在中心点时，屏幕分辨率变化，画布变化，锚点也会改变

小地图

添加Render Texture

画布设置

相机设置

标签设置

相机遮罩设置

角色展示

摄像机设置纯色，剔除背景

角色旋转代码逻辑

using System;
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.EventSystems;
public class LeonaRotate : MonoBehaviour, IPointerEnterHandler, IPointerExitHandler
{
    public GameObject obj;
    bool isInImage = false;
    public void OnPointerEnter(PointerEventData eventData)
    {
        isInImage = true;
    }
    public void OnPointerExit(PointerEventData eventData)
    {
        isInImage = false;
    }
    // Update is called once per frame
    void Update()
    {
        if (isInImage && Input.GetMouseButton())
        {
            float offsetX = Input.GetAxis("Mouse X");
            obj.transform.rotation *= Quaternion.Euler(, -offsetX * 60f, );
        }
        else
        {
            obj.transform.rotation = Quaternion.Slerp(obj.transform.rotation, Quaternion.Euler(, , ), 0.1f);
        }
    }
}