如何将Unity嵌入Flutter

使用 Flutter + Unity 构建增强现实体验:针对不支持 ARCore 设备的解决方案

想要为你的用户创建沉浸式体验吗?你是否遇到过某些设备不支持 ARCore 等传统 AR 库的问题?如果是这样,这篇文章就是为你准备的!

在这篇文章中,我将分享我使用 Flutter 和 Unity 创建增强现实应用程序的经验。我遇到了目标设备不满足 ARCore 最低要求的挑战,这阻止了表面检测和与虚拟对象的交互。

解决方案

为了克服这个障碍,我将 Flutter 的强大功能与 Unity 及其 Vuforia 库的灵活性相结合。我实现了一个“图像目标”和一个 C# 脚本,以便在原本不支持增强现实的设备上解锁增强现实体验。

优势:

  • 低端设备兼容性:此解决方案允许你的应用程序在各种设备上运行,即使是那些拥有较弱摄像头的设备。

  • 流畅的用户体验:Flutter 和 Unity 之间的集成提供流畅且无缝的用户体验。

  • 灵活性与定制:Unity 使你能够创建复杂且定制的 AR 体验。

本文内容:

在本文中,我将逐步指导你完成使用 Flutter 和 Unity 创建增强现实应用程序的过程。

如果你想跳过 Flutter 项目的设置,可以下载 GitHub(https://github.com/vmgarciahurtado/ar_pokemon_app) 上的存储库,并跳到 Unity 项目设置部分。

Flutter 项目设置

从设置 Flutter 项目开始。请按照以下步骤操作:

  1. 在项目的根目录中创建一个名为 assets 的文件夹。

  2. 在 assets 中,创建一个名为 pokemon_list.json 的 JSON 文件,该文件将包含你想要在应用程序中包含的宝可梦列表。

  3. 在 pubspec.yaml 文件中,添加 flutter_unity_widget 包的依赖项,并将 pokemon_list.json 文件添加到 assets 部分。

在 pokemon_list.json 中:

[
    {
        "id":0,
        "name": "Bulbasaur",
        "imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/001.png"
    },
    {
        "id":1,
        "name": "Ivysaur",
        "imageUrl":"https://assets.pokemon.com/assets/cms2/img/pokedex/full/002.png"
    },
]

在 pubspec.yaml 中:

dependencies:
  flutter_unity_widget: ^2022.2.0
  assets:
    - assets/pokemon_list.json

在 lib 文件夹中,我们创建以下文件:pokemon_model.dartpokemon_card.dartpokemon_list.dartpokemon_detail.dart,最后是 unity_ar_screen.dart。这些文件的内容可以在以下 GitHub(https://github.com/vmgarciahurtado/ar_pokemon_app) 存储库中找到。

Unity 项目设置

在 Flutter 项目的根目录中,我们创建一个名为 unity 的文件夹。从 Unity 应用程序中,我们创建一个新的 3D 项目,并将其保存在新创建的文件夹中。

 

下载必要的 Unity 包

fwu 包用于将 Unity 的更改导出到 Flutter 项目,vuforia 包用于实现增强现实。下载链接 unitypackages(https://drive.google.com/drive/folders/1lavpplnUYeODgeEaXRs1G_XgePjPuMio?usp=drive_link)。

安装包

首先将 fwu 包拖放到 Unity 项目的 Assets 部分,然后拖放 vuforia 包,并在两种情况下都点击 导入*。如果出现任何更新消息,请点击 更新*

图片

 

集成 3D 模型

下载 models(https://drive.google.com/drive/u/1/folders/1lavpplnUYeODgeEaXRs1G_XgePjPuMio) 文件夹的内容,进入文件夹,并将模型拖放到 Unity 项目的 Assets 部分。

 

创建图像目标

在左侧面板中,右键点击,然后点击 Vuforia Engine,接着点击 Image Target

img

下一步是将图像与 Image Target 关联起来,以便当手机摄像头检测到该图像时,显示 3D 对象。

  1. 在 Assets 部分,添加位于资源文件夹中的 pokemon_image_target.jpg 图像。

  2. 点击我们创建的 Image Target,在屏幕右侧找到 *选择* 选项,选择刚刚添加的图像。

 

将 3D 模型插入图像目标

我们只需进入每个模型文件夹,例如,进入 001_Bulbasaur 文件夹,并将该文件夹中的文件(在本例中为 Bulbasaur)拖放到 Image Target 上。要选择的文件是宝可梦的名称。

 

将脚本(PrefabController.cs)插入 Assets

将位于资源文件夹中的 PrefabController.cs 文件拖放到 Assets 中。此脚本使能够使用同一个 Image Target 在 3D 模型之间切换。

将脚本分配给用于在 3D 模型之间切换的 GameObject

在 Image Target 下面,右键点击,然后点击 创建空对象,将创建一个 GameObject,点击该对象,在屏幕右侧将出现 添加组件* 选项,点击该选项,然后点击 脚本*,选择 *Prefab Controller*。选择控制器后,将出现一个空列表,点击 + 添加 3D 模型。

图片

 

将所做的更改集成到 Flutter 项目中

转到 File > Build Settings > Player Settings,找到 其他设置 部分,在 脚本后端 中,将 Mono 更改为 IL2CPP,继续向下,在 最低 API 级别 中选择 7.0 (API 24),在 目标架构 中选择 ARMv7 和 ARM64

在 Unity 应用程序的顶部部分,点击 Flutter,然后点击 导出 Android (发布)。导出完成后,就可以运行 Flutter 项目了。

添加免费的 Vuforia 许可证

在 vuforia-licenses(https://developer.vuforia.com/vui/develop/licenses) 上登录,并在许可证部分生成一个免费许可证。在 Unity 项目中,要添加此密钥,首先转到左侧部分,右键点击 > Vuforia Engine > AR Camera,点击 AR Camera,在右侧部分点击 打开 Vuforia Engine 配置,复制生成的许可证,并将其粘贴到 应用程序许可证密钥 字段中,然后再次进行导出以将更改应用到 Flutter 项目。

资源:

  • 完整的项目以 zip 格式 项目(https://drive.google.com/file/d/175rPZixbqp9IFzojMpfwhtGDbfmF1az2/view?usp=drive_link)

  • 存储库 GitHub(https://github.com/vmgarciahurtado/ar_pokemon_app)

  • 包含 Unity 模型和插件的驱动器文件夹 文件夹(https://drive.google.com/drive/folders/1lavpplnUYeODgeEaXRs1G_XgePjPuMio?usp=sharing)

  • 宝可梦图片:在 url pokedex(https://www.pokemon.com/el/pokedex) 上,右键点击图片,选择复制图片地址。

  • flutter_unity_widget 包的文档:文档链接:https://pub.dev/packages/flutter_unity_widget

  • 想了解更多游戏开发知识,可以扫描下方二维码,免费领取游戏开发4天训练营课程

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值