UGUI系统（常用控件）适应场景、使用方法（1）

说在前面&＃xff1a;UI元素在Canvas里的绘制顺序和在Hierarchy面板中的排列顺序是一样的&＃xff0c;排名在上面的对象首先绘制&＃xff0c;然后是第二个第三个&＃xff0c;以此类推&＃xff0c;如果两个UI原色有重叠的部分&＃xff0c;之后绘制的元素会挡在先绘制的元素的上面。

Canvas:UGUI中的一个重要组成部分就是Canvas&＃xff0c;它是一个游戏对象&＃xff0c;所有的UI都是Canvas的一个子对象&＃xff0c;如果场景中不存在Canvas&＃xff0c;当用户创建UI元素的时候&＃xff0c;系统会自动的创建一个Canvas对象。

Render Modes&＃xff1a;&＃xff08;渲染模式&＃xff09;&＃xff0c;渲染模式共分为三种&＃xff0c;一种是Screen Space-overlay&＃xff0c;一种是Screen Space-Camera第三种World Space.

Screen Space-overlay :该模式是默认的渲染模式&＃xff0c;在该模式下&＃xff0c;所有的UI元素都渲染到最上层&＃xff08;类似于手机上的贴膜&＃xff09;,如果屏幕的尺寸或者fenbianlv发生改变&＃xff0c;Canvas也会自动的和变化后的尺寸相对应。

Screen Space-Camera:在该模式下&＃xff0c;Canvas游戏对象放置在一个预先设置好的摄像机的特定距离之外&＃xff0c;UI元素通过该摄像机进行渲染&＃xff0c;注意&＃xff1a;在使用该渲染模式&＃xff0c;应该创建一个摄像机并将其指定给Canvas组件下的Rand而Camera&＃xff0c;当改变该摄像机的蛇值&＃xff0c;UI元素的显示效果也会跟着改变。
World Space:该模式会是游戏对象更加形象&＃xff0c;可以手动的改变RectTranform组件&＃xff0c;从而更改其大小和控制旋转&＃xff0c;在渲染的时候&＃xff0c;UI元素会根据他们在3D场景中的位置被渲染在其他游戏物体之前或者之后&＃xff0c;使其成为游戏视图的一部分
注意&＃xff1a;在Screen的的两种模式下&＃xff0c;UI独立于游戏场景&＃xff0c;不会被场景中的对象遮盖

RecTranform&＃xff1a;Canvas会自带 一个RectTranform&＃xff0c;该组件继承与Transform&＃xff0c;用于控制Transform信息
参数&＃xff1a;

Panle控件&＃xff1a;
它是一个覆盖于整个屏幕的平面&＃xff0c;一般可以用来填充UI的背景。注意&＃xff1a;Panle控件会自动的适应当前屏幕的尺寸&＃xff0c;所以不用担心适应的问题

Button&＃xff1a;它是界面的 重要组成元素之一 &＃xff0c;按钮上挂在的Button组件实现了按钮的 全部功能&＃xff0c;&＃xff0c;包括单击之后的特效&＃xff0c;单击事件的监听&＃xff0c;
里面的哥哥参数的含义以及定义
参数&＃xff1a;

Button组建中的Transition过度选项定义了四种过度模式&＃xff0c;分别为None、ColorTint、Sprite Swap、Animation
&＃xff08;1&＃xff09; Color Tint&＃xff1a;使用该模式的时候&＃xff0c;可以通过Color属性对按钮的四种状态进行设置&＃xff0c;在对应的状态下颜色会发生改变&＃xff0c;比如按下&＃xff0c;抬起等状态
&＃xff08;2&＃xff09;Sprite Swap&＃xff1a;该过度模式为精灵配图&＃xff0c;如按下按钮时一张图&＃xff0c;抬起的时候又是另一张图等
&＃xff08;3&＃xff09;Animation&＃xff1a;UGUI的特色&＃xff0c;它可以使UGUI系统与动画系统结合起来&＃xff0c;使用动画状态机可以对不同状态下的按钮进行位置&＃xff0c;大小旋转的图片等参数进行设置
下面来举个例子&＃xff0c;我们先要的效果是店家按钮的时候&＃xff0c;让按钮缩放
先在界面中创建一个Button&＃xff0c;将Button组件中的Tran四通选项选择成Animation 点击下面 Auto Generate Animation 保存

