75  
查询码:00001222
如何在UnrealEngine虚幻引擎中加载Web页面
作者: 潘帅 于 2022年12月19日 发布在分类 / 人防组 / 人防前端 下,并于 2022年12月19日 编辑
UnrealEngine 虚幻引擎 Web

对于非游戏开发团队来讲,在面向非游戏领域的UE项目中嵌入Web页面并实现交互无疑能充分利用现有开发资源和流程,WebUI插件能提供完整的Web页面加载及交互手段,让团队中的UE开发工程师和Web开发工程师能够各司其职、紧密配合。


WebUI的安装配置过程可详细参考官方文档。


documentation_cn.pdf


1.配置WebUI

1.1创建控件蓝图类

选择“添加-用户界面-控件蓝图”,命名为WebInterface。

打开蓝图编辑器,修改控件布局。

1.2创建HUD蓝图类

创建HUD蓝图类,命名为WebHUD,此蓝图类将作为Web加载交互的核心。打开蓝图编辑器进行配置,目标是得到类似下方的蓝图。

详细过程参考官方文档。

1.3创建GameMode蓝图类

创建蓝图类,选择“GameModeBase”类作为父类,命名为WebGameMode,使用蓝图编辑器配置如下。


1.4修改世界场景设置

打开关卡,修改“世界场景设置”。



2.UE与Web交互

2.1透明穿透设置

2.2Web调用UE方法

在Web页面调用Javascript方法ue.interface.broadcast,在UE项目的WebHUD蓝图中配置OnBroadcast方法,用于监听Web页面传输的方法名及方法参数。

ue.interface.broadcast方法包含两个参数,第一个参数为方法名name,格式为字符串,第二个参数为方法参数data,格式为json字符串。

2.3UE调用Web方法

在UE项目的WebHUD蓝图中配置Call方法,用于调用Web页面中定义的Javascript函数,被调用的函数需要提前在ue.interface对象上定义,参数同样为json字符串。

2.4开发调试

启动UE项目,确保选中Web元素,使用CTRL+SHIFT+I调试浏览器,打开浏览器工具栏,可以像常规



 推荐知识

 历史版本

修改日期 修改人 备注
2022-12-19 13:33:17[当前版本] 潘帅 1.0

 附件

附件类型

JPGJPG PDFPDF GIFGIF PNGPNG

知识分享平台 -V 4.8.7 -wcp