Unity---UGUI入门基础

目录

• 1、UGUI介绍
• 2、UGUI基本控件
  • 2.1 Canvas---画布
  • 2.2 Text
  • 2.3 Image
  • 2.4 RawImage
  • 2.5 Button
  • 2.6 Toggle
  • 2.7 Slider
  • 2.8 Scrollbar
  • 2.9 Scroll View
  • 2.10 Dropdown
  • 2.11 InputField
  • 2.12 Grid Layout Group
  • 2.13 Content Size Fitter
• 3、UGUI事件系统
  • 3.1 UGUI实现事件3种方法
  • 3.2 IDrag拖动接口
  • 3.3 IPointerClick点击接口
  • 3.4 ISelectHandler 选中接口
  • 3.5 系统按键接口

1、UGUI介绍

GUI就是Graphical User Interface（图形用户界面）简称。在Unity还未更新UGUI之前最流行的做UI的插件是NGUI。自从Unity4.6开始后，集成到了编辑器中，大大方便了开发。

2、UGUI基本控件

2.1 Canvas---画布

每当你创建一个UI物体时，Canvas都会自动创建。所有的UI元素都必须是Canvas的子物体。
和Canvas一同创建的还有一个EventSystem，其是一个基于Input的事件系统，可以对键盘、触摸、鼠标、自定义输入进行处理。

Render Mode
Screen Space - Overlay：让UI始终位于界面最上面部分
Screen Space - Camera：赋值一个相机，按照和相机的距离前后显示物体和UI
World Space：让画布变成一个3D物体可以移动等
UI Scale Mode
Constant Pixel Size：根据像素大小计算UI位置和尺寸。当屏幕尺寸改变时，UI大小不会变而其他物体会变。
&ensp&ensp&ensp Scale Factor：UI缩放系数
Scale With Screen Size：根据不同屏幕尺寸自动改变UI大小
&ensp&ensp&ensp Reference Resolution：设置为屏幕尺寸
Constant Physical Size：根据物理

Graphic Raycaster：图片射线
只有UI的元素才继承了Graphic基类，才能响应图片射线。
Ignore Reversed Graphic：图片翻转后点击无效
Blocking Objects：阻挡点击物体(当UI前面有物体时，点击前面的物体射线是否阻挡)
Blocking Mask：阻挡层级

2.2 Text

Line Spacing：行间距

Rich Text：富文本---可以结合多种字体类型和大小，寻找文本中的标记标签，就和HTML中对字体的类型设置很像。
如果想在同一个Text中实现不同的字体有不同的大小颜色等效果就可以使用富文本。
格式和Html5的格式大体相同，但并不是完全兼容

<b>粗体</b>
<i>斜体</i>
<size=50>大小</size>
<color=#ff000000>颜色</color>
<color=red>颜色</color>

Alignment：设置对齐
Align By Geometr：几何方向的对齐
Horizontal Overflow：选择溢出的处理方式---文本水平超出最大宽度时，是自动换行还是就溢出不显示。
Vertical Overflow：以上同理
Best Fit：是否忽略对文字大小的设置---选中文字会自动改变大小来全部显示出来。
Raycast Target：UGUI创建的所有组件都会默认勾选，UI事件会在EventSystem的Update的Process触发。UGUIh会遍历所有Raycast Target是true的UI，发射射线找到玩家最先触发的那个UI，抛出事件给逻辑层去响应。

	private Text text;

	void Start () {
		text = transform.GetComponent<Text>();
		text.text = "你好呀";
		text.fontSize = 20;
		text.color = Color.blue;
		text.fontStyle = FontStyle.Bold;
	}

2.3 Image

Source Image：转为Sprite格式的图片可以赋值。
Preserve Aspect：图像宽高是否按原始比例
Set Native Size：返回原始大小

Image Type：

1. Simple：在拉伸区域内完全显示一张图片
2. Sliced：按九宫格显示，九宫格在图片资源中设置。拉伸时九宫格四周大小不变，上下只会左右拉，左右只会上下拉。
3. Tiled：平铺，在选中范围内显示n张原始大小的图片。
4. Filled：按各种方法切割图片。(经常用于技能冷却)。

    public Image image;
    public Sprite sprite;

	//可以修改Image的图片
	void Start () {
        image = transform.GetComponent<Image>();
        image.sprite = sprite;
	}

2.4 RawImage

Image显示的是Sprite格式的图片。
RawImage显示的是Texture格式的图片。
RawImage一般用于背景、图标上，一般用于显示外部图片。
当显示一张外部加载的图片且不用交互时，所用时间远低于Image。

UV Rect：纹理坐标，可以用其实现帧动画。

Raw Image的另一个使用技巧：在2D界面上实现3D物体

1. 新建一个Render Texture，赋值到相机的Target Texture。用于获取相机的3D显示内容。
2. 把RT赋值到Raw Image。让Raw Image接收相机的3D内容。
3. 再新建个相机，就可以在新建相机2D界面中添加3D内容。

2.5 Button

Interactable：是否可交互
Transition：过渡方式

