使用 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.gradle
    var 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.xml
    var 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);
    #endif


    public static void SendMessageToFlutter(string message)
    {
        #if UNITY_ANDROID
        try
        {
            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_EDITOR
        NativeAPI.OnUnityMessage(message);
        #endif
    }
}

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

class UnityPlayerUtils {
  ...
  /**
  * Invoke by unity C#
  */
  @JvmStatic
  fun 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 {
  @objc
  public 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

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

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

在 Flutter 中嵌入 Unity3D 应用程序

Unity 与 Flutter 的通信

将 Unity 嵌入 Flutter 的性能影响

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

猜你喜欢