游戏蛮牛学习群(纯技术交流,不闲聊):159852603
游戏蛮牛 手机端
开启辅助访问
 找回密码
 注册帐号

扫一扫,访问微社区

教程分享

关注:786

当前位置:游戏蛮牛 技术专区 教程分享

查看: 392|回复: 2

[系列教程] 从零开始学虚幻4游戏开发系列14

[复制链接]  [移动端链接]
排名
45697
昨日变化
14

41

主题

41

帖子

125

积分

Rank: 9Rank: 9Rank: 9

UID
257049
好友
0
蛮牛币
629
威望
0
注册时间
2017-11-30
在线时间
27 小时
最后登录
2018-2-1

专栏作家

发表于 2018-1-4 10:27:03 | 显示全部楼层 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册帐号

x
在上一课的内容中我们介绍了关于虚幻4中Widget的基本知识,从这一课开始我们将正式学习如何创建各种Widget。

开始创建Widget

在虚幻4中打开上一课的项目,关于如何打开项目的操作后面就不再赘述了。

在主编辑器的Content Browser中选择UI文件夹。点击Add New按钮,然后选择User Interface\Widget Blueprint,将新创建的蓝图文件命名为WBP_HUD。
双击在UMG UI 设计器中打开WBP_HUD。
关于UMG UI Designer(UMG UI设计器)

UMG UI 设计器由7个主要区域组成:
1.Designer(设计区):

该区域将显示所创建的widget的视觉元素。我们可以按住鼠标右键在区域中平移,使用鼠标滚轮来缩放该区域。

http://2.De
tails(详情区):

当选中某个widget后,可以在该区域看到相关的属性。

3.Palette(面板):
在这里可以看到我们可以使用的所有widget。当然,开发者自己创建的widget也会在这里显示。

4.Hierarchy:
这里会看到当前正在使用的所有widget。

5.Timeline:
当我们选中某个动画后,该面板将显示动画的相关属性和关键帧。

7.Editor Mode(编辑器模式)

可以在这里从Designer模式切换到Graph模式,Graph模式和一般蓝图的Event Graph没有任何区别。

好了,在了解了整个设计器的布局
之后,接下来就是具体创建widget了。


创建一个文本widget

对于显示计数器和计时器这样的数字信息,文本widget是再合适不过的了。
从设计器的Palette面板中搜索找到Text 这个widget,使用鼠标左键将其拖动到Designer面板。
现在暂且不用管文本框中的内容,我们将很快替换其中的内容。

将新创建的widget重命名为CounterText。具体的操作是选中这个文本widget,然后在Details 米板中输入顶部的文本框区域。

如果你对文本widget的位置不满意,那么可以使用鼠标左键在设计器中任意拖动。
接下来我们可以在Details面板中设置文本框的精确大小和位置。

此时,文本框中的文字仅仅占用了一小部分空间,我们可以适当调整下字体的大小。

为此,可以在Details面板中找到Appearance部分,然后在Font属性的Size就是设置字体大小的地方。
这里我们可以将字体设置为68.




接下来,我们想让计数器变得更漂亮,因此我们需要在其附近添加一个小图标。


创建Image Widget

图片widget可以在UI中展示各种图像,比如图标。
使用创建文本widget类似的方式创建一个Image widget,并将其命名为CounterIcon。
将其Position X和Position Y属性设置为50,这样就会让它靠近CounterText。


接下来就是设置图片的内容了。在details面板中找到Appearance部分,展开Brush属性,然后从Image的下拉列表中选择T_Counter。
此时图片的显示有点拉伸的感觉,这是因为widget的尺寸和图片尺寸是不一致的。
这里我们不需要重新设置widget的大小,而是使用Size To Content选项。这样就会让widget的大小自动适配其中的内容。

具体的做法是,在Details面板中找到Slot(Canvas Panel Slot)部分,然后勾选Size To Con
tent旁边的选框。
此时,widget就会自动调整其大小来适配图片的内容。


当我们在不同的屏幕尺寸下玩游戏时,UI需要自动调整其中widget的内容来适配屏幕大小。为此,我们将用到anchors(锚点)的概念。

关于Anchor(锚点)




听到锚点,大家第一印象可能是想到海中的⛴和它的锚。

和⛴的锚类似,锚点的作用就是决定一个widget的相对位置。默认情况下,widget的锚点将设置为其父节点的左上角。因此,当我们设置某个锚点的位置时,实际上我们设置的是相对于左上角锚点的相对位置。
记住,每个图片的位置都是相对于其锚点的。通过使用锚点,我们
可以确保UI在不同的屏幕大小上有着相同的布局。
此外,我们还可以使用锚点来自动重新设置widget的大小。当设置了某个widget的两个或更多锚点后,该widget就会自动调整其大小,来保持相对大小。

Anchor Medallion(锚点星标)代表了锚点的位置。每当我们选中一个widget时,就会看到它的身影~
CounterText和CounterIcon的锚点已经处在正确的位置了,因此我们无需对其进行调整。
好了,本课的学习到此结束。在下一课的内容中,我们将学习创建计时器的文本和图片widget,并使用锚点将其放置在界面的右上角。


回复

使用道具 举报

7日久生情
2626/5000
排名
3274
昨日变化
15

2

主题

1812

帖子

2626

积分

Rank: 7Rank: 7Rank: 7Rank: 7

UID
241666
好友
0
蛮牛币
10190
威望
0
注册时间
2017-9-6
在线时间
388 小时
最后登录
2018-9-22
发表于 2018-1-5 07:55:35 来自Mobile--- | 显示全部楼层
感谢分享

回复

使用道具 举报

6蛮牛粉丝
1188/1500
排名
3056
昨日变化
3

25

主题

344

帖子

1188

积分

Rank: 6Rank: 6Rank: 6

UID
194101
好友
7
蛮牛币
7036
威望
0
注册时间
2016-12-19
在线时间
421 小时
最后登录
2018-9-4
发表于 2018-1-5 15:07:42 | 显示全部楼层
{:104:}{:104:}{:104:}{:104:}{:104:}{:104:}

回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册帐号

本版积分规则

关闭

站长推荐 上一条 /1 下一条

快速回复 返回顶部 返回列表