Integration with Ionic framework
We are working on an implementation, where we have to integrate the unity work into a mobile app using ionic framework.
Our requirement is to create a unity character by taking a snap from the mobile and providing it to the unity app and creating an animated video on the fly.(prefered mp4 output)
We need your help in finding, if its possible using unity?
Also, we are curious if you above can be done using crazy talk.
Okay– I have a better answer for you.
I successfully integrated Ionic/Cordova with Unity natively.
Basically, I followed the steps at these tutorials to get started:
iOS https://the-nerd.be/2015/11/13/integrate-unity-5-in-a-native-ios-app-with-xcode-7/
Android https://nevzatarman.com/2015/01/04/unity-android-tutorial-opening-unity-scene-from-an-activity/
I pretty much followed these to a T, but ins$$anonymous$$d of building to a blank native app, I added this all to the Ionic app. So where a blank file may have been used I ins$$anonymous$$d modified the existing Ionic project files where it made sense (i.e. AppDelegate.h)
The part that was a little trickier was getting back from Unity.
Here's my C Sharp script:
using UnityEngine;
using System.Collections;
using System.Runtime.InteropServices;
public class HideUnity : $$anonymous$$onoBehaviour {
[DllImport ("__Internal")]
private static extern bool uHideUnity ();
public void hide(){
#if UNITY_IOS
if (uHideUnity () == true) {
Debug.Log ("Successfully returned data from external plugin");
}
#endif
#if UNITY_ANDROID
Application.Quit();
#endif
}
}
On Android, you need to add this to your manifest xml file:
android:process=":Unity$$anonymous$$ills$$anonymous$$e"
So your "GameActivity" (if you followed the above tutorial) will have this entry for the activity
<activity
android:name="<your_package_name>.GameActivity"
android:configChanges="mcc|mnc|locale|touchscreen|keyboard|keyboardHidden|navigation|orientation|screenLayout|ui$$anonymous$$ode|screenSize|smallestScreenSize|fontScale"
android:label="@string/app_name"
android:launch$$anonymous$$ode="singleTask"
android:process=":Unity$$anonymous$$ills$$anonymous$$e">>
</activity>
That way, when you quit the Unity application, it will close the process but not kill your Ionic app.
For iOS, you'll need to add a mm file to your Plugins>iOS directory in Unity. Here's the code for that:
#import <Foundation/Foundation.h>
#import "AppDelegate.h"
@interface $$anonymous$$yUnityPlugin:NSObject
/* method declaration */
+ (BOOL)hideUnityWindow;
@end
@implementation $$anonymous$$yUnityPlugin
+ (BOOL)hideUnityWindow {
AppDelegate *appDel = (AppDelegate *)[[UIApplication sharedApplication] delegate];
[appDel hideUnityWindow];
return true;
}
@end
extern "C"
{
bool uHideUnity(){
return [$$anonymous$$yUnityPlugin hideUnityWindow];
}
}
Finally, I've created a Cordova plugin that will let you do the actual calls to native code:
https://github.com/shawticus/cordova2unity
(The iOS files for the modified AppDelegate and UnityAppController are in there, too. You should still follow the tutorials linked to above!!!!!)
Wonderful, It will be make unity - ionic integration easier.
And is this method possible to use in Nativescript ?
Hi, but how can I export from Unity? And then how can import file into Ionic? Thanks :)
@5c4r3cr0w did you manage to swap views from $$anonymous$$ainActivity to GameActivity on android? Do we need to move some files from unity project to android?
Hi, Shawww,
I need to integrate the Ionic App and Unity3D, but cannot be done following your message. Can you please tell me more detail information ? Step by Step will be appreciated. Thanks Advanced!
$$anonymous$$y apologies that it took so long, but I just posted the step-by-step for ya as an answer here.
I know it's a little late in co$$anonymous$$g, but here's the definitive guide on how to do this. Let me know if it works for you. Or doesn't.
https://docs.google.com/document/d/1V8eh5Gh2O0fNc4gOvqdpLOwO9VvRrR0dP8EN2YAcb88/edit
Hi @shawww,
I have an issue with your guide, I'm trying your example to make it work on my android device. As you explained I installed the plugin (ionic plugin install) but when I launch it either with the command "ionic lab" or on my device with an apk the link doesn't connect to anything. Did I do something wrong ?
Anyway, thanks for your efforts. I'm trying to put some augmented reality functionalities on Unity and display the views on a web app (made with ionic for instance) and this might be the solution I'm looking for.
Hi, did you manage to solve the conflicts? Also I'm wondering if you see an error dialog that the current device doesn't support the view when trying to launch the GameActivity?
Answer by Arthurisme · Aug 04, 2016 at 01:15 PM
Yes, there are some methods to implement your plan:
1: you can call unity 3d view(as a native view) in ionic same as any Cordova app, so that means you need to make a bridge between the native java (or C++ NDK) in Android and your ionic js code, or between native object-c and your ionic js code.
2, you can transfer your unity 3d application to javascript and webGL, and then call unity app directly by ionic. This way is super easy. but the performance is not good as the method afore said.
I have do both methods for my previous boss, I think for most small 3d function, method 2 is fair enough. There are some old mobile phone do not support webGL, But those old phone also can not run native 3d in good performance.
Hey can you guide me a little about this bridge? Or how can I start? or where to look for.
Hi, For method 1, I have done in java and object-c in android studio and x-code. You can embedded unity view into view from cordova. or you can embeded cordova view into unity view. or you can make a new view include both cordova and unity. such as: http://stackoverflow.com/questions/33068892/add-ionic-framework-to-an-existing-android-studio-app http://devgirl.org/2012/11/15/embed-cordovaphonegap-in-your-native-ios-app/
For me, because I have poor skill in native ios, so at last I use unity javascript file which is very easy to communicate with angularjs, both angular 1 and angular 1.
I assume you figured this out one way or another, but I just posted a guide on how to do it for Android and iOS in a comment below, hope it still helps!
Answer by shawww · Jan 30, 2017 at 01:42 PM
EDIT: The definitive guide on how to do this is here:
https://docs.google.com/document/d/1V8eh5Gh2O0fNc4gOvqdpLOwO9VvRrR0dP8EN2YAcb88/edit
Thank you very much for taking time to explain all this stuff, I will look into them right away.
Hello @shawww
While installing the plugin, do I have to follow the steps in the "How To Install" word file? If yes, which "Android$$anonymous$$anifest" should I modify? Because there isn't one in Ionic folder.
Edit about this one: "ionic platform add android" gave me the platforms/android folder and there is an Android$$anonymous$$anifest.xml there. Is this the one?
I am confused about exactly what to copy to where. I feel like I have to copy everything in the Unity project folder into the android folder of the plugin, rather than just "libs". Otherwise, what will happen to the Unity assets? In this solution, we never copy them anywhere.
I went ahead and did the steps as best as I could anyway, but then I get "cordova2unity not defined" error... I don't see any "cordova2unity.js" in my Ionic project, and I did install the plugin.
I'm in deep man :D Totally lost.
Thanks in advance.
Has anyone done this with Unity 5.5 and XCode 8.2? I'm getting a lot of errors and the steps don't exactly line up any more. For example there is no frameworks folder or xcconfig files created for the Unity iOS build. I followed the rest of the steps and used a tool to create the xcconfig from the unity ios project but for every unity function i get the error "Use of undeclared identifier"
So I am almost there I think... I compile all source but the linker fails with 11 errors: Apple $$anonymous$$ach-O Linker (id) Error:
"_OpenCVForUnitySetGraphicsDevice", referenced from: -[AppDelegate shouldAttachRenderDelegate] in AppDelegate.o
"_kCLLocationAccuracy$$anonymous$$ilometer", referenced from: LocationServiceInfo::LocationServiceInfo() in iPhone_Sensors.o
"_OpenCVForUnityRenderEvent", referenced from: -[AppDelegate shouldAttachRenderDelegate] in AppDelegate.o
"OBJC_CLASS$_$$anonymous$$P$$anonymous$$oviePlayerController", referenced from: objc-class-ref in FullScreenVideoPlayer.o
"_$$anonymous$$P$$anonymous$$oviePlayerPlaybackDidFinishNotification", referenced from: -[$$anonymous$$PVideoPlayback actuallyStartThe$$anonymous$$ovie:] in FullScreenVideoPlayer.o
"_$$anonymous$$P$$anonymous$$oviePlayerDidExitFullscreenNotification", referenced from: -[$$anonymous$$PVideoPlayback actuallyStartThe$$anonymous$$ovie:] in FullScreenVideoPlayer.o
"_$$anonymous$$P$$anonymous$$ovieSourceTypeAvailableNotification", referenced from: -[$$anonymous$$PVideoPlayback actuallyStartThe$$anonymous$$ovie:] in FullScreenVideoPlayer.o
"OBJC_CLASS$_CLLocation$$anonymous$$anager", referenced from: objc-class-ref in iPhone_Sensors.o
"_$$anonymous$$P$$anonymous$$ovie$$anonymous$$ediaTypesAvailableNotification", referenced from: -[$$anonymous$$PVideoPlayback actuallyStartThe$$anonymous$$ovie:] in FullScreenVideoPlayer.o
"_$$anonymous$$P$$anonymous$$ovieNaturalSizeAvailableNotification", referenced from: -[$$anonymous$$PVideoPlayback actuallyStartThe$$anonymous$$ovie:] in FullScreenVideoPlayer.o
ld: symbol(s) not found for architecture arm64
Any idea what these errors are or why they'd be failing? Am I missing plugin references in unity or .a library link? Why is OpenCV in your AppDelegate @shawww ? The others are strange as well... Especially since the native unity Xcode project (not embedded into the ionic project) builds fine.
Any help would be appreciated!
WooHoo.. I solved the linker errors by commenting out the openCV calls and adding the appropriate frameworks. I can now build and run; however unity is now the first thing that shows up and I never see my ionic app under it.. Thoughts how to fix this pls?
Dear @shawww thank you very much for your guide! I've read it but I have some more questions... Please could you help me? How must I export from Unity and then where I must put these files in my Ionic 2 project folders (for Android and for IOS)? THAN$$anonymous$$S in andvance and read you very soon! $$anonymous$$
Answer by shawww · Aug 15, 2016 at 06:25 AM
I've found a really easy solution– using a plugin like UniWebView or Unity-WebView (which is free on Github – https://github.com/gree/unity-webview , UniWebView is like $20)
Since Ionic / Phone Gap / Cordova is basically just building an app that loads up a WebView, this seems to work really well. And you can use links with a special Javascript callback (read the docs) to, say, load a scene with your Unity stuff.
To add Ionic, I just copy my www folder into my streaming assets, create a blank scene, delete the camera and just load up the webview. From there I can open different scenes in my Unity project. While it's not the same battery performance as, say, suspended Unity completely, it seems to work well-enough, and the frame rate in the webview is definitely usable.
What I would LOVE to do (and if you make any headway on this, please let me know!!!) would be to go the other way, and integrate my Unity stuff into Ionic/Cordova through XCode, but this seems to require a level of knowledge in ViewControllers in Obj C and Java that I don't possess. However, I've found some resources that might help you along your journey:
iOS http://www.the-nerd.be/2015/08/20/a-better-way-to-integrate-unity3d-within-a-native-ios-application/ https://github.com/mgcrea/cordova-plugin-unity
Android
http://stackoverflow.com/questions/23467994/errors-managing-the-unityplayer-lifecycle-in-a-native-android-application/23541969#23541969 http://www.41post.com/5292/programming/unity-and-android-create-an-unity-app-with-a-custom-layout http://forum.unity3d.com/threads/using-unity-android-in-a-sub-view.98315/page-2
Hope that helps!
Hello, I just test your resource and find it is just opposite function: It all a webui into unity3d view. That means you can use browser in unity view. Am I wrong?
Right. If you're using Ionic without plug-ins – just HT$$anonymous$$L5 / CSS / JavaScript, then it will work great, and you can do everything in Unity and not have to deal with XCode much, other than to build your project. If you need more advanced functionality, you'll need to create that native bridge, such as the previous answer.
The first link I pasted has a pretty good tutorial on how to create that bridge. Here's some more information I found today: http://answers.unity3d.com/questions/40494/who-can-help-me-how-to-get-the-view-controlleruivi.html
Answer by Shaymaa86 · Dec 19, 2016 at 10:15 AM
Hi, 1. I have followed this tutorial IOS https://the-nerd.be/2015/11/13/integrate-unity-5-in-a-ative-ios-app-with-xcode-7/ 2. I have the plugin installed Https://github.com/shawticus/cordova2unity 3. What is the next step
Should I copy the unity.xcode into ionic folder? please any advice or Detailed tutorial
Thank you very much. i have problem when i try to build and run the test example
1) Unexpected interface name "UIApplication": expected expression --> cordova2unity.m 2) use of undeclared identifier "AppDelegate" --> cordova2unity.m 3) and another Failure in cordova2unity.m
can you help me ?
Answer by nerdSenpai · Jan 30, 2017 at 12:00 PM
Hello,
I have an Ionic application. I would like it to have Augmented Reality capability. When the user presses a button, I would like to launch the Unity app I made with Vuforia. How might I do this?
My problem is very similar to this one so I didn't want to create a duplicate. I was not able to follow @shawww 's answer since I have no idea how eclipse or native android apps work.
I am willing to use UniWebView plugin if it helps, but I don't know it would.
Is there a better and easier solution to this? If not, can someone please explain how to do this step by step? @5c4r3cr0w , were you able to solve this problem?
Thank you in advance.
Sorry this is a little late. I've made a step-by-step guide that should make more sense.
https://docs.google.com/document/d/1V8eh5Gh2O0fNc4gOvqdpLOwO9VvRrR0dP8EN2YAcb88/edit?usp=sharing
Your answer
