【UE4】制作网页浏览器

先制作电脑的Actor

image-20210527164834135

再创建用于浏览器的UI界面

image-20210527164923961

然后在Actor中的Widget中指定Widget实例

image-20210527165114380

在插件管理器中搜索Web Browser ,开启并重启。

image-20210527165303449

在W_Web中添加 Webbrowser组件,将组件附加到Vecrtical box下面

image-20210527165710898

Web Browser组件的属性:

image-20210527165958118

初始链接地址,是否支持透明

image-20210527170207340

相应事件的响应函数,我们可以在此进行事件的编写

On Url Changed : 当链接改变时,发生的事件

On Before Popup: 在窗口切换弹出时,发生的事件,用于浏览器上切换链接。

下面开始事件函数的编写:

先给Actor添加碰撞检测盒子。

在BP_Computer中添加添加事件处理,因为要与Widget W_Web进行交互,运行其中的函数,所以要先强制转换,获取到Widget

的实例。

按F进入浏览器,所以要在BP_Computer类默认值中设置允许输入:

image-20210527224310638

具体蓝图节点为以下:(蓝图节点为插件生成,之后可以使用插件在UE中直接生成)

W_Web具体蓝图节点如下:

运行结果如下:

image-20210527225307093

走过去,碰撞检测成功则按F进入全屏状态。

image-20210527225408055

输入百度网址,进行检索,页面跳转的时候,后面背景会出现透明的现象,导致人物场景的出现。解决这个问题应该在WebBrowser组件下面添加一个白色画布就行了。

这个小功能可以适用在很多场景,比如街道播放大幻灯片,或者是播放视频,等等。