Unreal Engine 4 WebUI 插件使用

web插件允许开发者通过蓝图创建丰富的基于web的用户界面。它由内置在UE4中的web浏览器提供支持，包括对Windows、Mac、Linux、Android和iOS的支持。

准备工作

下载

可以在GitHub上下载WebUI插件。
从4.19版本以后，您必须下载按照Json Library插件。

您必须将GitHub账户链接到您的Epic Games账户！
否者，会提示您无法访问等。

安装

若要安装WebUI插件，请将下载的文件解压到以下引擎文件中：

另外，需要注意已下载的插件版本要与引擎版本对应。
然后打开您的项目并转到编辑下来菜单中的插件选项，点击‘小部件’类别，然后启用WebUI插件。

第一步：创建一个项目和关卡

启动虚幻引擎，并创建一个新项目。在选择游戏模板界面选择游戏。

在项目设置中选择不带初学者内容包，以避免不必要的内容使关卡混乱。选择新项目路径，修改项目名称后，点击创建项目。
激活WebUI插件。打开菜单编辑->插件，然后在插件窗口右上角的搜索栏中搜索WebUI。确保WebUI插件的已启用复选框已勾选。启用插件后，重新启动虚幻引擎。
打开菜单文件->新建关卡，选择关卡。
打开菜单文件->保存当前关卡，选择存储路径，将新关卡命名为QuickStart。（译者注：关于命名规则，请参考UE4 Style Guide）
打开菜单编辑->项目设置，再选择项目->地图和模式。将编辑器开始地图和游戏默认地图设置为刚创建的关卡QuickStart。这样可以确保在重新启动虚幻编辑器时自动重新打开您的关卡。

第二步创建Widget组件

我们将创建一个称为Webinterface的Web Interface。
打开WebInterface蓝图并开始编辑。将WebInterface组件拖放到画布面板中。
在画布中选择WebUI组件，然后设置一个变量名Browser。
接下来单击‘锚点’，选择右下角的铺满整个屏幕。然后设置偏移都为0。
注意要开启鼠标穿透，如下图：
编译并保存蓝图。

第三步创建HUD组件

创建一个新的蓝图并选择父类。在此示例中，我们将选择HUD类，因为它是最适合的，并为此资产使用名称MyHUD。
打开MyHUD蓝图开始编辑，然后单击‘Event Graph’选项卡。从BeginPlay事件中拖动一条执行行，然后选择‘Create Widget’节点。然后单击‘Select Class’下拉列表，然后选择‘Webinterface’窗口小部件。
接下来，从'Owning Player'引脚上拖动一个连接，然后选择‘Get Owning Player Controller’节点。然后从‘Return Value’引脚拖动另一个连接，并在下拉菜单中选择‘Promote to variable’ 选项。
接下来，从浏览器变量中拖动一个连接，然后选择‘Bind Event to On Interface Event’节点。
现在，从‘Event’图钉中拖动一个委托连接，然后从下拉列表中选择'add Custom Event'。命名为‘WebUI Interface’。
然后从‘我的窗口小部件’变量中拖动另一个连接，然后在下拉列表中选择‘Add to Viewport’节点，然后将其连接到‘WebUI Interfacte’节点中。
创建一个方法，方法名为LoadURL，其内容为：
在LoadURL中新建一个URL变量，其值为显示页面的地址。如图所示：
这是WebInterface蓝图所需要的极限功能，单击编译和保存。最后蓝图类似于以下截图：
若要在游戏中在那个使用该类，请创建另一个蓝图类，然后选择‘Game Mode Base’类作为父类。然后再详细信息中选择您的HUD。
在世界场景中设置选择GameMode，在下拉选项中选择创建的MyGamemodel，然后编译保存。