UGUI笔记—Canvas、Image

UGUI基础

Unity版本 2021.3.9f

UI容器Canvas

UI元素想要被相机渲染，要么挂载在Canvas节点下

要么自带Canvas组件

在场景中的UI元素的渲染以场景相机位置为准

Canvas的属性

1. Render Model 有三个参数

Screen Space - Overlay

Canvas 覆盖屏幕，且永远覆盖在其它元素的上层。UI会遮盖住场景中的其它元素。
Overlay模式下的参数
  Pixel Perfect: UI元素精确大像素对齐，边缘会更加清晰。
  Sort Order： Canvas的深度值。存在多个Canvas时，Sort Order值更大的Canvas会覆盖住值较小的Canvas。多个Canvas深度值相等时，Hierarchy视图中后面的Canvas显示在下面。这一点与UI元素的规则（下面的元素显示在前面）相反。
  Additional Shader Channels: 设置要在创建 Canvas 网格时使用的附加着色器通道的遮罩。

Screen Space - Camera

和Overlay模式相似，Canvas覆盖整个屏幕空间。不同之处在于Canvas被放置于指定摄像机的前方。这种模式下场景中的3D元素可以渲染在UI元素之上。

Camera模式下的参数
  Pixel Perfect : 与Overlay模式相同
  Render Camera: 指定用来渲染的相机
  Plane Distance Canvas: 平面与相机的距离
  Sorting Layer: 指定Canvas的深度，可以手动添加。当存在多个Camera模式的Canvas时，Sorting Layer 决定显示的优先级
  Order in Layer： 多个Canvas具有相同的Sorting Layer时，根据Order in Layer决定显示优先级。
  Additional Shader Channels: 同上
必须在相机的远近平面中才会被渲染
相机的平移旋转缩放以及fov不会影响Canvas显示结果，Canvas位置依旧固定
即使相机是Perspective模式，Canvas距离摄像机的远近也不会影响其显示的大小

World Space

这种模式下，Canvas与场景中的3D元素没有区别
World Space模式下的参数
  Event Camera: 指定接受事件的相机
  Sorting Layer:同上
  Order in Layer:同上
  Additional Shader Channels:同上

Canvas Scaler

UI Scale Mode

需要EventCamera来指定接受事件的相机
相机的平移旋转缩放以及fov都会影响Canvas显示

1. Image

图片Inspector面板常用的参数

  Texture Type :
    Default: 普通贴图，此时不能添加给Image
    Normal map：法线贴图
    Editor GUI and Legacy GUI：UI贴图
    Sprite(2D and UI)：精灵，此时可以添加给Image使用
    Cursor：鼠标指针
    Cookie：遮罩贴图
    Lightmap：烘焙贴图
    Reflection：反射贴图
    Advanced：高级(可自定义一些贴图属性)
    Single Channel 单通道
    UI编辑中一般选择Sprite
  Sprite Mode:
    Single: 单一，将图片设置为单独的精灵。
    Multiple: 多个，将图片切割成多个小图或者一张需要的图。
    Polygon: 多边形，设置图片自己的纹理网格。
打开Sprite Editor可以看到以上模式的差别。
    这个一般默认选择Single
  Packing Tag:: 打包的标签，图片资源最后打包的时候会将相同Tag的小图打包成一个大图。2019以后Unity自行打包图集，所以这个选项就无法使用了。当然也可以手动创建图集进行打包。
如何打包图集
  Pixels Per Unit: 设置像素单位与Unity单位的转换比例，默认：100。表示100个像素等于一个Unity单位（一格）。
  Mesh Type:
    Full Rect:使用和纹理大小一样的矩形。这个模式下生成的网格数量少，适用于精灵较多使用的场景。
    Tight:基于alpha尽可能多的裁剪像素。这个模式下生成的网格很多，适用于较少使用的精灵。
    Extrude Edges:精灵生成的网格周围要留下多少空白区域。
    Pivot: 锚点(图片自身原点)的位置,center（0.5,0.5）;
  Sprite Editor:精灵编辑器:编辑精灵数据的窗口，根据Sprite Mode会显示不同的编辑模式。Single模式下编辑精灵的九宫格切割数值。

Multiple切图及使用

1. Texture Type选择 Sprite(2D and UI)

2. Sprite Mode 选择 Multiple

