UE5+Vue3交互实现切换天气和时间

Shaw0xyz

在游戏和虚拟现实开发中，动态环境效果如天气和时间的变化可以极大地增强用户体验。使用Unreal Engine 5（UE5）和Vue3，我们可以创建一个交互界面，允许用户通过前端界面切换虚拟世界中的天气和时间。这篇文章将详细介绍如何实现这一功能。

环境准备

首先，确保你已经安装了以下工具：

- Unreal Engine 5
- Node.js 和 npm
- Vue CLI

创建UE5项目

1. 启动UE5并创建新项目：
   - 打开UE5，选择“Games”模板，点击“Next”。
   - 选择“Blank”模板，点击“Next”。
   - 确保启用了“Starter Content”，然后点击“Create”。

2. 添加必要的资产：
   - 在内容浏览器中，导入一些天气效果和时间变化相关的资产，比如天空盒、光照设置等。

创建Vue3项目

1. 使用Vue CLI创建新项目：
   打开终端，运行以下命令：

1.    npm install -g @vue/cli
   
2.    vue create ue5-weather-time

复制代码

   按照提示选择默认配置，创建Vue项目。

2. 安装axios用于HTTP请求：
   在项目目录下运行：

1.    npm install axios

复制代码

创建前端界面

在Vue项目中，编辑 `src/App.vue`，创建一个简单的界面，允许用户选择天气和时间。

1. <template>
   
2.   <div id="app">
   
3.     <h1>切换天气和时间</h1>
   
4.     <div>
   
5.       <label for="weather">选择天气：</label>
   
6.       <select id="weather" v-model="weather">
   
7.         <option value="sunny">晴天</option>
   
8.         <option value="rainy">雨天</option>
   
9.         <option value="snowy">雪天</option>
   
10.       </select>
    
11.     </div>
    
12.     <div>
    
13.       <label for="time">选择时间：</label>
    
14.       <input type="time" id="time" v-model="time">
    
15.     </div>
    
16.     <button @click="updateEnvironment">更新环境</button>
    
17.   </div>
    
18. </template>
    
19. 
    
20. <script>
    
21. import axios from 'axios';
    
22. 
    
23. export default {
    
24.   data() {
    
25.     return {
    
26.       weather: 'sunny',
    
27.       time: '12:00'
    
28.     };
    
29.   },
    
30.   methods: {
    
31.     updateEnvironment() {
    
32.       axios.post('http://localhost:8000/update', {
    
33.         weather: this.weather,
    
34.         time: this.time
    
35.       })
    
36.       .then(response => {
    
37.         console.log(response.data);
    
38.       })
    
39.       .catch(error => {
    
40.         console.error("There was an error updating the environment:", error);
    
41.       });
    
42.     }
    
43.   }
    
44. };
    
45. </script>
    
46. 
    
47. <style>
    
48. #app {
    
49.   font-family: Avenir, Helvetica, Arial, sans-serif;
    
50.   text-align: center;
    
51.   color: #2c3e50;
    
52.   margin-top: 60px;
    
53. }
    
54. </style>

复制代码

在UE5中创建HTTP服务器

在UE5中，我们需要创建一个简单的HTTP服务器，监听来自前端的请求，并根据请求调整环境设置。这里我们使用Python的Flask框架来实现服务器。

1. 安装Flask：

   在终端中运行：

1.    pip install Flask

复制代码

2. 创建Flask服务器：

   在项目根目录下创建一个新的Python文件 `server.py`：

1. 
   
2.    from flask import Flask, request, jsonify
   
3.    import unreal
   
4. 
   
5.    app = Flask(__name__)
   
6. 
   
7.    @app.route('/update', methods=['POST'])
   
8.    def update_environment():
   
9.        data = request.get_json()
   
10.        weather = data.get('weather')
    
11.        time = data.get('time')
    
12. 
    
13.        # 调用UE5的API来更改环境
    
14.        unreal.log(f"Updating environment: Weather={weather}, Time={time}")
    
15. 
    
16.        # 示例：根据天气和时间调整虚拟世界的状态
    
17.        if weather == 'sunny':
    
18.            # 调用UE5 API设置晴天
    
19.            pass
    
20.        elif weather == 'rainy':
    
21.            # 调用UE5 API设置雨天
    
22.            pass
    
23.        elif weather == 'snowy':
    
24.            # 调用UE5 API设置雪天
    
25.            pass
    
26. 
    
27.        # 示例：根据时间调整虚拟世界的光照
    
28.        hour, minute = map(int, time.split(':'))
    
29.        # 调用UE5 API设置时间
    
30. 
    
31.        return jsonify({"status": "success"})
    
32. 
    
33.    if __name__ == '__main__':
    
34.        app.run(host='0.0.0.0', port=8000)

复制代码

3. 启动Flask服务器：

   在终端中运行：

1.    python server.py

复制代码

在UE5中实现环境更新逻辑

在UE5中，你需要创建一个蓝图脚本或C++类，来处理从Flask服务器接收到的环境更新请求。以下是使用蓝图的示例：

1. 创建蓝图类：
   - 在UE5编辑器中，右键内容浏览器，选择“Blueprint Class”，基于“Actor”创建一个新蓝图类，命名为“EnvironmentController”。

2. 编写蓝图逻辑：
   - 打开“EnvironmentController”蓝图，添加一个新函数，名为“UpdateEnvironment”。
   - 在函数中，根据传入的天气和时间参数，调用相关的API来调整虚拟世界的状态。

3. 在场景中添加蓝图实例：
   - 将“EnvironmentController”蓝图拖到场景中，使其成为场景的一部分。

测试和调试

1. 启动Flask服务器：确保你的Flask服务器正在运行。

2. 启动UE5项目：运行UE5项目，确保蓝图实例已经在场景中。

3. 运行Vue前端：在Vue项目目录下运行：

1.    npm run serve

复制代码

4. 访问前端界面：打开浏览器，访问 `http://localhost:8080`，尝试切换天气和时间，并观察UE5中虚拟世界的变化。

结语

通过本文的介绍，我们了解了如何使用Gin和Gorm实现动态的CRUD操作，增强用户体验。通过结合前端Vue3和后端Flask服务器，我们能够实时调整虚拟世界中的天气和时间。