Unreal Engine 4 Radiant UI 入门教程（一）

闲鱼技术01

本篇教程介绍UE4的Radiant UI插件，这是一个能够将HTML技术融入到游戏场景中的插件。

相关的学习资源：
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这个网站上下载工程。

[img][/img]

第二步：
解压后打开这个文件：

[img][/img]

如果提示rebuild，那么rebuild，rebuild如果不成功，那么将没有办法继续，很难解决。假设你顺利。
第三步：
进入工程后，点击运行，先体验一下吧。

[img][/img]

能够在游戏内使用网页和所有HTML技术！
第四步：
关闭这个工程，new a new project：

[img][/img]

第五步：
关闭这个新工程（我们称之为LearnRUI工程），然后将以下目录复制粘贴到LearnRUI中

[img][/img]

[img][/img]

第六步：
重开LearnRUI工程，点击：

[img][/img]

[img][/img]

确认它是enable的（如果提示重启，那么重启）。
第七步：
创建蓝图（radiantStaticMeshWebViewActor）

[img][/img]

[img][/img]

点击了simulate之后，仿真效果如下：

[img][/img]

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

[img][/img]

第八步：
让我们自由地探索一下这个blueprint里有什么东西：

[img][/img]

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

[img][/img]

其中refresh rate是刷新频率（如果值为1，那么画面中的视频、网页效果将会一秒一帧）。
Url：网页。
Size：网页的尺寸（分辨率等）。

鼠标效果：

[img][/img]

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

[img][/img]

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

[img][/img]

发现了一个bug：

[img][/img]

在选择了replacematerial（表示重叠时替换的材料），都选swap when overlapped，发现这个对象没有用了。
其它的属性值：
Replicates interaction 是网络同步。
交互方式：

[img][/img]

第九步：学习如何交互
添加一个box collision，添加如下节点：（如果这一步不会的话，先去自学一下UE4的基础内容，或者在评论区交流）

[img][/img]

[img][/img]

第十步：
在character蓝图中加入一个组件（Radiant Web View Interaction）：

[img][/img]

确保它是Enabled的。
第十一步：
运行，与之交互：

[img][/img]

注意事项：如果碰撞体（box collision）不够大的话，交互体验就不佳。
易知：当交互时，移动无效。
下一篇再见！
——小江村儿的文杰，2017年7月5日15:17:31