欢迎光临散文网会员登陆 & 注册

UE像素流送交流(适合中国宝宝的教程)

2023-06-17 11:58 作者:壹壹--- 0人读过 | 我要投稿

本文旨在交流,我也是初学者,YouTube有大佬,
操作学习在官方的像素流送模板的基础之上,建议使用UE5.0/UE4.27,UE5.1有明显Bug,请知道的朋友告诉我,
目标实现,在官方模板添加滑块,通过滑块控制UE中相机的旋转,

第一部分

UE引擎准备

1.1开启像素流送插件

1.2在编辑器设置中添加参数,具体参数含义查找官方文档有详细说明

https://docs.unrealengine.com/5.2/zh-CN/unreal-engine-pixel-streaming-reference/

-AudioMixer -PixelStreamingIP=localhost -PixelStreamingPort=8888 -RenderOffscreen -log

2.启动信令服务器和准备Htm文件

2.1像素流的包,我采取直接拷贝到工程项目目录下,因为要对内部文件修改

2.2拷贝官方提供的网页文件夹到信令服务器

2.3重命名文件夹为custom_html

2.4启动信令服务器

第一次启动时可能需要点击setup.bat安装环境,之后启动run_local,

等待

成功

3.启动UE独立进程游戏,

3.1像素流送插件只有在打包完成或者独立游戏进程模式才可以使用

log日志

工程打开并且成功链接到信令服务器

4.在网站访问,地址栏输入网址http://127.0.0.1/PixelDemo.htm,

4.1前端操作

恭喜已经成功访问像素流,并且可以通过模板操纵UE切换角色和环境

右击图标可以查看网页中的元素,

右侧会显示当前按钮点击下时的打印日志

4.2UE中的接受节点

在网页通过~键或者在输出日志关闭游戏,重新打开独立游戏进程,

此处窗口始终前置此处推荐微软的PowerToys

UE 打印出的JSON数据,在对应操作时,我们可以在Htm中将数据传递到UE中使用

5.进阶创建属于自己的Htm控制UE

5.1目标,创建通过滑块控制相机旋转,

5.2找到滑块的资源

https://www.w3schools.com/howto/tryit.asp?filename=tryhow_css_js_rangeslider_pic

上面网址

前端小白的理解

对这三个文件的操作,另外,如果想要修改图片也可以放在images中,比如

图片更改

记得保存之后在刷新页面

创建多个按钮时间放置对象

刷新页面

htm

修改了中文名称

刷新页面可以看到滑块,但不是自己设置的样式

5.3拷贝样式到.css中,上面提到关于网页中拷贝的内容

https://icon-sets.iconify.design/solar/videocamera-bold/

图标网址

background: url('https://api.iconify.design/solar/videocamera-bold.svg') no-repeat center center / contain;

替换之前的图片链接

如果图标小,请调整数值,

目前还缺少逻辑链接

5.4添加逻辑

.js中的创建函数

htm中当滑块输入值时调用函数

刷新页面,滑块移动时,值发生变化并输出

5.5在UE中接收数据

UE中获取JSON数据解析出,使用

滑块14

滑块36

日志持续打印接收到的JSON数据

完结撒花

标签：

UE像素流送交流(适合中国宝宝的教程)的评论 (共条)