OnGUI
创建内置UI类
// 生命周期事件
void OnGUI()
{
// 创建消息盒子
// new Rect(left, top, width, height) 前两个表示位置 后两个表示宽高
GUI.Box(new Rect(10f, 10f, 50f, 50f), "box");
// 创建按钮
GUI.Button(new Rect(10f,70f,50f,25f), "Button"); // 返回布尔值
}
效果：
编写点击事件
// 按钮事件
if(GUI.Button(new Rect(10f, 70f, 50f, 25f), "Button"))
{
Debug.Log("点击了按钮");
}
效果：
UGUI
创建组件
☞ 创建方式
右键： 
☞ C# 引入
先引入命名空间
using UnityEngine.UI; // 引入命名空间 UI
Text组件
❗Unity2021以后的版本，Text组件被归纳到Legacy里
// 定义全局变量
public Text text;
public Font textFont;
// Start is called before the first frame update
void Start()
{
// 获取当前的Text组件
text = GetComponent<Text>();
// 更改或返回 Text 中的字体
text.font = textFont;
// 控制RichText为真（默认为false
text.supportRichText = true;
}
Image组件
☞ 引入自定义图片
先创建image容器
❤ 直接创建
1、新建文件夹Resources，放入自定义图片。
❗Image必须是sprite格式。
2、修改格式
3、插入自定义图片
效果：
☞ 属性
❤ source Image：源图像，Sprite图像资源
❤ Color: 颜色与透明度
❤ Material: 材质
❤ Raycast Target: 射线投射目标
❤ lmage Type *
1、 Simple默认，在拉伸区域内完全显示一张图片
2、Sliced切片，九宫格应用，需要图片做过九宫格分割，四角在图片拉伸时不会拉伸变形
（适用有边框图片，可以保证四个角不变形）
九宫格切割：点击Sprite 的 Sprite Editor
3、Tiled平铺，像铺地板一样填满整个控件
4、Filled填充，技能冷却主要依靠这个属性
Fill Method: 切割方式，水平、垂直，90、180、360度圆形
Fill Origin:切割起始位置
Fill Amount: 切割的量，0~1
clockwise:顺时针方向
Preserve Aspect: 保持长宽比
❤ Preserve Aspect: 保持长宽比
❤ Set Native Size: 设置原始尺寸
☞ 技能冷却制作
1、在技能图标上添加白色背景
2、白色背景设置透明，image type属性配置
3、导入c#脚本在白色背景层上
using System.Collections;
using System.Collections.Generic;
using UnityEngine;
using UnityEngine.UI; // 记得 引入ui命名空间
public class ImageTest : MonoBehaviour
{
public Image image;
public float coolDowTime = 5f; // 全局设置技能总冷却时间
public float restTime = 5f; // 技能剩余时间
// Start is called before the first frame update
void Start()
{
// 给image赋值
image = this.GetComponent<Image>();
}
// Update is called once per frame
void Update()
{
if(restTime > 0)
{
restTime -= Time.deltaTime; // 减去每一帧的时间
image.fillAmount = restTime / coolDowTime; // 重新赋值
}
}
}
❗如果白色背景层无反应突然从透明变消失可能是image没赋值上
RawImage组件
可用于实现渐入渐出的动画效果
☞ 属性
❤ Texture： 图片源
与Image不同的是，RawImage可以导入各种格式的图片
❤ UV Rwct
x：向x轴偏移 y：向y轴偏移
W，H：宽高比
❤ 动画渐入
public RawImage rawImage;
public float speed = 1f;
// Start is called before the first frame update
void Start()
{
rawImage = GetComponent<RawImage>();
rawImage.uvRect = new Rect(new Vector2(-1,0),new Vector2(1,1)); // 重新给uvRect赋值 ((x,y), (w,h))
}
// Update is called once per frame
void Update()
{
// Time.deltaTime: 每帧间隔时间
//rawImage.uvRect = new Rect(new Vector2(rawImage.uvRect.x + speed * Time.deltaTime, 0), new Vector2(1, 1));
if(rawImage.uvRect.x < 0)
{
rawImage.uvRect = new Rect(new Vector2(rawImage.uvRect.x + speed * Time.deltaTime, 0), new Vector2(1, 1));
}
else
{
rawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(1, 1));
}
}
❤ 动画切换
public RawImage rawImage;
public float intervalTime = 1f; // 设置每隔一秒切换一次
public float timer = 0f; // 设置计时器
void Start()
{
rawImage = GetComponent<RawImage>();
//2、动画切换效果
rawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(0.25f, 1)); // 根据图片设置w
}
void Update()
{
//2、动画切换效果
timer += Time.deltaTime;
if (timer >= intervalTime)
{
// 大于1时位置重置为0
if(rawImage.uvRect.x > 0.75f)
{
rawImage.uvRect = new Rect(new Vector2(0, 0), new Vector2(rawImage.uvRect.width, 1));
}
rawImage.uvRect = new Rect(new Vector2(rawImage.uvRect.x + 0.25f, 0), new Vector2(rawImage.uvRect.width, 1));
timer = 0; // 重置计时器
}
}
阴影 / 描边组件
1、阴影组件：在Image或RawImage加上组件Shadow组件
2、描边组件：在Image或RawImage加上组件Outline组件
Button组件
☞ Image：按钮的背景
☞ Button
❤ Interactable：是否交互
❤ Transition：按钮效果
None：无点击效果
Color Tint：颜色交互 
Sprite Swap：图片交互
Animation：动画交互
❤ Navigation：方向键关联按钮
❤ On Click：点击事件
可视化窗口绑定
1、在button下创建脚本
public void clickButton()
{
Debug.Log("button");
}
2、点加号绑定带有c#脚本的按钮，选中脚本刚写的事件
C#脚本绑定
// Start is called before the first frame update
void Start()
{
// 脚本绑定按钮事件
this.gameObject.GetComponent<Button>().onClick.AddListener(clickButton);
// 脚本绑定带参数事件
string str = "带参数的按钮";
this.gameObject.GetComponent<Button>().onClick.AddListener(()=>handleClickButton(str));
}
// Update is called once per frame
void Update()
{
}
public void clickButton()
{
Debug.Log("button");
}
private void handleClickButton(string str)
{
Debug.Log(str);
}
效果
Toggle组件
☞ 属性
❤ ls On ：是否选中
❤ Toggle Transition：切换过渡
None 为无切换过渡，Fade 为切换时 Graphic 所指目标渐隐渐显
❤ Graphic：指向Checkmark ，控制Checkmark显示
❤ Group：设置分组
把多个Toggle放在同一个物体下，在这个物体上添加ToggleGroup,并给Toggle赋值,就可以实现单选
1、添加一个空的GameObject，并命名为ToggleGroup
2、ToggleGroup内创建多个Toggle
3、给ToggleGroup添加组件ToggleGroup
4、在每个Toggle上添加ToggleGroup（非组件）
ToggleGroup内 勾选则设置允许空白选项
❤ On Value Change：状态改变事件
可视化窗口绑定
视窗绑定参考button
C#脚本绑定
void Start()
{
// 脚本绑定带参数事件
this.gameObject.GetComponent<Toggle>().onValueChanged.AddListener((bool val) => handleChangeToggle(val));
}
void Update()
{
}
// 带参数
public void handleChangeToggle(bool isOn)
{
Debug.Log(isOn);
}
效果
Slider组件
☞ 属性
❤ Fill Rect：用作滑块填充的可选矩形转换
❤ Handle Rect：用于控件滑动“控制柄”部分的图形
❤ Direction：滑动条值增加的方向
Left To Right：左到右
Right To Left：右到左
Bottom To Top：下到上
Top To Bottom：上到下
❤ Min Value、Max Value：最大值、最小值
❤ Whole Numbers：勾选每次值以整数增加
❤ Value：当前值
☞ 控制音量播放
1、在Slider上添加Audio Source组件
loop：循环播放
2、c#绑定
void Start()
{
}
void Update()
{
}
public void ChangeSlider()
{
float value = this.gameObject.GetComponent<Slider>().value;
// Debug.Log(value);
// 控制音量
this.gameObject.GetComponent<AudioSource>().volume = value;
}
☞ 血条控制
写了一堆没保存，有时间再补
Input Field
☞ 属性
Text Component：文本组件
Input Field的文本显示输入组件
Text：lnput Field的初始值。
Character Limit：字符数量限制，最大输入的字符数，0为不限制。
Content Type：内容类型，限定Input Field的输入内容类型，包括数字、密码等，
常用的类型如下:
Standard：标准类型，什么字符都能输入，只要是当前字体支持的。
Autocorrected：自动更正
lnteger Number：整数类型，只能输入整数。
Decimal Number：十进制数，能输入整数或小数。
Alphanumeric：文字和数字，能输入数字和字母。
Name：姓名，能输入英文及其他文字，当输入英文时自动姓名化（首字母大写)。
Password：密码类型,输入的字符隐藏为*
Email Address：邮箱类型
Pin： Pin类型,字符隐藏为*
Custom ：自定义
☞ 事件
// 值改变
public void ChangeValue()
{
var value = this.gameObject.GetComponent<InputField>().text;
//Debug.Log(value);
// 获取当前输入的值(只能获取英文键盘和小键盘
foreach(KeyCode item in System.Enum.GetValues(typeof(KeyCode)))
{
if (Input.GetKeyDown(item))
{
Debug.Log(item.ToString());
}
}
}
// 结束编辑（光标移开
public void EndEdit()
{
var value = this.gameObject.GetComponent<InputField>().text;
//Debug.Log("结束编辑 " + value);
}```