UGUI图形系统
1画布与事件系统
1.1画布
画布用于承载所有的UI元素。
Canvas物体的Canvas组件Render Mode分为三种:
第一种:Screem Space Overlay模式,该模式下画布中的元素始终在前面。
第二种:Screem Space Camera模式,该模式下画布中的元素是否在前取决于它与物体的位置。
第三种:World Space模式,该模式下画布可以自由移动缩放。可用来做人物的血条等。
1.2事件系统
事件系统是使画布内元素产生效果系统,创建画布后会自动创建,如果不小心删除也可点击添加单独创建。
2.图像、文本框、按钮、输入框的脚本交互
2.1登录按钮的脚本实现
示例
using UnityEngine;
using UnityEngine.UI;
public class Login : MonoBehaviour
{
InputField accountInput;
InputField passwordInput;
Button loginButton;
void Start()
{
accountInput = transform.Find("Account").GetComponent<InputField>();
passwordInput = transform.Find("Password").GetComponent<InputField>();
loginButton = transform.Find("Login").GetComponent<Button>();
loginButton.onClick.AddListener(LoginButtonOnClick);
}
void LoginButtonOnClick()
{
string account = accountInput.text;
string password = passwordInput.text;
Debug.Log("Account is " + account);
Debug.Log("Password is " + password);
}
}
该段代码实现的功能是,在输入账号和密码并点击登录键后,将账号和密码在控制台输出。
7.2.2更换背景图的脚本实现
示例
using UnityEngine;
using UnityEngine.UI;
public class Change : MonoBehaviour
{
public Sprite bg;
void Start()
{
transform.Find("Background").GetComponent<Image>().sprite = bg;
}
}
该段代码实现的功能是,在将新的图像添加到新建的脚本后,点击播放可以在运行时将背景图换成新的图像
7.2.3修改文本框
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
string text = "抵制不良游戏,拒绝盗版游戏。注意自我保护,谨防受骗上当。\n适度游戏益脑,沉迷游戏伤身。合理安排时间,享受健康生活。";
void Start()
{
transform.Find("Text").GetComponent<Text>().text = text;
}
}
该段代码实现的功能是,在运行时将文本框文字改为:抵制不良游戏,拒绝盗版游戏。注意自我保护,谨防受骗上当。适度游戏益脑,沉迷游戏伤身。合理安排时间,享受健康生活。
7.2.4点击按钮导入链接
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
void Start()
{
transform.Find("Button").GetComponent<Button>().onClick.AddListener(ButtonOnClick);
}
void ButtonOnClick()
{
Application.OpenURL("https://v.qq.com/channel/choice?channel_2022=1");
}
}
该段代码实现的功能是,在点击了Button按钮后,跳转到网站https://v.qq.com/channel/choice?channel_2022=1。
7.3切换开关与开关组
7.3.1切换开关
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
InputField user;
InputField password;
Toggle toggle;
Button logon;
void Start()
{
user= transform.Find("User").GetComponent<InputField>();
password = transform.Find("Passward").GetComponent<InputField>();
toggle=transform.Find("Toggle").GetComponent<Toggle>();
logon=transform.Find("Logon").GetComponent<Button>();
logon.onClick.AddListener(logonOnClick);
}
void logonOnClick()
{
if (toggle.isOn == true)
{
string username= user.text;
string passwordnum=password.text;
Debug.Log("用户名是:"+username);
Debug.Log("密码是:"+passwordnum);
}
else
{
Debug.Log("请先同意用户协议");
}
}
}
该段代码实现的功能是,在点击了按钮后,可以正常登录,未点击时控制台显示:请先同意用户隐私协议!
7.3.2开关组
若有多个Toogle,而只能选择一个,可在Hierachy中新建一个空对象,在空对象的Inspector中添加一个Toggle Group,将空对象移入每个Toogle的Inspector>Toogle>Group中,运行即可实现单选,Toggle Group的Allow Switch Off指允许取消勾选,即选择后可以实现一个都不选。
7.4滑动条Slider的使用
示例
using UnityEngine;
using UnityEngine.UI;
public class Test : MonoBehaviour
{
Slider slider;
void Start()
{
slider = transform.Find("Slider").GetComponent<Slider>();
slider.onValueChanged.AddListener(OnValueChanged);
}
void OnValueChanged(float value)
{
Debug.Log("进度条的值为:"+slider.value);
}
}
该段代码的功能是,在控制台显示slider滑动的值。
7.5滚动视图与遮罩的使用
7.5.1滚动视图Scroll View
滚动视图是容纳多个图标的容器,可以通过拖动滚动条来查看所有的图标,因为在Scroll View中的Viewport含有Mask组件,所以,图标只会在滚动视图内显示。
7.5.2Mask和Rect Mask 2D
Mask作为父物体的组件时,子物体超出父物体的部分不会显示,这里会识别父物体的透明度,透明度高的部分也不会被显示。
Rect Mask 2D作为父物体的组件时功能与Mask相同,但不会识别父物体的透明度,父物体以矩形方式呈现。
7.6水平、垂直、网格布局组件与布局元素
7.6.1水平、垂直和网格布局
水平布局组件:Horizontal Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成一行,并进行相关设置。
垂直布局组件:Vertical Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成一列,并进行相关设置。
网格布局组件:Grid Layout Group,在Scroll View>View Port>Content中加入该组件,可以将滚动视图中的图像设置成方固定方格排列,并进行相关设置。
7.6.2布局元素
布局元素组件:Layout Element,网格布局元素中的单个图像若添加该组件,并选择组件中的Ignore Layout,可以使该图像自由移动,不受网格限制。
7.7内容尺寸适配器Context Size Fitter
7.7.1内容尺寸适配器
该组件英文名Context Size Fitter,当在内容输入文本框或者在Scroll View>View Port>Content的网格状态下使用该组件,把Horizontal Fit项设置成Preferred Size时,可以根据内容自适应左右宽度的大小,Vertical Fit同理。
7.7.2克隆元素图标
示例
using UnityEngine;
public class Clone : MonoBehaviour
{
public GameObject hero;
public Transform content;
void Update()
{
if (Input.GetKeyDown(KeyCode.A))
{
GameObject clonehero=GameObject.Instantiate(hero);
clonehero.transform.parent = content;
}
}
}
将元素图标的预制件与HeroPanel>Scroll View>View Port>Content拖入该脚本并将该脚本挂到penel中后,可以在播放时通过按A键来克隆物体。
7.8UI特效与图片填充功能
7.8.1UI特效
Outline组件,该组件可以通过设置大小、颜色等给UI元素(如图片)描边。
Shadow组件,该组件可以通过设置大小、颜色等给UI元素(如图片)设置阴影。
7.8.2图片型进度条制作
示例
using System.Collections;
using UnityEngine;
using UnityEngine.UI;
public class FullFill : MonoBehaviour
{
public Image image;
void Start()
{
StartCoroutine(Fill());
}
IEnumerator Fill() //协程就是要等时间
{
float value = 0;
while(value<=1)
{
yield return new WaitForSeconds(0.5f);
value+=0.1f;
image.fillAmount = value;
}
}
}
新建两个层级不同的Image,父Image设置成背景色,子Image设置成填充色,并在子Image的Sourse Image中导入一张图片,将Image Type设置成Filled,将Fill Method设置成Horizontal,将Fill Origin设置成Left,将含上面代码的脚本挂到某一物体上,将子Image挂到脚本中,可以实现实现播放时的进度条加载效果。
标签:图形系统,void,UnityEngine,组件,using,UGUI,public,View From: https://www.cnblogs.com/gatran/p/17441473.html