3. 点击Sprite Editor，提示编辑器未安装的：打开Window->Package Manager，勾选Unity Registry，等刷新出来列表后选择2D Sprite，点击install进行安装即可使用。

4. 

5. 在Sprite Editor中点击Slice点击右下角的Slice就自动裁切了。

6. 
   点击Apply应用即可。

7. 代码中加载及使用：

private Sprite[] sprites_green;
private void Awake()
    {
    	// 图片地址：Assets/Resources/ui_images/bag/btn_tab.png
    	// 加载方式1
        sprites_green = Resources.LoadAll<Sprite>("ui_images/bag/btn_tab");
        // 加载方式2
        // sprites_green = AssetDatabase.LoadAllAssetsAtPath("Assets/Resources/ui_images/bag/btn_tab.png").OfType<Sprite>().ToArray();
        // 使用
        img_0.GetComponent<Image>().sprite = sprites_green[0];
        img_1.GetComponent<Image>().sprite = sprites_green[1];
    }

Image组件

**Source Image:**图片来源，将设置好的图片直接拖进去即可。
Color: 设置图片混色参数，白色就是原色，A值为图片的透明度。
Material: 图片材质，可以将需要的材质球拖进去。
Raycast Target 射线检测目标。设置是否接受点击。
Image Type: 图片类型：
  simple 缩放的类型为拉伸
  Tiled 缩放的类型是平铺
  Slice 缩放的类型是九宫格缩放（选择的精灵要先设置九宫格数据，点击目标精灵，选择Single模式，在Inspector面板中选择Sprite Editor，设置九宫格切割线图片的四个角不变，拉伸缩放其它5个矩形区域）
  Filed 指定区域显示：
    Filed Method: Radial 90/180/360。按照角度裁剪。Vertical垂直裁剪，Horizontal水平裁剪。
    Filed Origin: 裁剪起始的点。
    Filed Amount: 裁剪的比例，0-1进度条是递增的，1-0进度条是递减的。
    Clock Wise: 逆时针/顺时针（勾选的时候为顺时针）。

如何给图片添加点击事件？

点击事件代码

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

public class EventListener : MonoBehaviour, IPointerClickHandler, IPointerDownHandler, IPointerUpHandler
{
    public Action onclick;
    public Action onPointDown;
    public Action onPointUp;

    public Action onLongPress;
    public float durationThreshold = 0.4f;
    private bool isPointerDown = false;
    private bool longPressTriggered = false;
    private float timePressStarted;

    void Update()
    {
        if (onLongPress != null && isPointerDown && !longPressTriggered)
        {
            if (Time.time - timePressStarted > durationThreshold)
            {
                longPressTriggered = true;
                onLongPress.Invoke();
            }
        }
    }

    public void OnPointerClick(PointerEventData eventData)
    {
        if (!longPressTriggered)
        {
            if (onclick != null) onclick();
        }
    }

    public void OnPointerDown(PointerEventData eventData)
    {
        timePressStarted = Time.time;
        isPointerDown = true;
        longPressTriggered = false;

        if (null != onPointDown) onPointDown();
    }

    public void OnPointerUp(PointerEventData eventData)
    {
        if (null != onPointUp) onPointUp();
        isPointerDown = false;
    }

    public static EventListener AddEventListenr(GameObject obj)
    {
        EventListener listener = obj.GetComponent<EventListener>();
        if (listener == null)
        {
            listener = obj.AddComponent<EventListener>();
        }

        return listener;
    }

    public static void RemoveEventListener(GameObject obj)
    {
        EventListener listener = obj.GetComponent<EventListener>();
        if (listener == null) return;
        GameObject.Destroy(listener);
    }
}

UI界面中调用

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

public class ListenerTest : MonoBehaviour
{
    // Start is called before the first frame update
    void Start()
    {
        Action action = new Action(onClick);
        EventListener listener = EventListener.AddEventListenr(transform.gameObject);
        listener.onclick += action;
    }

    private void onClick()
    {
        Debug.Log("点击事件");
        EventListener.RemoveEventListener(transform.gameObject);
		// 获取到Image组件
        Image img = transform.GetComponent<Image>();
        // 修改颜色，透明度，数值0-1对应色值0-255
        img.color = new Color(img.color.r, img.color.g, img.color.b, 0.3f);
        // 接受点击
        img.raycastTarget = true;
    }

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