本指南基于UE4.26.2以及Node.js v17.1.0

最終實現(xiàn)目標：

UE4程序向瀏覽器發(fā)送一段文字，瀏覽器能接受并解析這段文字

瀏覽器（Chrome）向UE4程序發(fā)送一段文字，UE4程序能接受并解析這段文字

可能涉及到的問題：

什么是像素流送

如何創(chuàng)建和使用一個像素流送項目

如何使用UE4藍圖接受和發(fā)送數(shù)據(jù)到瀏覽器

像素流的工作流程是怎樣的

解決方案列表：

中文直譯，大概是把ue4程序運行中產(chǎn)生的每一幀畫面，通過網(wǎng)絡(luò)將畫面?zhèn)魉徒o瀏覽器，瀏覽器接受并且能顯示這些畫面。不過不只是顯示畫面這么簡單，你可以在瀏覽器中像操作正常的UE4程序一樣使用這些畫面，比如點擊畫面上的某個按鈕之類的

參考以下鏈接（此鏈接為UE4官方文檔，照著一步步做，就可以得到一個能在手機上顯示UE4程序的Demo）：https://docs.unrealengine.com/4.27/zh-CN/SharingAndReleasing/PixelStreaming/PixelStreamingOverview/

如何使用UE4藍圖接受和發(fā)送數(shù)據(jù)到瀏覽器

3.1發(fā)送數(shù)據(jù)到瀏覽器

3.1.1發(fā)生Json到瀏覽器的方法：在藍圖中畫下如下內(nèi)容

3.1.2在打包路徑中的app.js文件末尾加入如下圖所示的代碼：

app.js的文件路徑：xxxxx\Engine\Source\Programs\PixelStreaming\WebServers\SignallingWebServer\scripts

function myHandleResponseFunction(data) {console.warn("收到回應(yīng)Response received!");switch (data) {case "HelloWorld"://和你在UE4中通過SendPixelStreamingRespomse節(jié)點的Descriptor屬性寫的內(nèi)容保持一致console.warn("HelloWorld");//在瀏覽器的控制臺打印HelloWorldcase "AnotherEvent":console.warn("其他");} }addResponseEventListener("handle_responses", myHandleResponseFunction);

3.1.3之后和官方案例的運行方式相同，在瀏覽器中點擊F12->切換到控制臺->按下鍵盤（不是小寫鍵盤）的數(shù)字1，你便會在控制臺中看到來自UE4的按鍵請求效果

3.2從瀏覽器中接收數(shù)據(jù)（當(dāng)瀏覽器發(fā)送消息時，綁定的事件會從前到后依次執(zhí)行一遍）

?4.像素流的工作流程

總結(jié)

以上是生活随笔為你收集整理的UE4像素流送（Pixel Streaming）快速上手指南的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯，歡迎將生活随笔推薦給好友。