{"id":1528,"date":"2015-12-03T12:42:16","date_gmt":"2015-12-03T12:42:16","guid":{"rendered":"https:\/\/www.gravityjack.com\/?p=1528"},"modified":"2023-11-29T12:42:45","modified_gmt":"2023-11-29T12:42:45","slug":"native-ui-overlay-for-unity-mobile-tutorials-part-1-ios","status":"publish","type":"post","link":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/","title":{"rendered":"Native UI Overlay for Unity | Mobile Tutorials – Part 1 (iOS)"},"content":{"rendered":"\n

Note:<\/strong> Apple has updated some things, since this post was originally posted. If you’re receiving some errors, have a peek at the potential resolution at the bottom of this post. If that doesn’t resolve things, hit us up!<\/p>\n\n\n\n

There\u2019s no two ways about it \u2013\u2013 Gravity Jack builds a lot of Unity and native mobile apps. We use Unity often because, when it comes to gaming, augmented reality or virtual reality, it\u2019s one of the best tools possible for showing 3D content.<\/p>\n\n\n\n

One of the biggest challenges when using Unity for mobile AR\/VR purposes can be providing a user interface that feels native. While Unity 5 improved the UI widget interactions, it\u2019s not difficult to be left wanting more when compared to native UI widgets.<\/p>\n\n\n\n

Here at Gravity Jack, we won\u2019t settle for a \u2018meh\u2019 or even a \u2018huh. not bad!\u2019 user experience, so we set out to integrate the native UI widgets with a Unity scene, writing the latest chapter in our constant quest to \u2018create The Future Experience!\u2019<\/p>\n\n\n\n

For starters, our team required a solution that is easy to maintain and that will work with our automated build pipeline. Additionally, it must work on both iOS and Android platforms.<\/p>\n\n\n\n

After a bit of work, we\u2019re glad to say that this series of back-to-back posts will show you how you too can fuse the native UI with Unity. Today we\u2019re looking at iOS. Tomorrow, we\u2019ll be posting Android so stay tuned!<\/p>\n\n\n\n\n\n\n\n

iOS Native UI Overlay for Unity<\/h3>\n\n\n\n

<\/strong><\/h4>\n\n\n\n

1)<\/strong> Create a custom app delegate that overloads UnityAppController. This file should be a .mm file such as YourCustomAppDelegatesName.mm<\/p>\n\n\n\n

#import \u201cUnityAppController.h\u201d; @interface YourCustomAppDelegatesName : UnityAppController<\/em><\/p>\n\n\n\n

2)<\/strong> Add your UI that you want to overlay in<\/p>\n\n\n\n

willStartWithViewController:(UIViewController*)controller<\/em><\/p>\n\n\n\n

I loaded my UI from a xib file.<\/p>\n\n\n\n

– (void)willStartWithViewController:(UIViewController*)controller { \/\/ Load your custom view controller from a xib. _viewController = [[[MyCustomViewController alloc] initWithNibName:@”MyCustomViewController” bundle:[NSBundle mainBundle]] retain];<\/em><\/p>\n\n\n\n

\/\/ Make your view controller the root view controller<\/em> _rootController = _viewController;<\/em><\/p>\n\n\n\n

\/\/ Setup Unity View<\/em> _unityView.contentScaleFactor = UnityScreenScaleFactor([UIScreen mainScreen]);<\/em> _unityView.autoresizingMask = UIViewAutoresizingFlexibleWidth | UIViewAutoresizingFlexibleHeight;<\/em> _unityView.frame = _rootController.view.bounds;<\/em><\/p>\n\n\n\n

\/\/ Set the root view to be your custom view controller’s root view.<\/em> _rootView = _rootController.view;<\/em><\/p>\n\n\n\n

\/\/ Add the unity view to the back of your custom view controller<\/em> [_rootController.view addSubview:_unityView];<\/em> [_rootController.view sendSubviewToBack:_unityView];<\/em> }<\/em><\/p>\n\n\n\n

3)<\/strong> Finally add the define that unity has provided(in UnityAppController.h) for you to overload their app delegate at the bottom of your custom app delegate file. (yes the very end. after the @end.)<\/p>\n\n\n\n

@end<\/em><\/p>\n\n\n\n

IMPL_APP_CONTROLLER_SUBCLASS(YourCustomAppDelegatesName)<\/em><\/p>\n\n\n\n

4)<\/strong> Place all of your UI files and your custom app delegate into the \/Plugins\/iOS\/ folder.<\/p>\n\n\n\n

Note:<\/strong> If you are using ARC(Automatic Reference Counting) you will need to add the -fno-objc-arc flag to the compiler settings for your custom app delegate file.<\/p>\n\n\n\n

That should have you good to go! Hope this helps. If you have a question or find yourself struggling with a step, let us know by tweeting<\/a> us and we\u2019ll be sure to help however we can.<\/p>\n\n\n\n

Stay tuned tomorrow, when we\u2019ll be posting the Android tutorial for native UI overlay with Unity. Happy coding!<\/p>\n\n\n\n

Getting Errors?<\/strong><\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

