Unity UGUI

最新推荐文章于 2024-04-22 21:05:34 发布

刘落诗

最新推荐文章于 2024-04-22 21:05:34 发布

阅读量426

点赞数

文章标签： unity ui 游戏引擎

本文链接：https://blog.csdn.net/qq_60010055/article/details/121107362

版权

1、Canvas

1. Screen Space - Overlay

这种渲染模式表示 Canvas 下的所有的 UI 控件永远位于屏幕的前面 , 不管有没有相机 , UI元素永远在屏幕最前面，主要是2D效果。类似手机膜贴在手机屏幕的最上面，若是屏幕尺寸或屏幕分辨率发生变化，Canvas也会自动和当前屏幕尺寸相适应，这也就很好的解决了屏幕自适应问题。

2. Screen Space - Camera

这种渲染模式 Canvas 和摄像机之间有一定的距离 , 可以在摄像机和 Canvas 之间播放一些粒子特效，主要是3D效果。利用这种渲染模式时需要设定一个摄像机并将其绑定到Canvas组件下的Rander Camera处，改变Camera则UI元素的渲染效果也会发生变化。

3. World Space

这种模式下 Canvas 就和普通的 3D 物体一样了 , 可以控制它的大小,旋转,缩放等。这种渲染模式使得UI元素和3D世界中的物体产生遮挡效果。一般用来做血条。

plus：

勾选"Pixel Perfect"，在Canvas中的模糊效果消失，变得相对清晰。

屏幕分辨率问题：

横屏

竖屏

2、Text

color：颜色

size：大小

b：加粗

i：倾斜

锚点：

Panel

Panel 控件又叫面板，该面板实际上就是一个容器，在其上可放置其他 UI 控件。

当移动该面板时，放在其中的 UI 控件就会跟随移动，这样可以更加合理与方便地移动与处理一组控件。

当面板被创建时，会默认包含一个 Image （Script 组件）。

Source Image 用来设置面板的图像。

Color 用来改变面板的颜色。

Image

Source Image（图像源）：纹理格式为Sprite（2D and UI）的图片资源（导入图片后选择Texture Type为Sprite（2D and UI））。

Color（颜色）：图片叠加的颜色。

Material（材质）：图片叠加的材质。

Raycast Target（射线投射目标）：是否作为射线投射目标，关闭之后忽略UGUI的射线检测

Image Type（图片显示类型）：

Simple（基本的）：图片整张全显示，不裁切，不叠加，根据边框大小会有拉伸。

Preserve Aspect（锁定比例）：针对Simple模式，勾选之后，无论图片的外形放大还是缩小，都会一直保持初始的长宽比例。

Image Type（图片显示类型）：

Sliced（切片的）：图片切片显示，在Project页面选中图片，切换为Sprite（2D and UI）模式后，点击Sprite Editor进入图片裁切模式，将图片裁切为上图的形状，使用Sliced模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会拉伸5进行填充。

Fill Center（填充中心）：勾选后，5显示，反之，5不可见。

Image Type（图片显示类型）：

Tiled（平铺的）：若图片已经过裁切，则使用Tiled模式后，根据图片边框拉伸，图片的四个角会保持原状，而1和4部分会随着图片的横向拉伸而拉伸，2和3部分会随着图片的纵向拉伸而拉伸，图片的中间部分会用5进行平铺填充。若图片未裁切，则使用Tiled模式后，根据图片边框拉伸，图片保持原大小不做变化，只是用自身平铺填充。

Fill Center（填充中心）：（已裁切的图像源才有此选项）勾选后，5显示，反之，5不可见。

Image Type（图片显示类型）：

Filled（填充的）：根据填充方式、填充起点、填充比例决定图片显示哪一部分。

Fill Method（填充方式）：分为水平、垂直、90度圆、180度圆、360度圆。

Fill Origin（填充起点）：根据填充方式不同有所变化。

Fill Amount（填充比例）：0是完全不显示，1是完全显示。

案例：进度条

Image img;

Text txt;

float timer = 0f;

void Start()

