This repository has been archived on 2020-08-22. You can view files and clone it, but cannot push or open issues or pull requests.
flutter-unity-view-widget/README.md

316 lines
11 KiB
Markdown
Raw Normal View History

2019-03-09 10:47:09 -05:00
# flutter_unity_widget
2019-03-27 03:30:12 -04:00
[![version][version-badge]][package]
[![MIT License][license-badge]][license]
[![PRs Welcome][prs-badge]](http://makeapullrequest.com)
[![Watch on GitHub][github-watch-badge]][github-watch]
[![Star on GitHub][github-star-badge]][github-star]
2019-03-26 17:06:17 -04:00
Flutter unity 3D widget for embedding unity in flutter. Add a Flutter widget to show unity. Works on Android, iOS in works.
2019-03-09 10:47:09 -05:00
2019-03-27 03:30:12 -04:00
## Installation
First depend on the library by adding this to your packages `pubspec.yaml`:
```yaml
dependencies:
2019-07-31 05:36:50 -04:00
flutter_unity_widget: ^0.1.4
2019-03-27 03:30:12 -04:00
```
Now inside your Dart code you can import it.
```dart
2019-03-29 02:44:00 -04:00
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
2019-03-27 03:30:12 -04:00
```
2019-03-27 14:56:47 -04:00
<br />
2019-03-09 10:47:09 -05:00
2019-03-26 17:06:17 -04:00
## Preview
2019-03-09 10:47:09 -05:00
2019-03-28 14:29:41 -04:00
![gif](https://github.com/snowballdigital/flutter-unity-view-widget/blob/master/2019_03_28_19_23_37.gif?raw=true)
2019-03-28 14:05:38 -04:00
2019-03-27 14:56:47 -04:00
<br />
## Setup Project
For this, there is also a video tutorial, which you can find a [here](https://www.youtube.com/watch?v=exNPmv_7--Q).
2019-03-26 17:06:17 -04:00
### Add Unity Project
2019-03-29 02:46:23 -04:00
1. Create an unity project, Example: 'UnityDemoApp'.
2. Create a folder named `unity` in flutter project folder.
2019-03-27 03:30:12 -04:00
2. Move unity project folder to `unity` folder.
Now your project files should look like this.
```
.
├── android
├── ios
├── lib
├── test
├── unity
2019-03-29 02:46:23 -04:00
│ └── <Your Unity Project> // Example: UnityDemoApp
2019-03-27 03:30:12 -04:00
├── pubspec.yml
├── README.md
```
2019-03-26 17:06:17 -04:00
### Configure Player Settings
2019-03-27 03:30:12 -04:00
1. First Open Unity Project.
2019-03-26 17:06:17 -04:00
2019-08-01 07:13:20 -04:00
2. Click Menu: File => Build Settings
2019-03-26 17:06:17 -04:00
2019-08-01 07:13:20 -04:00
Be sure you have at least one scene added to your build.
3. => Player Settings
2019-03-27 03:30:12 -04:00
2019-03-27 14:56:47 -04:00
**Android Platform**:
1. Make sure your `Graphics APIs` are set to OpenGLES3 with a fallback to OpenGLES2 (no Vulkan)
2. Change `Scripting Backend` to IL2CPP.
2019-03-26 17:06:17 -04:00
3. Mark the following `Target Architectures` :
2019-03-27 14:56:47 -04:00
- ARMv7 ✅
- ARM64 ✅
- x86 ✅
2019-03-26 17:06:17 -04:00
2019-08-01 08:11:30 -04:00
<img src="https://raw.githubusercontent.com/snowballdigital/flutter-unity-view-widget/master/Screenshot%202019-03-27%2007.31.55.png" width="400" />
2019-03-26 17:06:17 -04:00
2019-08-01 07:13:20 -04:00
**iOS Platform**:
2019-08-01 08:11:30 -04:00
1. This only works with Unity version >=2019.3 because uses Unity as a library!
2. Other Settings find the Rendering part, uncheck the `Auto Graphics API` and select only `OpenGLES3`.
3. Depending on where you want to test or run your app, (simulator or physical device), you should select the appropriate SDK on `Target SDK`.
2019-03-27 14:56:47 -04:00
<br />
2019-03-29 04:05:49 -04:00
2019-08-01 08:11:30 -04:00
2019-03-27 03:30:12 -04:00
2019-03-27 14:56:47 -04:00
<br />
2019-03-27 03:30:12 -04:00
2019-03-26 17:06:17 -04:00
### Add Unity Build Scripts and Export
2019-08-01 07:13:20 -04:00
Copy [`Build.cs`](https://github.com/snowballdigital/flutter-unity-view-widget/tree/master/scripts/Editor/Build.cs) and [`XCodePostBuild.cs`](https://github.com/snowballdigital/flutter-unity-view-widget/tree/master/scripts/Editor/XCodePostBuild.cs) to `unity/<Your Unity Project>/Assets/Scripts/Editor/`
2019-03-27 03:30:12 -04:00
Open your unity project in Unity Editor. Now you can export unity project with `Flutter/Export Android` or `Flutter/Export IOS` menu.
2019-03-28 14:05:38 -04:00
2019-03-27 15:01:55 -04:00
<img src="https://github.com/snowballdigital/flutter-unity-view-widget/blob/master/Screenshot%202019-03-27%2008.13.08.png?raw=true" width="400" />
2019-03-27 03:30:12 -04:00
Android will export unity project to `android/UnityExport`.
IOS will export unity project to `ios/UnityExport`.
2019-03-27 14:56:47 -04:00
<br />
**Android Platform Only**
1. After exporting the unity game, open Android Studio and and add the `Unity Classes` Java `.jar` file as a module to the unity project. You just need to do this once if you are exporting from the same version of Unity everytime. The `.jar` file is located in the ```<Your Flutter Project>/android/UnityExport/lib``` folder
2019-03-27 14:56:47 -04:00
2. Next open `build.gradle` of `flutter_unity_widget` module and replace the dependencies with
```gradle
dependencies {
implementation project(':UnityExport') // The exported unity project
implementation project(':unity-classes') // the unity classes module you added from step 1
2019-03-27 14:56:47 -04:00
}
```
3. Next open `build.gradle` of `UnityExport` module and replace the dependencies with
```gradle
dependencies {
implementation project(':unity-classes') // the unity classes module you added from step 1
2019-03-27 14:56:47 -04:00
}
```
4. Next open `build.gradle` of `UnityExport` module and remove these
```gradle
bundle {
language {
enableSplit = false
}
density {
enableSplit = false
}
abi {
enableSplit = true
}
}
```
2019-03-26 17:06:17 -04:00
2019-08-01 07:13:20 -04:00
**iOS Platform Only**
2019-08-01 08:11:30 -04:00
1. open your ios/Runner.xcworkspace (workspace!, not the project) in Xcode and add the exported project in the workspace root (with a right click in the Navigator, not on an item -> Add Files to “Runner” -> add the UnityExport/Unity-Iphone.xcodeproj file
<img src="workspace.png" width="400" />
2019-08-01 07:13:20 -04:00
2. Select the Unity-iPhone/Data folder and change the Target Membership for Data folder to UnityFramework
<img src="change_target_membership_data_folder.png" width="400" />
3. Add this to your Runner/Runner/Runner-Bridging-Header.h
2019-08-01 07:16:57 -04:00
```c
#import "UnityUtils.h"
```
2019-08-01 07:13:20 -04:00
4. Add to AppDelegate.swift before the GeneratePluginRegistrant call:
2019-08-01 07:16:57 -04:00
```swift
InitArgs(CommandLine.argc, CommandLine.unsafeArgv)
```
2019-08-01 07:13:20 -04:00
5. Opt-in to the embedded views preview by adding a boolean property to the app's `Info.plist` file with the key `io.flutter.embedded_views_preview` and the value `YES`.
2019-03-27 14:56:47 -04:00
<br />
2019-07-31 03:46:56 -04:00
### AR Foundation (ANDROID only at the moment)
If you want to use Unity for integrating Augmented Reality in your Flutter app, a few more changes are required:
1. Export the Unity Project as previously stated (using the Editor Build script).
2. Check if the exported project includes all required Unity libraries (.so) files (`lib/\<architecture\>/libUnityARCore.so` and `libarpresto_api.so`). There seems to be a bug where a Unity export does not include all lib files. If they are missing, use Unity to build a standalone .apk of your AR project, unzip the resulting apk, and copy over the missing .lib files to the `UnityExport` module.
3. Similar to how you've created the `unity-classes` module in Android Studio, create similar modules for all exported .aar and .jar files in the `UnityExport/libs` folder (`arcore_client.aar`, `unityandroidpermissions.aar`, `UnityARCore.aar`).
4. Update the build.gradle script of the `UnityExport` module to depend on the new modules (again, similar to how it depends on `unity-classes`).
5. Finally, update your Dart code build method where you include the `UnityWidget` and add `isARScene: true,`.
Sadly, this does have the side effect of making your Flutter activity act in full screen, as Unity requires control of your Activity for running in AR, and it makes several modifications to your Activity as a result (including setting it to full screen).
2019-03-27 14:56:47 -04:00
2019-03-26 17:06:17 -04:00
### Add UnityMessageManager Support
2019-03-27 14:56:47 -04:00
2019-03-27 03:30:12 -04:00
Copy [`UnityMessageManager.cs`](https://github.com/snowballdigital/flutter-unity-view-widget/blob/master/example/Unity/Assets/UnityMessageManager.cs) to your unity project.
Copy this folder [`JsonDotNet`](https://github.com/snowballdigital/flutter-unity-view-widget/tree/master/example/Unity/Assets/JsonDotNet) to your unity project.
2019-03-26 17:06:17 -04:00
2019-03-27 03:30:12 -04:00
Copy [`link.xml`](https://github.com/snowballdigital/flutter-unity-view-widget/blob/master/example/Unity/Assets/link.xml) to your unity project.
2019-03-26 17:06:17 -04:00
2019-03-27 14:56:47 -04:00
<br />
2019-03-27 03:30:12 -04:00
2019-03-27 14:56:47 -04:00
## Examples
### Simple Example
2019-03-27 03:30:12 -04:00
2019-03-27 14:56:47 -04:00
```dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
class UnityDemoScreen extends StatefulWidget {
UnityDemoScreen({Key key}) : super(key: key);
@override
_UnityDemoScreenState createState() => _UnityDemoScreenState();
}
class _UnityDemoScreenState extends State<UnityDemoScreen>{
static final GlobalKey<ScaffoldState> _scaffoldKey =
GlobalKey<ScaffoldState>();
UnityWidgetController _unityWidgetController;
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
body: SafeArea(
bottom: false,
child: WillPopScope(
onWillPop: () {
// Pop the category page if Android back button is pressed.
},
child: Container(
color: colorYellow,
child: UnityWidget(
onUnityViewCreated: onUnityCreated,
),
),
),
),
);
}
// Callback that connects the created controller to the unity controller
2019-03-29 02:53:28 -04:00
void onUnityCreated(controller) {
this._unityWidgetController = controller;
2019-03-27 14:56:47 -04:00
}
}
```
<br />
### Communicating with and from Unity
```dart
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:flutter_unity_widget/flutter_unity_widget.dart';
class UnityDemoScreen extends StatefulWidget {
UnityDemoScreen({Key key}) : super(key: key);
@override
_UnityDemoScreenState createState() => _UnityDemoScreenState();
}
class _UnityDemoScreenState extends State<UnityDemoScreen>{
static final GlobalKey<ScaffoldState> _scaffoldKey =
GlobalKey<ScaffoldState>();
UnityWidgetController _unityWidgetController;
2019-03-29 02:53:28 -04:00
bool paused = false;
2019-03-27 14:56:47 -04:00
Widget build(BuildContext context) {
return Scaffold(
key: _scaffoldKey,
2019-03-29 02:53:28 -04:00
body: Scaffold(
key: _scaffoldKey,
appBar: AppBar(
title: const Text('Unity Flutter Demo'),
),
body: Container(
child: Stack(
children: <Widget>[
UnityWidget(
2019-03-27 14:56:47 -04:00
onUnityViewCreated: onUnityCreated,
),
2019-03-29 02:53:28 -04:00
Positioned(
bottom: 40.0,
left: 80.0,
right: 80.0,
child: MaterialButton(
onPressed: () {
if(paused) {
_unityWidgetController.resume();
setState(() {
paused = false;
});
} else {
_unityWidgetController.pause();
setState(() {
paused = true;
});
}
},
color: Colors.blue[500],
child: Text(paused ? 'Start Game' : 'Pause Game'),
),
),
],
)),
2019-03-27 14:56:47 -04:00
),
);
}
// Callback that connects the created controller to the unity controller
2019-03-29 02:53:28 -04:00
void onUnityCreated(controller) {
this._unityWidgetController = controller;
2019-03-27 14:56:47 -04:00
}
}
```
2019-03-27 03:30:12 -04:00
2019-03-29 04:05:49 -04:00
## API
- pause()
2019-07-31 03:46:56 -04:00
## Known issues
- Android Export requires several manual changes
- Using AR will make the activity run in full screen (hiding status and navigation bar).
2019-03-27 03:30:12 -04:00
[version-badge]: https://img.shields.io/pub/v/flutter_unity_widget.svg?style=flat-square
[package]: https://pub.dartlang.org/packages/flutter_unity_widget/versions/0.1.2
[license-badge]: https://img.shields.io/github/license/snowballdigital/flutter-unity-view-widget.svg?style=flat-square
[license]: https://github.com/snowballdigital/flutter-unity-view-widget/blob/master/LICENSE
[prs-badge]: https://img.shields.io/badge/PRs-welcome-brightgreen.svg?style=flat-square
[prs]: http://makeapullrequest.com
[github-watch-badge]: https://img.shields.io/github/watchers/snowballdigital/flutter-unity-view-widget.svg?style=social
[github-watch]: https://github.com/snowballdigital/flutter-unity-view-widget/watchers
[github-star-badge]: https://img.shields.io/github/stars/snowballdigital/flutter-unity-view-widget.svg?style=social
[github-star]: https://github.com/snowballdigital/flutter-unity-view-widget/stargazers