彻底学会Unity中UGUI中UI元素自适应问题

彻底学会Unity中UGUI中UI元素自适应问题

包会的简单版教程
狂飙模式:

经过自我进化学习,终于参悟。看完这个教程,你也可以!

1.扫盲UGUI的理解:


Unity3d 中的UI都是画在画布上的。就像画一幅画,首先我们需要一张什么也没有的白纸贴在画板上(这个画板就是:Canvas),有了画板以后,我们就可以一层层的铺上画面元素了,这些画面元素就是具体的UI元素(包括:一个图、按钮、滚动条、勾选框、文本框等等)而且,在层级面板的UI名称列表中(大纲列表)排在上面的就会被放在图层下方,后面创建的UI会遮住早先创建的,就像一层层的画画一样,后面刷的颜色肯定是在最前方。

彻底学会Unity中UGUI中UI元素自适应问题_第1张图片

​​

关于画布的介绍,包含三种模式我就不介绍了,可以看这里画布 - Unity 手册

2.单个UI元素的结构、组成扫盲

每个UI被创造在画布上以后,都有两个重要的东西:锚点(或者叫锚框)Anchors、UI元素视觉内容。

彻底学会Unity中UGUI中UI元素自适应问题_第2张图片

锚点(Anchors)主要负责把物体固定在画布上,并且根据锚点合并和分开来决定UI内容是跟随画布固定到画布定点位置,还是位置和缩放都跟随画布。这也就是自适应。默认情况下,锚点是合并的。

A:锚点合并模式

UI内容是跟随画布固定到画布定点位置,不跟随画布缩放

彻底学会Unity中UGUI中UI元素自适应问题_第3张图片

B:锚点分开并且形成锚框模式

彻底学会Unity中UGUI中UI元素自适应问题_第4张图片

此时UI元素内容的位置和缩放都跟随画布Canvas

彻底学会Unity中UGUI中UI元素自适应问题_第5张图片

彻底学会Unity中UGUI中UI元素自适应问题_第6张图片

3.UI元素内容和UI锚点(Anchors)的关系

其实人家两个只不过是简单的一家人,没有什么复杂的关系。

锚点在汉语中是轮船靠岸的时候抛在海底的铁钩,用来固定住轮船不被海水卷走。锚点就是固定的意思。这里每一个UI元素都有自己的Anchors 这个东西就是用来把UI元素内容像钉子一样订在Canvas。

UI元素内容(就是绿色部分)就像是锚点Anchors的子物体一样,它可以自己随便在画布上移动,他的坐标数值全部是相对于自己的锚点的数值。

彻底学会Unity中UGUI中UI元素自适应问题_第7张图片

这只是为了方便设计师看着元素进行调节相对位置,完全不影响自适应。自适应本质上还是和锚点位置+锚点模式还是锚框模式有关系。

还有一种情况,当锚点变成锚框的时候,UI元素内容就不再是显示坐标,而是显示上下左右到锚框边界的距离。

彻底学会Unity中UGUI中UI元素自适应问题_第8张图片

这都无所谓。

4.开始自适应的设置

有了前面的学习我们基本知道了,UI元素创建出来默认都会自适应画布(Canvas)的,只不过需要我们确认两个问题:

  1. 固定放在画布的那个位置
  2. 哪一种适应模式(仅位置、还是位置+缩放)

接下来按照我的步骤设置:

A首先我们需要设置该UI元素锚点的固定在画布的那个位置,很简单直接点击即可!

彻底学会Unity中UGUI中UI元素自适应问题_第9张图片

B然后,设置锚点/锚框模式(合并还是分开)

彻底学会Unity中UGUI中UI元素自适应问题_第10张图片

彻底学会Unity中UGUI中UI元素自适应问题_第11张图片

锚点模式:UI内容将会固定到一个位置不变,尽管画布的尺寸发生变化

锚框模式:UI内容将会跟队画布一起缩放大小,同时保持相对画布位置不变

彻底学会Unity中UGUI中UI元素自适应问题_第12张图片

但是锚框四个点的距离会影响到UI内容元素的缩放“效率”。间距越大缩放的比例程度就越大,间距越小,跟随缩放的比程度就越小。

小伙伴们,Do you understand?

撰稿不易全靠信仰!由你剃!
 

你可能感兴趣的:(Unity与c#,unity,ui,游戏引擎)