Here’s a resolution, sent over from our friend @_theChief_<\/a>, that may get to the bottom of what you’re running into.
<\/p>\n\n\n\n

\"\"<\/figure>\n\n\n\n

If this helps you out, be sure to give him a virtual high-five! If not, hit us up with some screenshots and we’ll be glad to help. \ud83d\ude42<\/p>\n","protected":false},"excerpt":{"rendered":"

Note: Apple has updated some things, since this post was originally posted. If you’re receiving some errors, have a peek at the potential resolution at the bottom of this post. If that doesn’t resolve things, hit us up! There\u2019s no two ways about it \u2013\u2013 Gravity Jack builds a lot of Unity and native mobile … Native UI Overlay for Unity | Mobile Tutorials – Part 1 (iOS)<\/span><\/a><\/p>\n","protected":false},"author":9,"featured_media":1506,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"footnotes":""},"categories":[3],"tags":[],"class_list":["post-1528","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-news"],"acf":[],"yoast_head":"\nUI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack<\/title>\n<meta name=\"description\" content=\"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"UI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack\" \/>\n<meta property=\"og:description\" content=\"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!\" \/>\n<meta property=\"og:url\" content=\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/\" \/>\n<meta property=\"og:site_name\" content=\"Gravity Jack\" \/>\n<meta property=\"article:published_time\" content=\"2015-12-03T12:42:16+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-29T12:42:45+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg\" \/>\n\t<meta property=\"og:image:width\" content=\"344\" \/>\n\t<meta property=\"og:image:height\" content=\"194\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/jpeg\" \/>\n<meta name=\"author\" content=\"Gravity Admin\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Gravity Admin\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"3 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"WebPage\",\"@id\":\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/\",\"url\":\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/\",\"name\":\"UI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack\",\"isPartOf\":{\"@id\":\"https:\/\/www.gravityjack.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg\",\"datePublished\":\"2015-12-03T12:42:16+00:00\",\"dateModified\":\"2023-11-29T12:42:45+00:00\",\"author\":{\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc\"},\"description\":\"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!\",\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage\",\"url\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg\",\"contentUrl\":\"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg\",\"width\":344,\"height\":194,\"caption\":\"Gravity Jack In the Press\"},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/www.gravityjack.com\/#website\",\"url\":\"https:\/\/www.gravityjack.com\/\",\"name\":\"Gravity Jack\",\"description\":\"\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/www.gravityjack.com\/?s={search_term_string}\"},\"query-input\":\"required name=search_term_string\"}],\"inLanguage\":\"en-US\"},{\"@type\":\"Person\",\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc\",\"name\":\"Gravity Admin\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/www.gravityjack.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g\",\"caption\":\"Gravity Admin\"},\"url\":\"https:\/\/www.gravityjack.com\/author\/gjmagravityjack-com\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"UI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack","description":"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/","og_locale":"en_US","og_type":"article","og_title":"UI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack","og_description":"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!","og_url":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/","og_site_name":"Gravity Jack","article_published_time":"2015-12-03T12:42:16+00:00","article_modified_time":"2023-11-29T12:42:45+00:00","og_image":[{"width":344,"height":194,"url":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg","type":"image\/jpeg"}],"author":"Gravity Admin","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Gravity Admin","Est. reading time":"3 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"WebPage","@id":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/","url":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/","name":"UI Overlay for Unity | Mobile Tutorials for iOS - Gravity Jack","isPartOf":{"@id":"https:\/\/www.gravityjack.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage"},"image":{"@id":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage"},"thumbnailUrl":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg","datePublished":"2015-12-03T12:42:16+00:00","dateModified":"2023-11-29T12:42:45+00:00","author":{"@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc"},"description":"Curious how to integrate native UI elements with Unity? Our team helps clear it up with this tutorial -- perfect for mobile augmented reality (AR)!","inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityjack.com\/news\/native-ui-overlay-for-unity-mobile-tutorials-part-1-ios\/#primaryimage","url":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg","contentUrl":"https:\/\/www.gravityjack.com\/wp-content\/uploads\/2023\/11\/gj_news_nophoto_.jpg","width":344,"height":194,"caption":"Gravity Jack In the Press"},{"@type":"WebSite","@id":"https:\/\/www.gravityjack.com\/#website","url":"https:\/\/www.gravityjack.com\/","name":"Gravity Jack","description":"","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/www.gravityjack.com\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Person","@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/63c79a7e30c630a69e6e003ef7476fcc","name":"Gravity Admin","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/www.gravityjack.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/aa3d42e00068a5cdefa39bab3155196c?s=96&d=mm&r=g","caption":"Gravity Admin"},"url":"https:\/\/www.gravityjack.com\/author\/gjmagravityjack-com\/"}]}},"_links":{"self":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts\/1528","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/users\/9"}],"replies":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/comments?post=1528"}],"version-history":[{"count":0,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/posts\/1528\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/media\/1506"}],"wp:attachment":[{"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/media?parent=1528"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/categories?post=1528"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.gravityjack.com\/wp-json\/wp\/v2\/tags?post=1528"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}