使用 Flutter + Unity 构建（AR 体验工具包）【翻译】

原文：https://medium.com/potato/building-with-flutter-unity-ar-experience-toolkit-6aaf17dbb725

由于屡获殊荣的独立动画工作室 Aardman 与讲故事的风险投资公司 Fictioneers（Potato、Tiny Rebel Games 和 Sugar Creative 的联盟）之间的合作，Wallace & Gromit：The Big Fix Up 于 2021 年 1 月推出。

该免费应用可在英国、美国和加拿大的 iOS 和 Android 设备上使用，它创造了一种叙事驱动的体验，带领用户体验 AR 游戏、CG 动画、角色内电话、扩展现实 (XR) 门户和漫画 带子。 在新的故事情节中，发明家华莱士和他的狗格罗米特的新企业签订了一份“修复”英国布里斯托尔市的合同。

The Big Fix Up 应用程序公开已经三个月了，它获得了很多关注。 这个基于 Flutter with Unity 构建的 AR 杰作是同类产品中的首创，并且对我们构建这种实时讲故事体验的方法提出了许多有趣的问题：

• 为什么要颤振？
• 在 Flutter 中嵌入 Unity3D 应用程序？
• Unity 与 Flutter 的通信
• 将 Unity 嵌入 Flutter 的性能影响，
• 应用程序包大小等

下面我们就来分解一下我们是如何回答这些问题，并最终解决了 Unity 嵌入 Flutter 的问题。 结果是一个 Flutter Unity View 插件，它在此处为社区开源发布：
https://github.com/juicycleff/flutter-unity-view-widget

为什么要颤振？
如果您在移动应用程序开发或工程领域，您很可能不需要介绍 Flutter，但如果不需要，

Flutter 是 Google 的开源工具包，用于从单个代码库为移动、Web、桌面和嵌入式设备构建漂亮的本地编译应用程序。

Flutter 使移动开发人员能够以最小的努力构建令人惊叹的、高性能的、漂亮的应用程序，并使用可满足您几乎所有需求的小部件。
Learn more about Flutter.

在测试了几个流行的移动跨平台框架之后，我们选择了 Flutter，原因有 3 个：

• 表现
• 稳定
• 丰富的用户界面

性能和稳定性是我们非常关心的问题，因为我们的应用程序是 Flutter 应用程序和 Unity 应用程序的组合。 在其他跨平台框架上进行测试时，我们遇到了 Unity 无法正确渲染，或者有时在很多设备上渲染空白等问题。

此外，与 Flutter 相比，框架（其他跨平台）和 Unity 之间的双向通信在发送时相对较慢，例如向 Unity 发送 Touch 和 Gesture 事件，但使用 Flutter，我们对与 Unity 之间更高效的事件通知和消息通信进行了基准测试 只有纯原生移动开发才能与之匹敌。 Flutter 渲染功能非常强大，我们在其上渲染我们的 Unity 应用程序时从未遇到过任何问题，而且由于 Flutter 小部件是周围最漂亮、最引人注目的库存 UI 组件，因此在 Flutter 中制作漂亮的应用程序并不费力。

在 Flutter 中嵌入 Unity3D 应用程序

我们需要将 Unity 项目导出为本机 iOS 和 Android 项目，以便我们可以将其转换为本机包，可以将其添加到我们的 Flutter 应用程序的本机代码库中。 问题是 Unity 当时只支持将 Unity 项目导出为应用程序而不是包（这是 UaaL 之前的版本）。 这需要对实际的 Unity 项目进行修改，这在很大程度上涉及修改我们导出的 Unity 应用程序源并将其转换为库。 但是今天支持 Unity 作为一个库 (UaaL)，它现在确实更好地支持在本机应用程序中重用 Unity，几乎不需要做任何修改，但我们仍然需要一些类似的东西；

当 Unity 播放器准备好在 Flutter 中使用时通知 Flutter。 例如，我们通过像这样扩展代码库向 Unity iOS 后构建处理器添加了一个新的通知事件。

/// <summary>
/// Edit 'UnityAppController.mm': triggers 'UnityReady' notification after Unity is actually started.
/// </summary>
private static void EditUnityAppControllerMM(string path)
{var inScope = false;var markerDetected = false;EditCodeFile(path, line =>{inScope |= line.Contains("- (void)startUnity:");markerDetected |= inScope && line.Contains(TouchedMarker);if (inScope && line.Trim() == "}"){inScope = false;if (markerDetected){return new string[] { line };}else{return new string[]{"    // Modified by " + TouchedMarker,@"    [[NSNotificationCenter defaultCenter] postNotificationName: @""UnityReady"" object:self];","}",};}}return new string[] { line };});}

我们还必须通过将所有 Gradle android 应用程序相关代码替换为 android 库来自动修改 Gradle 构建脚本，从而修改 Unity 项目 Android 导出以无缝地与 Flutter 一起工作；

