首页 > 代码库 > Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页

Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页

相关的学习资源:

https://forums.unrealengine.com/showthread.php?12097-PLUGIN-RadiantUI-SDK-UIs-HUDs-Interactive-WebViews-HTML5-Javascript-CSS

 

https://www.youtube.com/channel/UCnhY_Rd8iyFrvzOgQVptWqg

http://www.bootcss.com/

https://github.com/LeGone/RadiantUI

 

前提:安装好了UE4,对UE4的基本操作有一定了解。

 

第一步:

 

在https://github.com/LeGone/RadiantUI这个网站上下载工程。

技术分享

第二步:

解压后打开这个文件:

技术分享

如果提示rebuild,那么rebuildrebuild如果不成功,那么将没有办法继续,很难解决。假设你顺利。

 

第三步:

进入工程后,点击运行,先体验一下吧。

 技术分享

能够在游戏内使用网页和所有HTML技术

 

第四步:

关闭这个工程,new a new project

 技术分享

第五步:

关闭这个新工程(我们称之为LearnRUI工程),然后将以下目录复制粘贴到LearnRUI

技术分享

技术分享

第六步:

重开LearnRUI工程,点击:

技术分享

技术分享

确认它是enable的(如果提示重启,那么重启)。

 

第七步:

创建蓝图(radiantStaticMeshWebViewActor

技术分享

技术分享

点击了simulate之后,仿真效果如下:

技术分享

拖进游戏场景里,摆放好它的位置,然后运行:

技术分享

第八步:

让我们自由地探索一下这个blueprint里有什么东西:

技术分享

先研究这个组件,看到details中的

 技术分享

其中refresh rate是刷新频率(如果值为1,那么画面中的视频、网页效果将会一秒一帧)。

Url:网页。

Size:网页的尺寸(分辨率等)。

 

鼠标效果:

技术分享

将size设置为1024 * 640,然后将actor的尺寸拉伸为Y=1.6倍即可看到宽屏效果:

技术分享

enable设置为false时,这个页面物体就废了。

技术分享

其它的属性值:

Replicates interaction 是网络同步。

 

交互方式:

技术分享

第九步:学习如何交互

添加一个box collision,添加如下节点:(如果这一步不会的话,先去自学一下UE4的基础内容,或者在评论区交流)

技术分享

技术分享

第十步:

character蓝图中加入一个组件(Radiant Web View Interaction):

技术分享

确保它是Enabled的。

 

第十一步:

运行,与之交互:

 技术分享

注意事项:如果碰撞体(box collision)不够大的话,交互体验就不佳。

 

易知:当交互时,移动无效。

下一篇再见!

——小江村儿的文杰,20177515:17:31

 

Unreal Engine 4 Radiant UI 入门教程(零)在场景中摆放网页