Sunday, 15 December 2013

UnityPlayer as Subview with Transparent Background (iOS)

In a previous post I was experimenting with Android & Unity to be able to use Unity as subview overlaying a native UI made with Android... now I tried to do the same but with iOS.

Since Unity 4.2 it became easier to override unity ios view to do your own custom one and combine it with native views inside iOS application.

In this post I will outline the steps to have a simple unity scene with native controls using Unity 4.2 (basic license).

Unity Scene
  1. For simplicity I created a scene with a rotating cube and for the camera I set the color to (0,0,0,0) 
  2. Inside one of my "RotatingCube" gameobject's scripts I added a listener function that simply toggle the direction everytime it is called:
  3. void OnTogglePressed(string message)
         Debug.Log("Toggle direction");
         direction *= -1;
  4. Once all done save the scene and build for iOS to generate XCode project

The generated XCode project
  1. First thing to do is to support transparent background in unity view. To do that simply do a minor change to CreateSystemRenderingSurface method inside to have:
    surface->layer.opaque = NO;
  2. Create UIViewController (you can also subclass UnityViewControllerBase if you wish) with some native controls: In my case I simply added a UILabel and UIButton (which I will use to toggle rotation direction) 
  3. Create a subclass for UnityAppController (e.g. MyUnityAppController) where we will override some methods:
    // the header file
    #import "UnityView.h"
    #import "UnityAppController.h"
    @interface MyUnityAppController : UnityAppController
    // the implementation file
    #import "MyUnityAppController.h"
    #import "MyNativeViewController.h"
    @interface MyUnityAppController ()
    @implementation MyUnityAppController
    // I simply removed the user interaction from unityview
    - (UnityView*)initUnityViewImpl
        UnityView *unityView = [[UnityView alloc] initWithFrame:[[UIScreen mainScreen] bounds]];
        unityView.userInteractionEnabled = NO;
        return unityView;
    // here I am using my UIViewController as _rootController
    - (void)createViewHierarchyImpl
     _rootView = _unityView;
     _rootController = [[MyNativeViewController alloc] init];
    // I had to override this method (although unity doesn't recommend it) to change one line 
    // instead of assigning _rootView as _rootViewController.view I've added it as a subview
    - (void)createViewHierarchy
     [self createViewHierarchyImpl];
     NSAssert(_rootView != nil, @"createViewHierarchyImpl must assign _rootView");
     NSAssert(_rootController != nil, @"createViewHierarchyImpl must assign _rootController");
     [_rootController.view addSubview:_rootView];
     if([_rootController isKindOfClass: [UnityViewControllerBase class]])
      [(UnityViewControllerBase*)_rootController assignUnityView:_unityView];
  5. Inside my UIViewController I set the UIButton to call "OnTogglePressed" method mentioned earlier when building the scene using UnitySendMessage method:
        UnitySendMessage("RotatingCube", "OnTogglePressed", "");
  7. Last thing to do is to change the appcontroller name inside from UnityAppController to MyUnityAppController then you should be able to see the cube scene with the label and the button:
Video of it in action:

There are few things which need to be investigated: for example whether we can have only a part of the screen for Unity Scene (similar to what I've done with Android). Setting unityview frame didn't give me expected results so I might need to dig deeper.
For now this seems to work using full screen.

If anyone have good ideas or did something similar please share! :-)

Monday, 9 December 2013

"Infinite Scrolling" for Unity3D Using NGUI's UIScrollView (1st attempt)

For latest update please check this post instead
I've been using NGUI for UI related work on my Unity project for the past few weeks and it is a breath of fresh air when compared to the stock UnityGUI (OnGUI()).

Part of my project relate to display a relatively large amount of data dynamically (well not very large but in thousands) and instantiating a prefab for each data element didn't seem like a good idea to me :-)

So instead I decided to add some logic to do a scroll view with fixed pool of items that I reuse and position according to the direction of the scroll and get it fed with the correct data.

Although I am sure that there are existing solutions I decided to do my own.

The logic so far is built using UIGrid with fixed cell height for the moment (not well suited for UITable with different cell height) and the panel is using soft clip. the Scroll view is using momentum only (Spring physics breaks my current logic for some reason)

Initialization steps:
  1. Pool size is calculated using the cell height against the panel height plus some buffer (currently I am using a buffer of 4 list items)
  2. List items' pool is instantiated with corresponding data from the data list
  3. A map is maintained to keep track of which data item are used in which list items
While Scrolling:
  1. Any item that turns a visible from an invisible state will notify the main controller
  2. We check the direction of the scroll based on which item is visible (e.g. if the next item is visible means that we are dragging upwards)
  3. based on the direction we reuse the items at the top or the bottom of the list accordingly (e.g. if direction is up the top item moves to the bottom and get populated with data from the corresponding data element)

This is a first attempt and further posts will follow as the logic evolve.

I am in the process of making this component available as open source.
Meanwhile we've launched a free app on Android that uses it called Avatar Messenger
==UPDATE 2==
 The component is available as open source