Flutter Unity集成插件 `flutter_unity_widget_web` 的使用

flutter_unity_widget_web 是一个用于在Flutter Web应用中嵌入Unity WebGL构建的插件。它不仅允许你渲染Unity WebGL，还支持Flutter Web与Unity之间的双向通信。

Setup 设置

步骤 1: 将导出的Unity WebGL构建文件夹放置在web目录下

Web folder structure

步骤 2: 修改Unity WebGL构建文件夹中的`index.html`文件

添加脚本到`index.html`

let globalUnityInstance;

window["receiveMessageFromUnity"] = function (params) {
  window.parent.postMessage(params, "*");
};

window.parent.addEventListener("flutter2js", function (params) {
  const obj = JSON.parse(params.data);
  globalUnityInstance.SendMessage(obj.gameObject, obj.method, obj.data);
});

添加上述脚本后的index.html示例： index.html file image

接着，再添加以下脚本：

window.parent.postMessage("unity_loaded", "*");
globalUnityInstance = unityInstance;

最终的index.html文件示例： index.html file image

Usage 使用方法

下面是一个简单的示例demo展示如何使用这个插件：

import 'package:flutter/material.dart';
import 'package:flutter_unity_widget_web/flutter_unity_widget_web.dart';

class UnityScreen extends StatefulWidget {
  const UnityScreen({Key? key}) : super(key: key);

  [@override](/user/override)
  State<UnityScreen> createState() => _UnityScreenState();
}

class _UnityScreenState extends State<UnityScreen> {
  late UnityWebController _unityWebController;

  [@override](/user/override)
  Widget build(BuildContext context) {
    return UnityWebWidget(
      url: 'http://localhost:${Uri.base.port}/unity/index.html',
      listenMessageFromUnity: _listenMessageFromUnity,
      onUnityLoaded: _onUnityLoaded,
    );
  }

  [@override](/user/override)
  void dispose() {
    _unityWebController.dispose();
    super.dispose();
  }

  void _listenMessageFromUnity(String data) {
    if (data == 'load_next_scene') { // 示例消息
      _unityWebController.sendDataToUnity(
        gameObject: 'GameWindow',
        method: 'LoadNextScene',
        data: '0', // 发送到Unity的数据
      );
    }
  }

  void _onUnityLoaded(UnityWebController controller) {
    _unityWebController = controller;
    setState(() {});
  }
}

更多关于Flutter Unity集成插件flutter_unity_widget_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

nodeper 1楼•1 天前

更多关于Flutter Unity集成插件flutter_unity_widget_web的使用的实战系列教程也可以访问 https://www.itying.com/category-92-b0.html

当然，下面是一个关于如何在Flutter项目中集成并使用flutter_unity_widget_web插件的示例代码案例。这个插件允许你在Flutter应用中嵌入Unity WebGL内容。

步骤 1: 设置Flutter项目

首先，确保你已经有一个Flutter项目。如果没有，可以使用以下命令创建一个新的Flutter项目：

flutter create my_flutter_unity_app
cd my_flutter_unity_app

步骤 2: 添加依赖

在pubspec.yaml文件中添加flutter_unity_widget_web依赖：

dependencies:
  flutter:
    sdk: flutter
  flutter_unity_widget_web: ^x.y.z  # 请使用最新版本号

然后运行flutter pub get来获取依赖。

步骤 3: 准备Unity WebGL构建

在Unity中打开你的项目。
选择File > Build Settings。
选择WebGL作为目标平台，然后点击Switch Platform。
配置你的WebGL构建设置（例如，设置分辨率和呈现模式）。
点击Build并选择一个文件夹来保存生成的WebGL文件。

步骤 4: 配置Flutter项目以使用Unity WebGL构建

将Unity生成的WebGL文件（包括Build和Library文件夹，以及index.html、TemplateData等文件）复制到Flutter项目的assets/unity目录中。确保你的Flutter项目结构类似于以下：

my_flutter_unity_app/
├── android/
├── ios/
├── assets/
│   └── unity/
│       ├── Build/
│       ├── Library/
│       ├── TemplateData/
│       ├── index.html
│       ├── ... (其他WebGL生成的文件)
├── lib/
│   └── main.dart
├── pubspec.yaml
└── ...

步骤 5: 在Flutter中使用`flutter_unity_widget_web`

打开lib/main.dart文件，并修改其内容以使用FlutterUnityWidgetWeb：

import 'package:flutter/material.dart';
import 'package:flutter_unity_widget_web/flutter_unity_widget_web.dart';

void main() {
  runApp(MyApp());
}

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(
          title: Text('Flutter Unity Widget Web Example'),
        ),
        body: Center(
          child: UnityWidgetWeb(
            'assets/unity/index.html', // Unity WebGL构建的index.html文件路径
            onMessage: (message) {
              // 处理来自Unity的消息
              print('Unity message: $message');
            },
            onUnityCreated: (unityController) {
              // Unity WebGL内容加载完成后执行的操作
              print('Unity created');
            },
            onUnityLoaded: () {
              // Unity WebGL内容加载完成时执行的操作（不同于onUnityCreated，在WebGL内容完全加载后触发）
              print('Unity loaded');
            },
            onUnityUnloaded: () {
              // Unity WebGL内容卸载时执行的操作
              print('Unity unloaded');
            },
            onUnityError: (error, stackTrace) {
              // 处理Unity WebGL内容的错误
              print('Unity error: $error');
              print('Stack trace: $stackTrace');
            },
          ),
        ),
      ),
    );
  }
}

步骤 6: 运行应用

确保你已经连接了一个支持Web的Flutter设备（例如Chrome），然后运行应用：

flutter run -d chrome

这将启动你的Flutter应用，并在Chrome中嵌入并显示Unity WebGL内容。

注意事项

确保你的Unity WebGL构建没有跨域问题，特别是如果你打算在生产环境中部署应用。
flutter_unity_widget_web插件目前仅支持Web平台，不支持移动或桌面平台。
根据你的需求，你可能需要调整Unity与Flutter之间的通信机制。

希望这个示例代码案例能帮助你成功地在Flutter项目中集成并使用flutter_unity_widget_web插件。

Flutter Unity集成插件flutter_unity_widget_web的使用

Flutter Unity集成插件 flutter_unity_widget_web 的使用