UE5 通过Webui的按钮 ，切换相机，切换场景。

Question

webui 的html文件使用vue制作，前端页面上有一些按钮 需要与ue进行联动，如切换相机，切换关卡等
目前可以通过webui加载vue的html文件，打开前端的页面在ue5中，
请问如何在ue5中 通过加载的前端页面进行联动，对ue5场景中的 相机 关卡 动画等进行操作。

Answer 1

引自免费微信小程序：皆我百晓生

在UE5中，通过WebUI与Unreal Engine进行实时交互并控制场景中的相机、关卡和动画等功能，可以利用Unreal Engine的Websocket通信功能结合Blueprint或C++实现。以下是基于蓝图的大致步骤：

1. 创建WebSocket服务器： 在UE5中创建一个WebSocket服务器，可以通过使用官方提供的插件“WebSockets”来实现。首先在项目设置中启用插件，然后在需要交互的Actor或GameMode类中创建一个WebSocket服务器实例。

   // C++示例（假设你选择用C++实现）
   #include "WebSockets/WebSocket.h"
   
   AYourActor::AYourActor()
   {
       // 创建WebSocket服务器实例
       WebSocket = MakeShareable(new FWebSocketServer(8080));
       if (WebSocket->Listen())
       {
           // 监听连接请求
           OnConnectionAcceptedDelegate.BindUObject(this, &AYourActor::OnWebSocketConnectionAccepted);
           WebSocket->OnConnectionAccepted().Add(OnConnectionAcceptedDelegate);
       }
   }
   
   void AYourActor::OnWebSocketConnectionAccepted(FWebSocketConnection& NewConnection)
   {
       // 处理新连接事件
       NewConnection.OnMessageReceived().BindUObject(this, &AYourActor::OnWebSocketMessageReceived);
   }
   
   void AYourActor::OnWebSocketMessageReceived(FString Message, FWebSocketConnection& Connection)
   {
       // 解析前端发送的消息，并调用相应的处理函数
       // ...
   }
   

2. 前端Vue.js与WebSocket客户端通信： 在Vue.js应用中，使用WebSocket API建立到UE5服务器的连接，并在按钮点击事件中发送指令。

   // Vue.js 示例
   <script>
   export default {
     data() {
       return {
         websocket: null,
       };
     },
     mounted() {
       this.websocket = new WebSocket('ws://your_ue5_server_ip:8080');
       this.websocket.onopen = () => console.log('Connected to UE5 server');
       this.websocket.onmessage = (event) => console.log('Received:', event.data);
       this.websocket.onerror = (error) => console.error('Error:', error);
     },
     methods: {
       switchCamera(cameraIndex) {
         const message = JSON.stringify({ action: 'switch_camera', cameraIndex });
         this.websocket.send(message);
       },
       loadLevel(levelName) {
         const message = JSON.stringify({ action: 'load_level', levelName });
         this.websocket.send(message);
       },
     },
   };
   </script>
   

3. UE5接收消息并执行操作： 在UE5端，在OnWebSocketMessageReceived方法中解析接收到的JSON字符串，并根据不同的action执行相应操作，如切换相机或加载关卡。

   void AYourActor::OnWebSocketMessageReceived(FString Message, FWebSocketConnection& Connection)
   {
       TSharedPtr<FJsonObject> JsonObject;
       FString JsonString = Message;
       TSharedRef<TJsonReader<>> Reader = TJsonReaderFactory<>::Create(JsonString);
   
       if (FJsonSerializer::Deserialize(Reader, JsonObject))
       {
           const FString Action = JsonObject->GetStringField("action");
           if (Action == TEXT("switch_camera"))
           {
               int CameraIndex;
               if (JsonObject->TryGetNumberField("cameraIndex", CameraIndex))
               {
                   // 获取相机列表并切换至指定索引的相机
                   // 例如：SetViewTarget(GetWorld()->GetFirstPlayerController()->GetPawn()->FindComponentByClass<UCameraComponent>());
                   // 省略具体切换逻辑，此处仅为示意
               }
           }
           else if (Action == TEXT("load_level"))
           {
               const FString LevelName = JsonObject->GetStringField("levelName");
               // 加载关卡
               UWorld* World = GetWorld();
               if (World)
               {
                   FLoadingScreenAttributes LoadingScreenAttr;
                   World->ServerTravel(LevelName, false, &LoadingScreenAttr);
               }
           }
       }
   }
   

以上是一个基础的流程概述，实际开发时还需要根据你的具体需求调整代码细节。同时，请确保前端与UE5服务端的网络环境通畅，并且注意权限、安全性和错误处理等问题。