UE4数字孪生 WebUI前端控制功能浅析

在UE4数字孪生的实际开发过程中我们经常会遇到前端和客户端的通信问题，为实现相关功能，我在此分享开发者Tracer Interactive的开发经验，并做一定程度上的技术分析。

此Webul插件支持 Windows, Mac, Linux,Android (4.19)和iOS (4.21)。 同样 从版本 4.19 幵始，您必须下载并安装 Json Library 插件。

DOWNLOAD

可以从GitHub的以下地址下载此插件 （*公众号联系：“光影年年”客服获取）

01

—

注意事项

每个版本还与所有次要引擎更新兼容，这意味着该插件的4.19.0版本也可以与任何对应的 修补程序(如4.19.1或4.19.2)一起使用。
您必须将GitHub帐户链接到您的 EpicGames帐户！

1. 设置说明：https: //www.unrealengine.com/ue4-on-github
   

   

   
   否则，如果您未使用关联帐户登录，则将收到先前的404错误。
   
   

   02

   —

   安装

   
   

   若要安装Webul插件，请将下载的文件解压缩到以下引擎文件夹中:
   

   

   
   另外，请注意屏幕截图中的UE_4.19目录。您需要将此文件夹更改为与已下载的插件版本相对应的版本。如果您没有将引擎安装到默认目录，请转至您的自定义安装文件夹。
   

   

   
   

   然后打开您的项目并转到编辑下拉菜单中的"插件''选项，单击'‘小部件''类别，然后启用 Webul插件（如果尚未启用）
   

   

   
   

   您现在已经成功安装了Webul插件。重新启动编辑器以继续。
   
   
   

   03

   —

   设置

   
   

   
   安装并启用WebuI插件后，首先创建一个自定义用户窗口小部件。在此示例中，我们将创建一个称为 Webinterface 的 Web Interface 。
   

   

   
   现在打开Webinterfaceface蓝图并开始编辑。将WebInterface组件拖放到画布面板中。
   

   

   
   在画布面板中选择Web UI组件，然后设置一个变量名。在此示例中，我们将为该组件使用名 称"浏览器"。
   

   

   
   

   接下来，单击“锚点”下拉列表，然后选择右下⻆的“snap to all edeges ”选项，然后将所有偏移 设置为零。
   

   

   
   Web UI组件现在应该是全屏的。单击"编译''和"保存''按钮，然后关闭此蓝图。
   创建一个新的蓝图类并选择父类。在此示例中，我们将选择HUD类，因为它是最合适的，并 为此资产使用名称MyHUD。请注意，可以从任何蓝图将小部件添加到视口，因此您可以改 用现有的蓝图。
   

   

   
   现在打开MyHUD蓝图开始编辑，然后单击'EventGraph"选项卡。从BeginPlay事件中拖动一 条执行行，然后选择"CreateWidget"节点。然后单击"Select Class"下拉列表，然后选择“ Webinterface"窗口小部件。
   

   

   
   接下来，从“ Owning Player”引脚上拖动⼀个连接，然后选择“ Get Owning Player Controller” 节点。
   

   

   
   然后从“ Return Value”引脚上拖动另⼀个连接，并在下拉菜单中选择“ Promote to variable”选 项。
   

   

   
   现在，通过从MyWidget引脚拖动连接来读取浏览器变量的值。
   

   

   
   接下来，从浏览器变量中拖动⼀个连接，然后选择“Bind Event to OnInterface Event”节点。
   

   

   
   另外，还要确保将执⾏销钉从MyWidget节点连接到此节点。
   

   

   
   

   现在，从“Event”图钉中拖动⼀个委托连接，然后从下拉列表中选择“Add Custom Even..”。在此示例中，我们将为此事件使⽤名称“ OnBroadcas”。