2020.07.14 10:23

不知道你是否有在app内部植入3d模型的需要,但是励志要做独立游戏的我,一直有这个想法🤤,当然这还很遥远。

  因为我一直使用的ios,所以这篇帖子是介绍ios系统的详细安装使用方法,大家则需取用。

一、 下载安装 Unity

  1. 安装Unity Hub。下载地址
    frc 2211fdad0664920dfeed3ad76711b533 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  1. 申请许可证。没有购买就申请个人版,有的话请自便。🥱

    frc 19255cb3b967b2b79f20e0730e538225 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNCo1H.png
  2. 下载unity。
  • 选择一个适合的版本

    frc 832a560abc008e67b0c5d6e463a93016 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNFo3F.png
  • 选择iOS模块,第一次安装的话会有一个Visual Studio模块也要选上!👈🏻

    frc 6e3f682326ac40f52ea1e4d2a9f448d2 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNAvlD.png

二、flutter_unity_widget 插件的使用

我这里用我新建的一个demo来演示。

  1. 在项目根目录下新建unity文件夹,项目结构如图:

    frc 7eb011f93fc9e2257e42daa1fbc5e07d - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNF1fO.png
  2. 打开unity,在项目名/unity,也就是刚才建的那个文件夹下新建一个项目。

    frc 922f216135ca45da1aceab1fd73d8bc1 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNmzdJ.png

    最初打开是这样式的👇

    frc 40952de3288d67e383e0eb0a8298ccf9 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNnaYn.png
  3. 按图打开Build Setting

  • 点击Add Open Scenes
  • 选择iOS
  • 点击Switch Platform
  • 点击左下角Player Setting

    frc 473e92fa581aad94216206a49c4a15b9 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNYXyd.png
  • Player Setting中
    • 看IOS模块下Target SDK是否对应正确,真机就选Device SDK,虚拟机就选Simulator SDK

      frc 70b760ebff6065dfc28beb6167936e6f - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
      UNdZgU.png
  1. 添加文件包
  • 将插件目录下的下边几个文件复制到新建的unity项目的Assets目录下。
    • Editor
    • JsonDotNet
    • link.xml
    • UnityMessageManager.cs
  • 相关文件我已打包好放在微信公众号了,需要的自行取用
    • 微信搜索公众号“乔悟空”,或者扫描下方二维码
    • 回复“flutter_unity_widget”或者“unity”
    • 即可获取

      frc fb5d6f09c583c6b41b6f08eaed2cad0e - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
      UNRnKI.png
  • 添加之后的文件目录是这样的:

    frc 41873ab426a4d07f4002801602a3913c - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UN209H.png
  1. 导出unity项目
  • 新建一个小正方体作为案例

    frc ddc7603232f29998c63555ca48058772 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNRBIU.png
  • 简单调整后导出
    • 点击顶部导航栏中FLutter/Export IOS(版本号)
      frc e65e52f3bb2dae0bfc978aebcadf2547 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
      UNWf6s.png
    • 等待完成后,在项目名/ios/目录下就会多出一个文件夹UntiyExport,这表示我们导出成功了。
  1. 在Xcode中进行配置
  • 用vscode打开项目,或者打开终端进入项目目录下
  • 运行 open ./ios/Runner.xcworkspace
  • 在Xcode左侧空白处右键选择 Add Files to "Runner"
    frc 567fa90fd40c00a69ce840bea635979c - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    UNfTKA.png
  • 在弹出的窗口中,选择第5步中导出的UnityExport文件夹下的Unity-iPhone.xcodeproj导入
    frc 6402b99a66b89c8ee816c54773df58d7 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • 导入后点击 Unity-iPhone/Data,将右侧Target Membership选中为UnityFramework
    frc 849b0fd3d54b41459296260e4ddc41ff - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • 修改Target为12.0以上版本

    frc 30b5b624064914980879814169dbd6bb - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • 登陆Apple开发者账号,修改包名等基本操作不在赘述
  • Runner/Runner/Info.plist文件中添加io.flutter.embedded_views_preview字段,并设置为Boolean YES,保存
    frc 51e035af1d5755427e1fe8887be2a9e1 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • Runner/Runner/AppDelegate.swift文件中第十行添加InitArgs(CommandLine.argc, CommandLine.unsafeArgv)字段,保存
    frc 0bf82817f033675f382c001fb3acc00f - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • Runner/Runner/Runner-Bridging-Header.h文件中第二行添加#import "UnityUtils.h",保存
    frc d65cbae58fd0e3c64ffe9d61918592e6 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • Runner/General选项卡下,添加框架UnityFramework.framework
    frc fb0d4e58f15f632799561f02f4bb0fc8 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  1. Flutter项目中进行配置
  • 项目根目录pubspec.yaml文件中添加flutter_unity_widget: ^0.1.6+5
    frc 5c245dee72d42505da6e6384984317b0 - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
    image.png
  • lib/main.dart文件内容修改为以下内容
import 'package:flutter/material.dart';
import 'package:flutter_unity_widget/flutter_unity_widget.dart';

void main() => runApp(MyApp());

class MyApp extends StatefulWidget {
  @override
  _MyAppState createState() => _MyAppState();
}

class _MyAppState extends State {
  static final GlobalKey _scaffoldKey =
      GlobalKey();
  UnityWidgetController _unityWidgetController;
  double _sliderValue = 0.0;

  @override
  void initState() {
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        key: _scaffoldKey,
        appBar: AppBar(
          title: const Text('Unity Flutter Demo'),
        ),
        body: Card(
          margin: const EdgeInsets.all(8),
          clipBehavior: Clip.antiAlias,
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.circular(20.0),
          ),
          child: UnityWidget(
            onUnityViewCreated: onUnityCreated,
            isARScene: false,
            onUnityMessage: onUnityMessage,
          ),
        ),
      ),
    );
  }

  // Communication from Unity to Flutter
  void onUnityMessage(controller, message) {
    print('Received message from unity: ${message.toString()}');
  }

  // Callback that connects the created controller to the unity controller
  void onUnityCreated(controller) {
    this._unityWidgetController = controller;
  }
}
  • flutter run 大功告成

总结

  按照我的办法,你是否成功完成flutter_unity_widget插件的初步使用了呢?如果还有什么疑问,欢迎关注“乔悟空”公众号,加入flutter讨论群进行求助哦!欢迎你的加入。

frc 63352b1ebce72e08dfe9da9928b9e4ea - 【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程
微信公众号二维码.png

【乔悟空】flutter 3d flutter_unity_widget 详细安装使用教程