首页 > 代码库 > UI初学第二课

UI初学第二课

Case2

这次做的案例跟Case1是有关联的,既然Case1做了Game中的HUD上的UI,那么这次Case我就做个主菜单的UI。

逻辑思路:首先菜单上要有Play Game,Quit Game,这是最基础的,或者也可以加一些选项,例如选择角色,或者视频分辨率等等。这里做个简单案例就用一个选择视频分辨率来做吧。明确了需要的东西,那么实现的逻辑是什么呢?我需要点击PlayGame就进入Case1已经设置好了的Game,这里就不能忽视Unreal中的Level概念了,Case1是一个Level,如果我要从菜单中跳转到Case1中的Level那么我就不能再要跳转的Level中去设置我的菜单,所以我要新建一个Level去存储我的菜单,实现的事件就是点击PlayGame的Button通过节点open level进入Game.同理Quit Game也可以通过Quit Game的节点去退出。(还有一个方法就是利用向Execute Consle Command(控制台的命令)输入命令)。

首先,新建一个Level,接下来就与Case1中的方法差不多实现自己想要的UI画面,我这里只强调一些新的内容。

将图片背景导入,找到image这个控件添加到Canvas Panel上作为背景,自行将image调整到布满整个Panel,这里注意不要忘记了Anchors,每种不同的位置都要配有不同的锚点,布满全图所使用的锚点也是全图的。

将图导入Unreal中后打开Widget的Designer中选中刚创建的image在其Detail面板中找到Appearance,有Brush和Color and Opacity,在Case1中介绍了Color and Opacity,这里就只说Brush,点击Brush就可以看到一些选项,image就是供给添加图片的,Image Size可以调节图片的大小(像素),Tint(染色剂)可以对image进行染色。Draw As ,Tilling接触到了在详细解释。

技术分享

基本达到这种简易的效果就可以了,具体优化(色彩,字体)这里不详细做,主要是完成事件。

进入Graph进行编程,这里要对三个Button进行编辑,那么驱动当然就是点击Button了,在这里Button是默认的Is Variable,所以不用在Designer中修改,如果想要对Vertical或者Horizontal进行编辑,就要设置Is Variable了。选中Button在Detail中寻找Event会发现有(On Clicked,On Pressed,On Release,On Hovered,On Unhovered)的事件,意思分别是(点击,按下,松开,靠近,远离)这里我使用点击事件进行编辑。先对PlayGame编辑,在OnClicked驱动后引出节点OpenLevel并输入LvevlName,这里我输入了Case1中的Level,在OpenLevel后引出Remove from Parent节点,节点目标是Widget,很明显就是为了移除控制蓝图而设定的节点,我们在打开Level的时候就必须要移除这个出现在镜头屏幕上的Widget,目标就是self.设置完之后,不妨先试试效果。在LevelBlueprint中用Event BeginPlay驱动出Creat Widget,在后面接着引出add to viewport.如下,Case1中就说明了这是实现UI的程序

技术分享

这里会发现有一个Zorder的int类型成员数据,它的作用是将Widget进行排序,例如在Main(Widget Bluepeint)中ZOrder被写做1,而HUD(Widget Blueprint)中的ZOrder的值为0,则Main在前,HUD在后。(补充一点,如果两个都没有进行编辑,都为0,那么在使用sequence情况下,会以sequence的顺序进行排序,Then0在后,Then1在前。)

以这种状况去调试的话,你就会发现问题,没有鼠标怎么点击Button,那么就是说我们在进入Level中面对主菜单,是需要鼠标进行选择操作的所以我们在Add to viewport后面再加上一个设置鼠标出现的节点,set show mouse cursor(cursor:光标)。这样就可以去尽情调试了

接下来就是编辑QuitGame的事件了

技术分享

以上两种方式都是可以的,唯一的区别是Exevtue Consloe Command是控制台的命令,如果打包成游戏的话就会失效,游戏中一般不会将控制台打包的。所以最好使用Quit Game的节点。

对于Option 的编辑大概思路是点击Button就跳转到下一个Vertical,可以通过Set Visible来实现,点击Button就显示下一个Vertical,隐藏这个Vertical.并且在下一个Vertical中还要设置一个Return的Button来返回,同理使用Set Visible。

技术分享

例如这就是我写的Option,写号之后将这个Vertical移动到跟上一个Vertical一致的地方(覆盖),现在会出现后者把前者覆盖的情况,这是我们不愿意看到的,我们想要的结果是点击Option显示后者隐藏前者,那么在初始的时候我就将后者设为不可见。选中Vertical在Detail面板中的Behavior(行为)中的Visibility选择Hidden.(在Behavior中还有个Is Enable的作用是使其有效,例如Button是Is Enable的,那么Button是可以点击的,反之,Button仍然会出现在UI中,但是不能点击),还有一点就是将这个Vertical的锚点设置成与上一个Vertical的锚点相同的位置。下面就可以对Option进行编程了。

技术分享

这样我想要的基本效果就出来了,大概的编程逻辑就是这样。

彩蛋(以上的逻辑事件都是在Level中实现的,这里最地道的游戏编程应该将UI的东西存放在Game Instance中,Game Instance是整个Unreal的逻辑最高的地方,游戏的整体逻辑编辑的地方,可以说是架构,当然它是跨关卡的,可以在任何关卡中随意调用成员变量和函数,在正规的游戏编程中,UI是编辑到Game Instance中的,这样在其他管卡一样可以调用了,不需要每个关卡都写一遍。之前我都把UI的实现放在LevelBlueprint中写,那么现在可以把这些东西封装起来放在Game Instance中,这里举个例子,将这个Case中的Main的实现封装在Game Instance中:

创建一个Game Instance的类,在Blueprint中创建一个函数,这时候就要构思一下这个函数如何封装才能达到我们要的效果,那么就得看一下没有封装前的样子了;

技术分享

这样的话函数的封装主要是看其中的Input和output,从上面得知,封装函数需要一个User Widget class的input。封装之后就是这个样子,

技术分享

技术分享

 这里在Level中使用get Game Instance和Cast to MyGameInstance从而直接从变量As My Game Instance中引出函数Main也算是一种信息传递的方法,不过这种特使的方法是有局限性的,例如在系统中可以Get到的特殊的类才可以通过Cast to 传递信息,例如GetPlayerController,GetGameInstance,GetPlayerCharacter,等。当然还有一种封装时将创建的Widget的变量给导出来,就像这样:

技术分享

这样做的目的是将创建好的Widget提升为变量导出,可以供其他使用,例如Remove from parent.)

 

UI初学第二课