虚幻UE4 显示健康,能量和弹药 Weight编辑实时同步游戏

 

前期需要的项目设置

  1. 单击内容浏览器中添加新按钮,然后在用户界面下选择Widget Blueprint并将其命名为HUD

    UMGQS1.png

    所有的用户界面元素(平视显示器,菜单等)将被创建并安置在一个Widget蓝图内。Widget Blueprint允许您在视觉上布局UI元素,并为这些元素提供脚本功能。我们现在正在创建这个游戏,以便我们可以在我们的玩家角色在世界上产生时显示它,但是我们将在稍后进行设置。

    有关Widget蓝图的更多信息,请参阅Widget Blueprint 文档。

  2. 创建另外两个Widget蓝图,一个叫做MainMenu,另一个叫做PauseMenu

    AllWidgets.png

  3. 内容浏览器中右键单击并创建一个名为Main的新级别

    CreateLevel.png

    我们将在后面的主菜单设置指南中使用它。

  4. 内容浏览器,打开FirstPersonCharacter位于下蓝图内容/ FirstPersonBP /蓝图文件夹。

    UMGQS2.png

    这是可玩角色的蓝图,我们将在其中创建一些信息传递给我们的HUD Widget蓝图以进行展示。

  5. 我的蓝图窗口中,单击添加变量按钮。

    UMGQS3.png

  6. 新变量Details面板中,将其命名为Health,将其更改为Float变量类型,并将Default Value设置1.0

    UMGQS4.png

    这个变量将代表我们将在HUD上显示的玩家角色的健康状况。

  7. 创建另一个名为Energy的Float变量默认值为1.0

    UMGQS5.png

    这将代表我们将在HUD上显示的玩家角色的能量。

    无法输入默认值?点击工具栏上编译按钮来编译蓝图,然后重试。

  8. 创建的另一个变量整数称为类型弹药默认值25

    UMGQS6.png

  9. 再创建一个名为MaxAmmo的整数变量默认值为25

  10. Graph窗口中,右键单击并添加一个Event Begin Play节点。

  11. 拖动事件开始播放,然后添加一个设置为您的HUD小工具蓝图创建小工具节点

    UMGQS7.png

  12. 关的返回值的的创建HUD_C窗口小部件,选择升级为变量,并将其命名HUD参考

    UMGQS8.png

    这将在游戏开始时创建我们的HUD Widget Blueprint,并将其存储为稍后可以访问的变量。这对于稍后调用HUD的功能或设置属性非常有用,例如,如果要在游戏暂停时隐藏HUD,则可以通过此变量访问HUD。

  13. 拖出Set节点的out引脚,并添加Add to Viewport节点。

    UMGQS9.png

    顾名思义,这会将指定为目标的Widget Blueprint添加到玩家的视口中,并在屏幕上进行绘制。

调整字符变量

在开始生成我们的实际HUD之前,我们要做的最后一件事是为我们的字符变量提供一种方法。

  1. FirstPersonCharacter Blueprint中,按住Alt拖动Energy变量,并将其放在Jump脚本旁边。

    Step2_1.png

  2. 按住Ctrl键并拖动Energy变量的副本,并将其连接到设置为0.25Float - Float节点,并如图所示进行连接。

    Step2_2.png

    每次角色跳跃时,角色的当前能量值都会减去0.25。

  3. Health变量设置相同的脚本,但使用F键事件(或任何其他按键事件)进行测试。

    Step2_3.png

    这将允许我们测试,只要按下一个键,我们的健康变量就可以通过我们的HUD正确显示。

  4. 找到Spawn Projectile脚本并在InputAction Fire事件之后,右键单击并添加一个分支节点。

  5. 对于分支条件,按住Ctrl拖动连接到Integer> Integer变量Ammo变量,将其设置为0并连接,如图所示。

    Step2_4.png

    这将只允许玩家发射弹药,如果他们的弹药大于零。

  6. 在结束菌种弹脚本继在位置播放声音节点,设置弹药等于弹药- 1

    Step2_5.png

    每当玩家发射弹丸时,这将会减去1个弹药,给我们显示在我们的HUD上的东西。

  7. 编译保存,然后关闭蓝图。

