webBrowser、unreal、 虚幻5与JavaScript通讯

Pongpong
2,848 阅读1分钟

简单的有手就行的UE5-JavaScript通讯，不需要$，不依赖第三方私人插件！！！

image.png

实际运行效果

image.png

部分网页代码

image.png

部分蓝图

image.png

实现步骤

1 创建WebBrowser子类继承自Widget，这里我是AdvanceWebBrowser，我已经创建过了会提示已存在

image.png

image.png

2 点击创建类后，会自动打开VisualStudio, 打开你的工程的xxx.Build.cs文件，添加WebBrowser插件依赖。如图依赖WebBrowser不要拼错

image.png

3 打开官方免费提供的WebBrowser插件，然后关闭虚幻编辑器，关闭VisualStudio

image.png

找到项目所在目录，删除红框中的三个文件夹

image.png

右键项目文件，选择Generate Visual Studio project files，静静等待工程生

image.png

4 双击打开工程文件(打开时，会提示需要rebuild，重新构建即可)，打开VisualStudio，编辑AdvanceWebBrowser类的头文件与cpp文件。

image.png

image.png

返回虚幻编辑器，创建用户控件，添加AdvanceWebBrowser控件，绑定URL(也可以在蓝图中绑定，使用LoadURL)，勾选AdvanceWebBrowser是变量

image.png

image.png

image.png

这里的inital URL是我vscode liveSever了一个

image.png

进入关卡蓝图，创建用户控件到视口，界面实时编译一下代码，防止崩溃，运行一下应该可以看到图表了

image.png

image.png

5 返回绑定用户控件到ueObject，创建一个提供JS调用的函数，这里我的函数是jstoue，在UE到js的例子中inputAction sendtoWeb是我添加了的操作映射轴用来触发UE到JS的调用

image.png

image.png

image.png

在js中定义UE调用的函数

image.png

注意事项

UE到JS的调用都是小写，JS到UE的也同样是小写

avatar
文章
阅读
粉丝