UE4内置WEB插件制作浏览器！【GALAXIX原创教程】

天の川

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的后继版本能改善这个问题吧。。。