前言:Unity版本为2019.2.9f1 Ppersonal。Unity版本可在上方Help下点击About Unity找到。本文介绍了Unity游戏开发中常见的UI实现方法,是你学习Unity UGUI的不二之选,超级详细绝对干货!还可通过目录快速跳转到你想看的内容哦。看完觉得有帮助的小可爱,还请动动小手点个赞让更多人看到哦~~~
开发UGUI时,常选择ISO模型,即2D平面开发,然后右上角锁定界面防止镜头发生偏移,如图所示。
点击图片后按T可以进入Rect Tool编辑,如图所示。
其中四个角的实心点为拉伸点,中心空心点为pivot点,即自身坐标中心点。点击实心点后可以拖动,从而对图片进行自由拉伸;实心点间的连线也可以拖动,但是沿着连线垂直方向进行拉伸。按住中间区域可以拖动图片。
点击图片的拉伸点时,同时按住一些键可以实现不同的拉伸效果。
在UGUI中,每一个UI控件都拥有自己的矩形区域。Rect Transform是UI控件独有的组件,它记录了UI控件的矩形区域在画布上的各种坐标信息,其参数如下。
在Hierarchy面板下右键,新建一个Image。
如下图所示,Unity会自动为你创建一个画布Canvas和Image图片,其在Game窗口的预览效果如下图空白方块所示。这里要提一点的是,所有的UI控件都必须放在Canvas下,否则在Scene窗口和Game窗口都无法看到,相当于是被隐藏起来了。
点击Image,如图为Image的Inspector面板,RectTransform组件就不做过多介绍了。
Image组件就使得该对象拥有Image的属性,即它为一个图片。
Image的属性如下。
随便导入一张精灵图Sprite后会变成如图的样子。
在Hierarchy面板下右键,新建一个Button。
如下图所示,Unity会自动为你创建一个画布Canvas和Button按钮,其在Game窗口的预览效果如下图所示。Button中设置的是按钮的属性,而Button下的Text设置的是Button上的文本。
点击Button,如图为Button的Inspector面板,可以看见,Button上还挂载了一个Image组件。说明Button其实是一个Image,但是其上有Button组件,因此具备了按钮的属性,可以被点击。因此创建Button还有另外一种方式:创建一个Image,然后为其添加Button组件即可。
要注意,所有效果都必须是游戏运行时才会生效。
接下来讲一讲如何添加Button点击事件。
首先在Hierarchy面板中创建一个空物体GameObject,然后在Project面板下创建一个新的C#脚本,命名为OnClickButton。将OnClickButton添加到GameObject上。
双击OnClickButton脚本,输入以下代码。该代码的作用是,点击按钮后,输出"You click the button.“和_printCount次"Yes”。
using UnityEngine;
public class OnClickButton : MonoBehaviour
{
public void Click(int _printCount)
{
print("You click the button.");
for (int i = 0; i < _printCount; ++i)
{
print("Yes!");
}
}
}
脚本创建好后,返回到Unity界面。在Button的Inspector面板最下方找到On Click(),点击右下角的加号,将GameObject拖入作为引用。然后就可以点击右边的No Function -> OnClickButton -> Click(int),从而将该方法作为为Button按下后调用的方法。
选定方法后,就可以为方法设定传入的参数,这里要注意的是,Button按钮只能触发只含一个参数的方法,参数多了就无法指定参数了。将传入的参数设定为5,如图所示。
最后,运行游戏,点击Button,即可在Console面板看到"Yes"被打印了5次。
首先是第一栏,点击后有个下拉框。Off表示该方法在按钮点击时不调用;Editor And Runtime表示即使没运行游戏时,点击Game窗口下的Button也会调用该方法;Runtime Ony就是前面介绍的实例一样,仅仅在Game运行时点击Button才会调用该方法。
No Function点击后也会出现多个选项。这些选项是该Button上的一些可以通过Button调用的方法,注意,如果想调用自定义的方法,必须声明为public,否则在Button是获取不到的。如果添加两次GameObject会怎样呢?如图所示。
在运行后,点击Button,会调用两次Click方法,如图所示,输出了10次"Yes"。
新建一个Image,命名为Background_1,将其拉伸到如图大小,设置透明度为100。同时新建一个小Image,命名为Toggle_1,设置透明度为100。调整两个窗口的位置,在Toggle下新建一个Text,调整一下大小,文本输入为Toggle1。
为Toggle_1添加Toggle组件,如图所示,将Background_1拖到Graphic上,不要管下面的Toggle_3是什么。
点击Play运行游戏,点击Game窗口下的Toggle1可以发现Background_1消失不见,再次点击又会出现,这就是开关的效果。
复制一个Toggle_1和Background_1,分别重命名为Toggle_2和Background_2。将Toggle_2的Toggle组件上的Graphic引用换为Background_2,同时将其下Text改为Toggle2。调整一下位置如图所示。
复制Toggle_1,改名为Toggle_3,去掉其上的Toggle组件,添加一个Toggle_3组件。同时选定Toggle_1和Toggle_2,将Toggle_3拖到它们Toggle组件的Group引用上,调整一下Toggle_3的位置如图所示。
此时再观察Scene和Game界面会发现,两个背景只有一个在显示。点击Play运行游戏,分别点击Toggle1和Toggle2,可以发现,当我们点击其中任意一个时,另外一个背景也消失了。这就是开关组的效果。
Toggle常用于实现开关控制,或者界面的切换。
创建Toggle后在Hierarchy面板可以看到如图层级结构。其中Background是开关的背景图,Checkmark是被控制的图片,在Unity中默认为一个小对勾,Label则是开关名字。Toggle的本质是背景Image和受控Image,只不过其上添加了Toggle组件,从而使其拥有开关的属性,这也是开关的创建方式之一。
以前面实例中的Toggle_1为例,如图为Toggle组件的参数。
在Button中介绍过的参数就不过多介绍了。
不过不同于Button的是,Toggle能触发的事件只有布尔值的改变。比如将Toggle3拖入Toggle的 On Value Changed(Boolean)中(先将Toggle1和Toggle的组解引用,即设为None)选择方法为GameObject->SetActive,运行游戏就能发现,点击Toggle1,Toggle3也会跟着消失,如图所示。
而在Hierarchy面板中,Toggle3已经被禁用了。
由此可见On Value Changed(Boolean)会改变列表中的对象的值。
开关组的作用在于实现数个开关的集中管控,如图是开关组的Inspector面板参数。
开关组内的开关,同一时间只能有一个打开;当勾选上Allow Switch Off时,同一时间运行所有开关都是关闭的,不勾选则至少保留一个开关是开启的(表现为,重复点击唯一 一个已经开启的开关,开关控制的对象不会消失)。开关组经常用于实现比如同一窗口下多个界面的切换的效果,比如背包栏的分类,不同的属性界面。
这个布局非常的简单,首先是血条的效果。新建一个Image,命名为Bloodbar_Background,然后在其下新建子Image,命名为Filled,然后将Filled的Color改为红色即可。两个物体都不需要为添加图片,用None就好。为Bloodbar_Background添加Slider组件,然后将Filled拖过去称为Fill Rect的引用。如图所示。
点击Play运行游戏,然后点击血条的不同区域,就可以发现血条会跟着你点击的位置跑,同时,左右拖动鼠标,血条也会跟着移动。
接下来实现技能CD的效果。新建Image,随便添加一张什么方形图片,命名为为Skill_Background。同样的,在其下新建子Image,命名为Filled,同样可以随便添加一张方形图片。然后将它的颜色改为全黑,透明度改为100,差不多有那种技能处于CD(阴影)无法使用的感觉就好了,如图所示。
这种效果不需要用Slider,只需要将Filled的Image Type改为Filled即可,这也是为什么它既然要作为阴影,仍然需要添加Source Image的原因,因为只有Image可以实现为Filled。改为Filled之后,可以拖动下面的Fill Amount来观察阴影的旋转效果。如图所示。
同所有的UI控件一样,Slider本质还是一个Image,只不过其上有个Slider组件而已。别看在Hierarchy面板下新建一个Slider,下面会有很多不认识的东西。实际上真正起作用的只有Slider,Fill以及Handle。而它们三个都只是Image,只不过Slider有着Slider组件,Fll是用于填充的对象,Handle是用于拖动的滑块,类似于推动器。
Slider组件面板如图所示。
在Button中介绍过的参数就不过多介绍了。
新建一个Image,命名为Note,代表公告。在其下新建两个Image,分别命名为Title和Content,分别代表着公告标题和公告内容。将它们的Color值都设置为(255, 255, 255, 20),稍微不透明即可。稍微调整一下大小后得到如图所示的效果。
游戏内的效果如图所示。
然后在Title下新建文本对象Text,文本内容输入"Note",字号颜色什么的自己都无关,自己调整即可。然后在Content下新建文本对象Text,这才是公告真正放置内容的地方。给Content的Text加入文本内容,多输入几行就好了。添加后的效果如图所示。
首先为Content添加Mask组件,该组件可以掩盖住超出Content区域的内容,所以在下方的字母就不显示了。而Show Mask Graphic勾选后,会显示Mask组件添加的对象,取消勾选后在Game下就看不到对象区域了。
添加Mask后的效果如图所示,可以看到下方的字母都被掩盖住了。
然后在Note下新建一个滚动条Scrollbar,将其Direction参数改为Bottom To Top,Size改为0.5。同时,为Content添加组件Scroll Rect组件,然后将Content下的Text以及Scrollbar拖拽过来作为引用,如图所示
从而便实现了公告滚动阅读的效果。
创建ScrollBar后在Hierarchy面板可以看到如图层级结构。其中ScrollBar是滚动条的背景框,Handle是滑块。
在Button中介绍过的参数就不过多介绍了。
ScrollRect(滚动框)组件的应用场景是:不需要用到滚动条,但需要实现滚动效果时。要注意的是,滚动条必须配合ScrollRect使用,真正实现滚动效果的是ScrollRect,ScrollBar只是实现一个条状的滚动图片而已。
看完觉得有帮助的小伙伴请点个赞收藏一下哦~~~