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切图及使用
- Texture Type选择 Sprite(2D and UI)
- Sprite Mode 选择 Multiple
- 点击Sprite Editor，提示编辑器未安装的：打开Window->Package Manager，勾选Unity Registry，等刷新出来列表后选择2D Sprite，点击install进行安装即可使用。
- 在Sprite Editor中点击Slice
- 点击右下角的Slice就自动裁切了。
- 点击Apply应用即可。
- 代码中加载及使用：
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()
{
}
}