{

img = GetComponent<Image>();

txt = img.GetComponentInChildren<Text>();

img.fillAmount = 0;

}

void Update()

{

timer += Time.deltaTime;

float per = timer / 10;

per=per>=1f?1f:per;

img.fillAmount = per ;

txt.text = (int)(per * 100) + "%";

}

RawImage

RawImage和Image的区别：

Image控件用于显示Sprite类型的图片

RawImage控件用于显示Texture类型图片

案例：滚动背景

RawImage raw;

float speed = 0.1f;

void Start()

{

raw = GetComponent<RawImage>();

}

void Update()

{

float a = Time.deltaTime*speed;

Rect r= raw.uvRect;

r.x += a;

raw.uvRect = r;

}

FieldInput

Button

按钮事件操作：

为注册按钮添加脚本

using UnityEngine.UI;//引用命名空间

public class Reg : MonoBehaviour

{

public void RegBtn()

{

print("注册成功");

}

为注册按钮添加注册方法

获取输入框的值

public InputField name;//声明组件(对象)

public InputField pwd;

public void RegBtn()

{

string name2 = name.text;//获取大输入框的值

string pwd2 = pwd.text;

print(name2 + "\t" + pwd2);

print("注册成功");

}

提示此姓名已经注册

操作组件

获取组件
1. 把组件声明用public修饰

public Text biaoTi;//标题文本

public void Get()

{

biaoTi.text = "用户注册";//更改文本内容

}

1. 通过名称

Text touXiang;

void Start()

{

//通过名称获取组件

touXiang =GameObject.Find("touXiang").GetComponent<Text>();

}

public void Get()

{

touXiang.text = "用户头像";

}

更改图片
1. Image

public Image wenLong;

public void Get()

{

wenLong.sprite = Resources.Load("b",typeof(Sprite)) as Sprite;

}

1. RawImage

public RawImage jiangTao;

public void Get()

{

jiangTao.texture= Resources.Load("a", typeof(Texture)) as Texture;

}

界面跳转

public GameObject zhuCe;

public GameObject kaiShi;

public void Get()

{

zhuCe.SetActive(false);//把注册页面隐藏

kaiShi.SetActive(true);//把开始页面显示

}

Toggle（开关/切换）

public void GetMan()

{

//点击多次还是选择自己

if (man.isOn)//man是否选中

{

woman.isOn = false;

}

else if(woman.isOn==false)

{

man.isOn = true;

}

//woman.interactable = false;//组件是否可用

//得到选中的文本内容

Text t = man.GetComponentInChildren<Text>();//得到子组件

string a = t.text;

print(a);

}

public void GetWoman()

{

if (woman.isOn)

{

man.isOn = false;

}

else if (man.isOn == false)

{

woman.isOn = true;

}

//man.interactable = false;

//得到选中的文本内容

Text t = woman.GetComponentInChildren<Text>();

string a = t.text;

print(a);

}

Slider

On Value Changed：值改变时触发消息。

public Slider slider;

public void GetValue()

{

print(slider.value);

}

Scrollbar

Handle Rect（操作条矩形）：当前值处于最小值与最大值之间比例的显示范围，也就是整个滑条的最大可控制范围。

Direction（方向）：滚动条的方向，从左至右，从上至下还是其他的。

Value(值)：当前滚动条对应的值。

Size（操作条矩形长度）：操作条矩形对应的缩放长度。

Numbers Of Steps（指定可滚动的位置数量）：滚动条可滚动的位置数目，为0和1时不生效（事实上只有0个可滚动位置或1个可滚动位置那还叫滚动条吗），例如设为2，则拖动滚动条时滚动条只会处在最小值的位置和最大值的位置，因为他的可滚动位置只有2个，例如设为3，则拖动滚动条时滚动条只会处在最小值的位置、最大值的位置以及中间位置，因为他的可滚动位置只有3个。

On Value Changed：值改变时触发消息。

public Scrollbar scrollbar;

public void TuoDongTiao()

{

float a = scrollbar.value;

print(a);

}