1. 颜色过度
   Target Graphic：过渡效果作用目标
   Normal Color：默认颜色
   Highlighted Color：高亮颜色
   Pressed Color：按下颜色
   Diasbled Color：禁用颜色
   Color Multiplier：颜色切换系数
   Fade Duration：衰落延迟
2. 图片过度---基本同理
3. 动画过度

Navigation：按钮导航---在EventSystem中，有个当前被选中的按钮，可以通过方向键或代码控制，使被选中的按钮进行更改。
Visualize：可以把按键能导航到的路径可视化，高亮黄色箭头显示。

Button添加点击事件的两种方法

1. 直接在界面OnClick处添加事件。
2. 通过代码给按钮添加点击事件。

    public Button btn1;
    public Button btn2;

    void Start()
    {
        btn1.onClick.AddListener(NoParameter);
        btn2.onClick.AddListener(()=>HaveParameter("Hello"));
    }

    private void NoParameter()
    {
        Debug.Log("Hello");
    }

    private void HaveParameter(string str)
    {
        Debug.Log(str);
    }

2.6 Toggle

主要选项和Button相同
Is On：默认是否选中。
Toggle Transtion：切换是是否有过渡效果，Fade表示有，None表示没有。
Graphic：设置开关要起作用的对象，不一定非要是默认的对号。
Group：设置分组。把多个Toggle放在同一个物体下，在这个物体上添加Toggle Group，并给Toggle赋值，就可以实现单选。
On Value Change：当Toggle值改变时所调用的函数。

2.7 Slider

Slider下的Background：表示未进度的区域的显示图片。
Slider下的Fill：已经进度的显示图片。
Slider下的Handle：可滑动块块的图片
Fill Rect：设置用于显示已经是进度区域的图片。
Handle Rect：设置可滑动块块的图片。
Direction：方向，从左到右、从上到下之类的。
Min Value：最小值。
Max Value：最大值。
Whole Numbers：是否按整型来改变值。
Value：值
On Value Changed：值改变时，触发的事件

Slider一般可以与文本之类的结合，来解决内容过多显示不下的问题。
等待更新案例...

2.8 Scrollbar

Size：可滑动块块的大小。
Number Of Steps：从最小到最大值一共需要几步。设置0或1时效果和Slider基本一样，都是可以自由滑动。设置2时，滑块只能在最小或者最大，只有这两个位置。再大同理。

2.9 Scroll View

在content下添加所需的内容，即可实现此效果。

Horizontal：是否允许水平拖动
Vertical：是否允许竖直拖动
Inertia：是否有滚动惯性
Deceleration Rate：滚动惯性大小
Visibility：是否选择自动隐藏滚动条

2.10 Dropdown

Options：可以添加或删除每一项
Item：每个项目中的内容组合
Caption---：标题显示的内容
Item---：每个项目的小内容

2.11 InputField

Character Limit：输入字符个数限制
Content Type：输入字符类型
Custom Caret Color：光标颜色
Selection Color：选中文本颜色

2.12 Grid Layout Group

Padding：边距
Spacing：每项的间距
Start Corner：元素排列方向
Start Axis：元素水平或竖直排列
Child Alignment：子项从哪开始排列
Constraint：可以限制列数或行数

2.13 Content Size Fitter

用来设置UI的长宽。
比如可以挂在Text上，就可以设置内容的最小长宽。

3、UGUI事件系统

3.1 UGUI实现事件3种方法

1. 添加接口，调用事件。(推荐)
2. 在界面中直接添加Event Trigger控件。
3. 在代码中添加Event Trigger控件

3.2 IDrag拖动接口

IBeginDragHandler 开始拖动
IDragHandler
IEndDragHandler 结束拖动

实现拖动效果的两种方法

    public void OnDrag(PointerEventData eventData)
    {
        //eventData.position  拖动时的屏幕坐标
        //因为物体的位置是世界坐标，所以要把拖动时的屏幕坐标转换为世界坐标
        RectTransform rect = GetComponent<RectTransform>();
        Vector3 pos = Vector3.zero;
        RectTransformUtility.ScreenPointToWorldPointInRectangle(rect, eventData.position, eventData.enterEventCamera, out pos);
        rect.position = pos;
    }


    public void OnDrag(PointerEventData eventData)
    {
        RectTransform rect = GetComponent<RectTransform>();
        rect.anchoredPosition += eventData.delta;
    }

3.3 IPointerClick点击接口

IPointerEnterHandler 鼠标进入
IPointerExitHandler 鼠标离开
IPointerDownHandler 鼠标按下
IPointerUpHandler 鼠标抬起
IPointerClickHandler

3.4 ISelectHandler 选中接口

ISelectHandler 点击选中后执行一次
IDeselectHandler 取消选中后执行一次
IUpdateSelectedHandler 选中后一直执行

要配合Selectable控件才能使用

3.5 系统按键接口

IScrollHandler 点击后鼠标滚轮触发
ISubmitHandler 点击后回车空格触发
CancelHandler 点击后Esc触发
IMoveHandler 点击后键盘移动触发

要配合Selectable控件才能使用