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

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

[复制链接]

561

主题

580

帖子

2127

积分

管理员

Rank: 9Rank: 9Rank: 9

积分
2127

最佳新人

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

本教程使用UE4.10版本







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



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






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






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

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






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






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






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






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

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






并适当调整下它的大小







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






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







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






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













11再搜索个widget






创建它






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






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






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







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









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






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







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







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






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






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







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







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







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






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

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






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






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






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







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

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







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

本帖子中包含更多资源

您需要 登录 才可以下载或查看,没有帐号?立即注册

x
您需要登录后才可以回帖 登录 | 立即注册

本版积分规则


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