public static void DoBuildAndroid()
{...// Modify build.gradlevar build_file = Path.Combine(androidExportPath, "build.gradle");var build_text = File.ReadAllText(build_file);build_text = build_text.Replace("com.android.application", "com.android.library");build_text = build_text.Replace("bundle {", "splits {");build_text = build_text.Replace("enableSplit = false", "enable false");build_text = build_text.Replace("enableSplit = true", "enable true");build_text = build_text.Replace("implementation fileTree(dir: 'libs', include: ['*.jar'])", "implementation(name: 'unity-classes', ext:'jar')");build_text = Regex.Replace(build_text, @"\n.*applicationId '.+'.*\n", "\n");File.WriteAllText(build_file, build_text);// Modify AndroidManifest.xmlvar manifest_file = Path.Combine(androidExportPath, "src/main/AndroidManifest.xml");var manifest_text = File.ReadAllText(manifest_file);manifest_text = Regex.Replace(manifest_text, @"<application .*>", "<application>");Regex regex = new Regex(@"<activity.*>(\s|\S)+?</activity>", RegexOptions.Multiline);manifest_text = regex.Replace(manifest_text, "");File.WriteAllText(manifest_file, manifest_text);...
}

知道我们可以自动从 Unity 导出并即时修改 Unity 导出后，Unity 就可以嵌入到 Flutter 中了。 这为 Flutter 渲染 unity 打下了良好的基础。 借助 Flutter 中对高性能原生扩展的支持，我们能够使用 Flutter Native API 实现在 Flutter 上渲染 Unity，其中一些是；

• PlatformView
• FlutterPlugin
• FlutterPlatformViewFactory

这些 API 使我们能够在 Flutter 中为 Android 和 iOS 平台附加 Unity 原生视图。 在不影响渲染的情况下，我们需要在 Flutter 和 Unity 之间进行完全双向通信。

Unity 与 Flutter 的通信

Flutter 确实支持通过 MethodChannel API 支持从 Flutter 到本机端的高性能消息传输，这是 Flutter 优于其他跨平台框架的一个很好的原因。 MethodChannel API 为我们提供了与本机代码通信的方式，但是，作为库的 Unity 仅允许单向通信，即仅从 Flutter 到 Unity，因此我们必须弄清楚 Unity 如何向 Flutter 发送消息。 幸运的是，Unity 支持从 Unity 内部调用本机代码类和静态方法，这导致编写了 Unity 消息管理器，其工作是调用 Kotlin/Java/Obj C/Swift 静态类方法，这反过来通知或调用 Flutter 方法 . Unity 消息管理器看起来像这样；

public class NativeAPI
{#if UNITY_IOS && !UNITY_EDITOR[DllImport("__Internal")]public static extern void OnUnityMessage(string message);#endifpublic static void SendMessageToFlutter(string message){#if UNITY_ANDROIDtry{AndroidJavaClass jc = new AndroidJavaClass("com.xraph.plugin.flutter_unity_widget.UnityPlayerUtils");jc.CallStatic("onUnityMessage", message);}catch (Exception e){Debug.Log(e.Message);}#elif UNITY_IOS && !UNITY_EDITORNativeAPI.OnUnityMessage(message);#endif}
}

在这里，我们在使用 CSharp 预处理器指令时调用原生 Android 类 UnityPlayerUtils 方法 UnityPlayerUtils 和 ObjectiveC 静态方法 NativeAPI.OnUnityMessage(message)。 在 Flutter 原生端，Android Kotlin 的方法看起来像这样；

class UnityPlayerUtils {.../*** Invoke by unity C#*/@JvmStaticfun onUnityMessage(message: String) {for (listener in mUnityEventListeners) {try {listener.onMessage(message)} catch (e: Exception) {e.message?.let { Log.e(LOG_TAG, it) }}}}...
}

在 iOS 上就这么简单；

void OnUnityMessage(const char* message)
{[UnityPlayerUtils unityMessageHandler:message];
}

并调用Flutter MessageChannel实例通知flutter；

@objc public class UnityPlayerUtils: UIResponder, UIApplicationDelegate, UnityFrameworkListener {@objcpublic static func unityMessageHandler(_ message:        UnsafePointer<Int8>?) {if let strMsg = message {globalChannel?.invokeMethod("events#onUnityMessage", arguments: String(utf8String: strMsg))} else {globalChannel?.invokeMethod("events#onUnityMessage", arguments: "")}}
}

有了这些，我们通过 MethodChannel API 在 Flutter 和 Unity 之间进行了双向通信，性能非常出色，这对我们最初选择 Flutter 至关重要。

将 Unity 嵌入 Flutter 的性能影响

在 Flutter 上渲染 Unity 非常像在原生视图中渲染原生视图，就是这么高效！ Unity 在 Flutter 中的性能没有性能问题，您只需要通过确保卸载 Unity 或在不与 Unity 场景交互时处于资源较少的场景中来管理 Unity CPU 和内存使用情况。

在您的 AR 项目中使用 Flutter 和 Unity

最后，Unity 和 Flutter 的结合非常适合您的下一个 AR 项目，因为您可以将 Flutter 的漂亮 UI 与简单而强大的游戏引擎相结合，从而拥有一个真正的非游戏移动应用程序，同时具有游戏引擎的可能性。 我们在这里公开了 Flutter Unity 集成包，因此您不必从头开始。 就在这里，祝你下一个项目好运。

• Github: https://github.com/juicycleff/flutter-unity-view-widget

• Pub: https://pub.dev/packages/flutter_unity_widget