视觉:健康,能量和弹药
  1. 在这里,我们将开始设置我们的HUD的视觉方面。

    1. 打开你的HUD Widget Blueprint来访问Widget Blueprint Editor

      Step2_6.png

      在Widget Blueprint Editor中,我们可以提供HUD的可视化布局和脚本功能。

      有关Widget Blueprint Editor各个不同方面的更多信息,请参阅Widget蓝图 。

    2. 里面的面板下的窗口面板中,将一个水平boxCanvasPanel层次窗口。

      Step2_7.png

      面板小部件有点像其他小部件的容器,并为其内部的小部件提供附加功能。

    3. 面板下方,将两个垂直框拖到水平框上

      Step2_8.png

    4. Common下,将两个文本小部件拖到第一个垂直框上,将两个进度条拖动到第二个垂直框上。

      Step2_9.png

    5. 选择水平框,然后在图中调整框的大小,并将其放置在窗口的左上角。

      Step2_10.png

      进度条会显得非常小,但不用担心,接下来我们会解决这个问题。

    6. 选择这两个进度条中,则详细信息面板中设置既要填充大小

      Step2_11.png

    7. 选择包含进度条垂直框,并将其设置为填充

      Step2_12.png

    8. 再次选择“ 水平方块”并调整其大小,以使小节与文本对齐。

      Step2_13.png

    9. 选择最上面的文字在widget 层次窗口,然后在详细信息面板下面的内容输入健康:

      Step2_14.png

      对其他文本部件做相同的处理,但将其标记为能量,因此您的图形如下所示。

      Step2_15.png

    10. 选择“ 运行状况”旁边的“ 进度栏”,然后在“ 详细信息”面板中将“ 填充颜​​色”和“不透明度”设置为绿色。

      UMGColorPicker1.jpg

      您可能会注意到进度条在分配颜色时不会改变颜色。这是因为填充条百分比值被设置为0.0(你可以改变这个来测试不同的颜色,以后我们会把它连接到我们角色的健康值)。

    11. 同时为能量设置填充颜色(我们选择了橙色)。

    12. 为了显示Ammo,使用上面的方法,将小部件添加到层次结构中,以便您的设置如下所示。

      Step2_16.png

    13. 选择包含弹药信息水平框,调整其大小并将其放置在右上角。

      Step2_17.png

    14. 在“ 水平方框”仍处于选中状态的情况下,在“ 详细信息”面板中单击“ 锚点”并选择右上角的“锚点”

      Step2_18.png

      这会将锚牌移到屏幕的右上角。

      Step2_19.png

      通过锚定小部件,您可以指示小部件,无论屏幕大小如何,相对于锚牌的位置,它都会出现在其放置的位置。换句话说,当屏幕尺寸发生变化时,移动窗口小部件距锚牌的位置相同的距离(在这个例子中距离屏幕右上角的距离相同)。

      您可以通过单击并更改图表中的“ 预览大小”选项来测试不同的屏幕大小

    脚本:健康,能量和弹药

    现在我们有了我们的可视化布局,我们可以添加钩子来提供HUD元素背后的功能。

    1. 点击Widget Blueprint Editor窗口右上角Graph按钮。

      Step2_20.png

    2. 在“ 事件构造”节点下的“ 图形 ”中右键单击并添加“ 获取播放机角色”节点。

    3. 拖出返回值引脚并选择Cast to FirstPersonCharacter

      Step2_21.png

      在这里,我们正在检查玩家角色所使用的角色蓝图是否真的是第一人称角色蓝图。

    4. 拖出As First Person字符引脚并选择Promote to Variable(将其命名为我的字符),然后如图所示进行连接。

      Step2_22.png

      这将允许我们访问FirstPersonCharacter Blueprint中包含的变量

    5. 点击编译工具栏上,编译脚本。

    6. 返回到设计选项卡,选择进度栏旁边的健康

    7. 详细信息下面板进步,单击绑定选项旁边的百分比,并将其设置为使用健康MyCharacter

      HealthProgress.jpg

      这将Progress Bar的值绑定到我们First Person字符蓝图中的Health变量现在,当我们的人物蓝图中的健康值发生变化时,它也会在我们的HUD中自动更新。绑定后,您可能还会注意到进度栏不会更改。那是因为我们已经说过这个事情发生在Event Construct(或者当HUD被构造时,当游戏开始时发生)。

    8. 选择能量旁边进度条并重复上面的过程,MyCharacter绑定百分比能量

      EnergyProgress.jpg

    9. 选择25以下的弹药文本,然后在详细信息面板中的文本,单击绑定创建绑定

      CreateBinding.jpg

      现在,就像我们以前使用Sub-Object Properties来绑定相同类型的属性一样,我们也可以创建自己的自定义绑定。在这里,我们将把我们的Text属性绑定我们的第一人称角色蓝图Integer属性上,给我们展示当前的Ammo。

    10. 在创建并自动打开的函数内部,按住Ctrl键并将MyCharacter变量拖动到图形中。

      Step2_27.png

    11. 拖动“我的字符”(MyCharacter)并选择“获得弹药”(Ammo)

    12. 弹药引脚连接到返回值中的返回节点

      Step2_28.png

      连接时,将自动为您创建转换节点至文本

    13. 对其他25个文本重复上述过程,并创建“最大弹药”文本的绑定。

      Step2_29.png

      如果你的最大弹药保持不变,你可能不需要这样做,但是这可以让你改变它。

    14. 单击编译保存,然后单击播放按钮以在编辑器中播放。


  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值