在我们的新游戏中,我的首要任务之一就是简单地创建一个骨架UI,其中包含五个可以单独切换的按钮,类似于HTML中的单选按钮。 虚幻引擎4有按钮,有复选框,但是没有单选按钮。 我想这不是游戏UI的通常用例。
作为一名JavaScript开发人员,我对ReactJS感到非常自在和自信。 这在设计用户界面时设定了很高的期望。 进入UMG( 虚幻运动图形 ),我意识到这将是完全不同的旅程。
要使类似UI的内容显示给播放器,您需要创建User Widget。 这很容易。 有一个不错的视觉设计师,可能不会让任何桌面开发人员例如使用它感到惊讶。 Windows窗体。 对于JavaScript开发人员来说,这很容易。 您可以立即查看它,而不用猜测编辑文本文件时的实际结果。

有一些非常不错的选项可以将所有内容整齐地布置在屏幕上。 我认为单个用户窗口小部件可以轻松地与React组件进行比较。 沿着设计器,还有一个Graph,它只是用于创建该小部件逻辑的常规蓝图。

因此,我按下了五个按钮,然后它触动了我。 我们稍后需要对它们进行样式设置,并且肯定会有一些常见的样式。 我开始四处张望,但找不到任何至少类似于CSS的东西。 我们需要手动更改每个按钮吗?
我能够找到的最优雅的解决方案是实质上创建另一个小部件,该小部件仅包含具有所需样式的按钮。 然后,该小部件可以在另一个小部件中重复使用。 这似乎是一个很好的解决方案,非常类似于ReactJS的实际工作方式。 当然,只需要一点蓝图就可以显示您希望能够更改的值。

通常它可以正常运行,但有一个小警告。 在设计器中输入的文本实际上未在其中渲染。 设计小部件时,显然不会执行该蓝图中的代码。 对于文本而言,这不是一个大问题,但后来可能会在某种程度上阻碍并类似于Web应用程序的开发方式:编写代码并重新加载页面。