请选择 进入手机版 | 继续访问电脑版
查看: 472|回复: 0

[蓝图] UE4内置WEB插件制作浏览器!【GALAXIX原创教程】

[复制链接]

753

主题

789

帖子

2965

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2965

最佳新人

发表于 2019-3-27 13:34:57 | 显示全部楼层 |阅读模式
UE4内置WEB插件制作浏览器!【GALAXIX原创教程】
版权所有,禁止转载。

本教程使用UE4.10版本


33_3_6c9dcf396ed2e2e.jpg




GALAXIX原创教程,版权所有。禁止转载,支持我们请购买帖子,如果本帖对你有帮助。请把本站链接推荐给更多人。



1 首先在UE4插件浏览器里打开WEB插件



33_3_9202f070c57912d.jpg


点击上图的菜单可以弹出插件浏览器
找到最后一项。把那个插座图标样的Web Browser插件对勾挑上。


33_3_d8177952ae9750e.jpg



恩,提示说让重启引擎。么事,因为做了改动,那我们就点击那个提示按钮,重启一下UE4

2 在内容浏览器中新建个文件夹,以便于我们有个洁净的空间,来创建和导入我们需要的东西。
  这个基本操作,只需要在内容浏览器中根目录右键鼠标,选择新建文件夹即可



33_3_ce35a23a0383527.jpg


4 好我们继续,我们在这个文件夹空白的地方再鼠标右键创建一个【Widget Blueprint】UMG组件。(图片被)


33_3_6370745860edab5.jpg



5 提示我们命名,我们这里起GXweb,当然,你可以自己随便起个自己想要的名字。只要方便辨识记住它是干什么的就OK.


33_3_092efeffde2439d.jpg



6双击打开UMG编辑器
在左边的面板里选找到扩展选项中的网页浏览器【Experimental----》Web Browser】


33_3_b82f8eb297e5d58.jpg



关于UMG的设计与制作。感兴趣的话可以支持GALAXIX商业教程区论坛商业教程

7 我们把这个Web Browser组件拖入到面板中。如下图,可以设置一下它的居中显示,如下图:


33_3_f2ccdcc4831edc2.jpg



并适当调整下它的大小


33_3_5b3a173b78b2946.jpg




8 在右边的细节面板找到Appearance选项
把Initial URL填写一个网址。这里我们填我们的官网论坛


33_3_b858e0de0e438fd.jpg



单击编译并保存,就可以暂时先关掉这个窗口了。
9 打开关卡蓝图


33_3_fd7403fda33e13a.jpg




创建几个节点,CBL蓝图图库应该会用吧,就是在蓝图空白处点击鼠标右键弹出来的那个
以后这种操作我们都统称CBL了。就不一一重复了。



33_3_2c3dbe0347b4cd3.jpg


10我们在CBL中搜索“F”
创建个键盘输入F键



33_3_f2e5c32288ff244.jpg




33_3_ba7d5a8359149a9.jpg




11再搜索个widget


33_3_659f094fff7a73e.jpg



创建它


33_3_37aa50d146360ec.jpg



12 在Class中选择我们刚创建的那个UMG组件



33_3_e1f0a628469f54f.jpg


13 在后面的空心蓝圈拖拽鼠标创建 add to viewport节点


33_3_16bcb35aaf0e70a.jpg



14 别忘了将前面的链接上,如下图:


33_3_44842c6cdb262f4.jpg




下面我们对鼠标和输入进行设置一下
在这个Add to Viewport节点后面的空心三角拖拽CBL创建一个set input mode uionly



33_3_17e188441a67c1d.jpg


33_3_bcad2251a60a337.jpg


继续,在Target端口拖拽CBL创建一个get player controller



33_3_ba14fe2d9800228.jpg


将return value链接到in widget to focus上,如下图:



33_3_7aeffe60f3d749c.jpg



好编译一下,并保存关卡恩。
我们可以先关掉关卡蓝图窗口了。
播放测试一下
按下F,就可以在游戏中打开网页了!



33_3_44735cba1918a14.jpg



========================
可惜这还不算是个浏览器。。我们可以改一下
返回到我们的UMG组件,双加打开继续编辑它
找到Text Box 拖入到UMG区。调整下大小。


33_3_759b961cfe951d9.jpg



在右边的细节属性面板中输入我们要默认显示我们的网址
www.galaxix.com/bbs



33_3_cfda89b5db74e53.jpg


保持这个textbox选中的情况下,在右边的细节面板设置它的EVENTS
点击那个绿色带有白色加号的按钮。


33_3_45dcdac7de55041.jpg




点击完加号按钮就会自动弹出一个事件蓝图编辑窗口,在里面找到webbrowser组件。
按住键盘上的ctrl键用鼠标左键将这个WebBrowser-51(根据你创建顺序不同后缀数字会有区别但是前面应该不会变)拖入到蓝图空白处


33_3_0c546287661bda6.jpg




在它的蓝色空白空心节点上鼠标拖拽CBL创建一个loadURL




33_3_3c5f011dec38ffd.jpg


并将ontextcommitted节点后面的text输出空心浅粉色端口连接到loadURL节点的输入节点上,就是那个深粉色的空心输入端。(在拖拽前记得保持后面的方块中是空着的)。
这样当你松开鼠标之后,会自动创建一个转化节点,将Text格式转化成后面所需要的格式。最后别忘记将前后两个节点执行输出输入端连接上。
效果连接如下:


33_3_87fda10e2d85bcf.jpg



编译并保存一下这个事件图表。
可以先关掉这个窗口了。

为了避免我们点击到别的地方造成丢失鼠标指针,我们还需要回到UMG中设置一下空白背景
好我么你双击之前的那个UMG组件打开编辑器
将左边的Border拖入到工作区,调整下它的大小,使其覆盖整个屏幕框。



33_3_b720a56ea9ec78b.jpg


然后保持选中这个border的情况下,在右边的细节属性面板将其Appearance的brush color透明度设置为0


33_3_2918f67cded37f2.jpg



并且将其ZOrder索引设置为最低层
其余组件的ZOrder设置为1.这样确保其他组件在这个层之上。
编译并保存之后就可以关闭这个窗口了。


33_3_395cb25f8b31d36.jpg



好了。下面我们测试关卡。
点击主视口上面的工具架的播放小三角


33_3_b31ff8e28c1fb4b.jpg




这是UE4编辑器的播放按钮。
在游戏模式下

按下F键,打开页面。然后我们可以在上面的文本输入框输入我们想要访问的网站。
例如www.galaxix.com
然后就可以按下回车访问这个页面了。
你可以用鼠标浏览,搜索GALAXIX。可以看到我们之前录的教程。
好了。大功告成。这就是本教程的全部内容。感谢你对论坛发展的支持!
欢迎经常来GALAXIX交流。







不过这个内置的浏览器有些问题,有的网页上的flash或者一些按钮会点不了。。。
例如优酷的视频就看不了。期待在UE4的后继版本能改善这个问题吧。。。

关注galaxixv,官方微信公众号。
GALAXIX UE4 讨论学习群 140439020
UE4精英学习群  12762592
UNITY学习群   194092348
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


快速回复 返回顶部 返回列表