点击Window-> Animation

将状态选择成Press
添加RectTransform&＃xff0c;然后编辑它的x、y、z的大小

这样就完成了点击按钮实现缩放的效果。

在Button中&＃xff0c;还有一个非常强大的功能就是添加监听&＃xff0c;添加监听的功能实现很简单&＃xff0c;创建一个c#脚本&＃xff0c;在脚本中编辑如下代码

public void onBtClick(){Debug.Log("点击事件");}


然后将脚本添加到Canvas中在Button中点击&＃43;将Canvas拖放到相应位置选中要监听的事件

Text控件&＃xff1a;
参数&＃xff1a;

下面演示一个简单的部分功能的使用方法

using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI;public class TextText : MonoBehaviour
{public Text text;// Start is called before the first frame updatevoid Start(){text.color &＃61; Color.red;text.fontSize &＃61; 3;//返回一个整型值设置现实的字体大小text.lineSpacing &＃61; 1.6f; //行间距&＃xff0c;指定为字体行高的一个因素。值1将产生正常的行间距。text.font &＃61; new Font("andlso");}// Update is called once per framevoid Update(){}
}

Unity支持导入外带的字体包&＃xff0c;TTF格式的字体一般都可以使用&＃xff0c;使用方法是将下载好的TTF文件放在项目目录下的Asset\Font
目录下&＃xff08;没有的花自己创建&＃xff09;&＃xff0c;在字体的Font参数中就可以找到导入的字体了

Image&＃xff1a;是一个非交互的精灵图片&＃xff0c;设置精灵图片的步骤是&＃xff0c;选中要设置的图片&＃xff0c;将图片的TexTure设置成Sprite&＃xff08;2DandUI&＃xff09;然后点击应用&＃xff0c;若想应用到Image上&＃xff0c;设置精灵之后拖拽到Source Image上即可
Image的参数&＃xff1a;

RawImage &＃xff1a; 它与Image的区别是&＃xff0c;前者只能设置精灵图片&＃xff0c;而后者可以设置任何纹理

Slider&＃xff1a;选择GameObject->UI->Slider创建一个滑块控件

在滑块控件中&＃xff1a;Background是设置滑块的背景&＃xff0c;也就是下面的黑色部分
Fill Area的子对象Fill是被填充的样式&＃xff0c;也就是下面的白色部分

Handle Slider Area的子对象是用户可以滑动的那个滑块

Slider的参数&＃xff1a;

Toggle组件&＃xff1a;实现开关功能的组件
创建一个Toggle之后&＃xff0c;可以看到他的子对象其中BackGround的相关参数与Scrollbar类似。
Checkmark是开关的背景在其中可以设置背景的图片与开关的样式。
Label 是一个Text组件&＃xff0c;其中可以设置开关处显示的字和相关的一些设置。
关于将怎样将多个Toggle设置成一个组的实例
首先在Canvas下创建一个空对象&＃xff0c;用于管理多个Toggle组件
在Empty GameObject上添加一个Toggle group组件&＃xff0c;在Toggle group组件中有一个Allow Switch off组件&＃xff0c;选中时&＃xff0c;当用户选中了某一个开关可以再次点击取消选择反之则不行
在创建的空物体下创建三个Toggle将三个对象的group设置成EmptyGameObject即可

组件&＃xff1a;

Toggle也同样可以添加事件监听&＃xff0c;具体在上篇中有记录

Input Fiedl&＃xff1a;这个空间是UGUI中的文本框控件&＃xff0c;常用来游戏中给人物取名用&＃xff0c;当用户在移动设备中点击这个文本框中&＃xff0c;会自动弹出用于输入的键盘&＃xff0c;在它的子对象中Placeholder用于显示默认提示信息的文本框&＃xff0c;Text则显示用户输入的详细&＃xff0c;如果想要修改默认的文本消息的时候&＃xff0c;可以直接谢盖Placeholder中的文本消息
参数&＃xff1a;