Unity3DUI实例

图片的拖拽与释放

图标的拖拽
逻辑分析

1. 为了表示可以拖拽的图片，首先定义一个静态的图片DragImage
2. 实际可以拖拽的图片，定义为另一个Image组件icon
3. 当把图片拖拽到目标槽位DropSlot时，改变DropSlot下的DropImage.SourceImage=icon.SourceImage
4. 拖拽是为了让图标跟随鼠标移动，需要实现一些响应鼠标拖拽的Unity

原理
拖

1. 初始化：生成一个icon临时对象，专门来显示要拖拽的图片UI
2. 开始拖：记录鼠标相对于icon的原点(pivot)的偏移
3. 拖动中：设置icon的位置为鼠标光标位置
4. 松开后：icon归位
   放
   通过事件参数取得放的GameObject，并进一步取得对应的图片Sprite和Color，设置给目标GameObject。

生成可拖拽的图片，并进行拖拽

public class MyDrag : MonoBehaviour,IBeginDragHandler,IDragHandler,IEndDragHandler
{
    
    private GameObject m_icon;
    private GameObject m_canvas;
    private Vector3 m_offset;//



    private void OnEnable()
    {
        //在DragImage的位置上创建一个相同的图片，起名icon
        m_canvas = GameObject.Find("Canvas");
        m_icon = new GameObject("icon");//在场景根节点下创建一个跟对象，并命名为icon
        m_icon.transform.SetParent(m_canvas.transform,true);//将icon的节点设置在convas之下//ture:保持icon在场景中的原本位置不变//m_icon.transform.parent=m_canvas.transform
        m_icon.transform.position = this.transform.position;//让生成的icon的图片与原来的图片重叠
        var img = m_icon.AddComponent<Image>();//添加一个Image组件
        img.sprite = this.GetComponent<Image>().sprite;//取DragImage的图片精灵设置给icon
        var group = m_icon.AddComponent<CanvasGroup>();
        group.blocksRaycasts = false;使拖拽是不会点击到icon节点,因为脚本是挂在DragImage上的，因此要拖动是DragImage，而同级的节点，unity会自动选择最下面的节点，所以规定拖拽是很有必要的
        
    }
    public void OnBeginDrag(PointerEventData eventData)
    {
     
        Vector3 curpos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle
        (m_canvas.transform as RectTransform, eventData.position, eventData.pressEventCamera, out curpos);//取得鼠标光标相对的位置，并转换到canvas坐标系下的位置

        Vector3 imgpos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle
            (m_canvas.transform as RectTransform, this.transform.position, eventData.pressEventCamera, out imgpos);//取得dragImage在屏幕上的位置，并且将其转换到其在canvas坐标系下的位置

        m_offset = imgpos - curpos;//记录鼠标点击位置相对于图片中心点的位移

    }

    public void OnDrag(PointerEventData eventData)
    {
        Vector3 curpos;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(m_canvas.transform as RectTransform, eventData.position, eventData.pressEventCamera, out curpos);
        (m_icon.transform as RectTransform).position = curpos + m_offset;//icon的位置设置成鼠标光标位置+光标相对于图片中心得偏移量
    }

    public void OnEndDrag(PointerEventData eventData)
    {
        (m_icon.transform as RectTransform).position = this.transform.position;//icon的位置归位到dragImage的位置，整个拖拽过程拖拽的是icon
    }

}

unity执行顺序

点击DragImage是为了生成icon，后面拖拽的是icon
注意：LocalPoint——vector2 ； WorldPoint——vector3

将拖拽的图片放在指定位置

public class MyDrop : MonoBehaviour, IDropHandler
{
        public void OnDrop(PointerEventData eventData)
        {
            this.GetComponent<Image>().sprite = eventData.pointerDrag.GetComponent<Image>().sprite;

            this.GetComponent<Image>().color = eventData.pointerDrag.GetComponent<Image>().color;

        }
}

自适应的消息框

展示

1. Panel

垂直布局组件控制整个面板

Cantent Size Fitter组件水平不接收文本的数据，垂直接收来自文本框的数据并随着变化

Padding控制其内边距的大小

2. Buttons

在Buttons上添加一个水平布局组件控制两个Button

面板选项框

1、将Panel上挂上Toggle Group组件

2、在Panel下创建三个Toggle

Background表示背景图片，Checkmark表示被选中的状态

Is On ：表示是否开启
Group：表示是受Panel(ToggleGroup)控制，在ToggleGroup的控制之下，只会有一个被选中的状态
On Value Changeed(Boolean)：事件处理，当选中任意个Toggle，就会启动事件将游戏面板(PanelEquip)启动(SetActive)。

PanelEquip面板：通过表格布局组件创建出的UI面板

关卡选择

结构

Context

Scroll View
将垂直滑动关闭，让其只能水平滑动

同时注意EventSystem这个一定不能少，不然就会让unity无法反应事件(该死，因为没加这东西，浪费了我一个小时的功夫)