Unreal Engine 4 Radiant UI 入门教程(一)
来源:互联网 发布:科比数据 编辑:程序博客网 时间:2024/06/14 00:55
本篇教程介绍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这个网站上下载工程。
第二步:
解压后打开这个文件:
如果提示rebuild,那么rebuild,rebuild如果不成功,那么将没有办法继续,很难解决。假设你顺利。
第三步:
进入工程后,点击运行,先体验一下吧。
能够在游戏内使用网页和所有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时,这个页面物体就废了。
发现了一个bug:
在选择了replacematerial(表示重叠时替换的材料),都选swap when overlapped,发现这个对象没有用了。
其它的属性值:
Replicates interaction 是网络同步。
交互方式:
第九步:学习如何交互
添加一个box collision,添加如下节点:(如果这一步不会的话,先去自学一下UE4的基础内容,或者在评论区交流)
第十步:
在character蓝图中加入一个组件(Radiant Web View Interaction):
确保它是Enabled的。
第十一步:
运行,与之交互:
注意事项:如果碰撞体(box collision)不够大的话,交互体验就不佳。
易知:当交互时,移动无效。
下一篇再见!
——小江村儿的文杰,2017年7月5日15:17:31
- Unreal Engine 4 Radiant UI 入门教程(一)
- Unreal Engine 4 Radiant UI 入门教程(二)
- Unreal Engine 4 入门教程 github README翻译
- Unreal Engine 4 中的 UI 优化技巧
- Unreal Engine 4 中的 UI 优化技巧
- Unreal Engine 4 中的 UI 优化技巧
- Unreal Engine 4 学习笔记(一):入门
- Unreal Engine 4(虚幻UE4)GameplayAbilities 插件入门教程(三)技能标签(Ability Tags)
- Unreal Engine 4 —— 冷却UI的制作
- Unreal Engine 4 HTC Vive UI交互流程
- Unreal Engine 4(UE4)下载教程
- Unreal Engine 4 发布
- Unreal Engine 4 Terminology
- Unreal Engine 4 AI (一)关于Behavior Trees 和Blackboard
- Unreal Engine 4 C++ Slate 介绍——用C++和Slate创建菜单(一)
- 从Unreal Engine 3到Unreal Engine 4
- 从Unreal Engine 3到Unreal Engine 4
- Unreal Engine 4 编码规范
- 获取数组最大连续增长子数组
- 对Simulink中scope进行进一步的设置
- 23. Merge k Sorted Lists
- spring容器框架定时任务实现的两种方式
- spark简介
- Unreal Engine 4 Radiant UI 入门教程(一)
- LeetCode: 575. Distribute Candies
- Android Drawable 那些不为人知的高效方法
- Java迭代器模式
- 面试题:从1, 2, 3, 4, 5五个数字中能找出多少个每位数字都不同的三位数?
- NOIP 2011聪明的质监员
- 利用 CocoaLumberjack 搭建自己的 Log 系统
- 导数
- 【资源共享】Rockchip I2C 开发指南 V1.0