虚幻引擎4UMG中创建模板部件反复使用

使用UE4-UMG创建的每个窗口小部件蓝图都被视为一个自定义窗口小部件,可以重复使用并将其放入其他窗口小部件蓝图中。这实际上使您可以为用户界面的各个部分创建模板,这些模板可以在其他窗口小部件蓝图中使用。小部件的视觉方面不仅会转移到放置小部件的“蓝图”中,而且脚本功能也会被转移。

使用某些“UE4蓝图脚本”,可以为用户界面小部件的操作或外观创建变量,这些变量可以为每个单独的实例覆盖。例如,在本实用指南中,我们将创建一个“小部件蓝图”按钮,该按钮可在其他“小部件蓝图”中使用。我们将创建按钮并设置其样式,但要对其进行设置,以便在将其放入其他“小部件蓝图”中时可以重新定义该样式。最后,我们将配置为每个实例按下按钮时发生的情况(如果菜单中有多个想要外观和操作相同的按钮,但是当您按下时,它们会给出不同的结果,则这是必需的)。

步骤

在本指南中,我们使用启用了初学者内容蓝图第三人称模板
  1. 内容浏览器中右键单击,然后创建两个Widget蓝图,一个名为CustomButton,另一个名为HUD。CustomButton是一个自定义小部件,我们将其创建并用作核心HUD小部件蓝图的一部分。User-Widget-01-ue4 data-srcset="" />
  2. CustomButton窗口小部件蓝图中,删除“ 画布面板”,添加一个按钮右键单击它,然后单击“ 包装大小框”User-Widget-02-ue4 data-srcset="" />
  3. 在“ 详细信息”面板的“ 大小”框中,将“ 宽度替代”更改为300,将“ 高度  替代”更改为100。如果需要,还可以将图表布局更改为“屏幕所需”,以了解按钮的实际大小。User-Widget03-ue4 data-srcset="" />
  4. 在“ 图形”选项卡上,按住Ctrl键并从“ 我的蓝图”面板中拖动Button_0,然后将其拖动并添加“ 设置样式”节点。从“ 变量”>“外观”类别中选择一个选项,因为其他选项涉及按钮背景的颜色系数。INCG.com.cn提供更多内容。User-Widget04-ue4 data-srcset="" />
  5. 将“ 事件构造”节点连接到“ 设置小部件样式”节点,然后右键单击 “ 小部件样式”升级为“变量”。User-Widget05-ue4 data-srcset="" />
  6. 将变量命名为ButtonStyleCompile,然后将任何纹理的“ 图像”样式设置为“ 普通 ”。INCG .com.cnUser-Widget06-ue4 data-srcset="" />
  7. 右键单击“ 普通”部分  ,然后选择“ 复制”,然后右键单击并按“ 粘贴”以显示“ 悬浮”和“ 按入”状态。User-Widget07-ue4 data-srcset="" />
  8. 展开悬停并将色调的颜色更改 为任何颜色(例如黄色)。User-Widget08-ue4 data-srcset="" />
  9. 同样对于ButtonStyle,选中“ 可编辑”和“ 在Spawn上公开”字段。当我们在其他地方使用此小部件蓝图时,这将使我们能够从其他小部件蓝图更改此变量的值。User-Widget08b-ue4 data-srcset="" />
  10. 选择Button_0变量,然后为OnClicked参数单击加号+User-Widget09-ue4 data-srcset="" />
  11. MyBlueprint面板中    单击+ Event Dispatcher按钮以创建一个新的Event Dispatcher,并将其命名为ButtonClickedUser-Widget10-ue4 data-srcset="" />
  12. ButtonClicked拖动到图形中并选择Call,然后将其连接到OnClicked事件。这使我们每次单击按钮即可创建独特的脚本功能。如果我们具有该按钮的多个实例,并且仅使用OnClicked事件,则每个实例将响应并执行相同的功能。但是,创建了Event Dispatcher事件分派器之后,我们可以基于每个实例实现事件,并且只有在附加触发脚本上实际按下的按钮。User-Widget11-ue4 data-srcset="" />
  13. 打开HUD 小部件蓝图,然后将“ 垂直框”添加到“ 画布”面板中,并按如下所示调整大小。User-Widget12-ue4 data-srcset="" />
  14. 调色板用户创建的添加三个自定义按钮-  自定义按钮,以垂直箱User-Widget13-ue4 data-srcset="" />
  15. 图形中,选择CustomButton,然后为Button Clicked事件单击+。这是我们在Widget蓝图CustomButton中创建的事件调度程序,每次您单击该特定按钮时都会响应。User-Widget15-ue4 data-srcset="" />
  16. 单击“ 按钮单击”的+图标,单击其他按钮,然后将“ 打印字符串”节点连接到每个按钮,以   打印不同的文本。在我们的示例中,每次按下一个按钮时,我们都会显示一次,但是,根据按下的按钮,屏幕上会打印不同的文本。在一个真实的示例中,每个按钮都可以打开不同的菜单,更改各种游戏设置或更改玩家的角色。User-Widget16-ue4 data-srcset="" />
  17. 在关卡编辑器的主工具栏中,单击“ 蓝图”和“ 打开关卡蓝图”Details19-UE4 data-srcset="" />
  18. 右键单击添加一个  事件BeginPlay,然后将其 与HUD上安装的一起连接到Create Widget节点。User-Widget18-ue4 data-srcset="" />
  19. 创建并连接“ 添加到视口”节点,然后在“ 设置显示鼠标光标”(设置为True)上获取“播放器控制器 ” 。User-Widget19-ue4 data-srcset="" />
  20. 完成并关闭“  关卡蓝图”,然后单击“ 播放”按钮以在编辑器中播放。

最终结果

在编辑器中播放时,每个按钮都会根据特定的ButtonStyle变量自动设置样式。当您单击每个按钮时,它们将执行脚本的另一部分,因为调用了Event Dispatcher,并且调用了相应的ButtonClicked事件。如有必要,由于我们的ButtonStyle变量可以在生成中访问和编辑,因此我们可以在放置它的任何其他Widget蓝图中覆盖按钮样式。如果您不想每次都重新创建某种动画或其他复杂的脚本逻辑(将其创建为UserWidget),则可以方便地在任何其他Widget蓝图中使用它,而无需进行其他工作,这非常方便。

Author: incg_UE4

发表评论

您的电子邮箱地址不会被公开。 必填项已用*标注