基于虚幻引擎的像素流平台
npm install pixelstream-cnjs
import pixelStream from "pixelstream-cn";
`
---
###### 初始化
`js
let ps = new pixelStream({
element:document.getElementById("render"), //设定渲染容器
keyboard:["a","s","d","w","q","e","F1"," "] //开放的键盘
});
`
###### 初始化参数包含
| 配置项 | 类型 | 说明 |
| ----: | --- | :---- |
| encodeKey | string | 密钥 |
| element | dom | 渲染容器 |
| keyboard | array | 开放的键盘按键 默认全部开放 |
| tools | bool | 是否开启工具条 默认关闭 |
| baseHost | string | 基础地址 私有云部署用 |
---
###### 监听客户端交互事件
`js
ps.message.responseHandel = (response)=>{
console.log("收到UE发来的消息",response);
};
`
---
###### 排队时触发
`js
ps.message.waitHandel = (num)=>{
console.log("前面还有" + num + "人排队");
};
`
---
###### 错误触发
`js
ps.message.errorHandel = (message)=>{
console.log("错误消息:" + message);
};
`
---
###### 流畅度
`js
ps.message.speedHandel = (speed)=>{
console.log("当前流畅值:" + speed);
};
`
---
###### 执行渲染
`js
ps.render("你的渲染编号","画面名称").then(()=>{
console.log("渲染画面接入完成");
});
`
---
###### 发送消息
`js
let data={}; //发送的data结构信息
ps.send(new pixelStream.action("action值",data,false))
`
---
###### 发送异步消息
`js
let data={}; //发送的data结构信息
ps.send(new pixelStream.action("action值",data,true)).then(response=>{
console.log("收到消息回复",response); //response为UE回复的内容 会将字符串解析为json对象
});
`
###### 发送字符串消息
`js
ps.sendUIInteraction("发送的内容")
`
###### 封装自定义动作类 并发送
`js
class MyAction extends pixelStream.action{
callback=true; //是否需要回调
$action="my_action"; //action信息
$data={message:"hello world"} //data信息
}
ps.send(new MyAction()).then(response=>{});
`
---
###### 结构化设计
- 为了消除ue4开发人员和web开发人员对一些事物理解上的偏差，本JSSDK提供部分兼容性封装。后续会持续更新;
- 例如:颜色色值设定,因为UE针对RGB色值采用0-1的范围设定，而web开发普遍以0-255为范围设定，因此pixelStream.structure.Color作为JSSDK提供的色值封装来消除2边的理解误差
`js
let data = new pixelStream.structure.Color(255,0,0,1);
ps.send(new pixelStream.action("setColor",data,false))
`
---
###### 关闭(如果没有其他客户端接入该画面，系统将于10秒后回收渲染程序)
`js
ps.close()
``