How to Make and Publish iOS, Android and Google Cardboard VR Apps
Making a VR app is simple using InstaVR. It’s all drag-and-drop, with no coding required. Best of all, we have a “write once, publish to many” platform. Meaning that same VR experience you create can easily be published to iOS, Android, Google Cardboard and many other platforms. This guide helps new users to InstaVR create apps for the two most popular mobile platforms — iOS & Android (aka “mobile VR”). The apps can be experienced with or without a VR headset.
Good luck and let our Customer Success team know if you have any questions.
1. Authoring a Mobile VR App
The first step in creating a Mobile VR application is authoring the app experience. One of the great things about InstaVR is our “write once, publish to many” approach. So all of the steps listed below for authoring a Mobile VR application will be applicable to publishing to other platforms as well, such as Rift, Vive, and WebVR.
Sign up for a Free InstaVR account
Signing up for InstaVR is both free and easy. You can either click the “TRY FOR FREE” button in the top right corner or visit https://console.instavr.co/signup. With a free InstaVR account, you can publish as many iOS/Android/Cardboard apps as you’d like, with the standard limitations applied to our Free accounts (100 MB size max, 5 scenes max, InstaVR watermark + splash screen).
Upload your 360 images and videos to InstaVR
The first step in creating your new Mobile VR project is uploading the 360 media you’d like to use. As a web-based solution, that’s as simple as collecting your project media into a single folder on your desktop and dragging it to our File Manager. Once in our File Manager, you can easily select the 360 images or videos you’d like to include in your project.
Create a menu OR select the initial scene
After your files are in our cloud, you can in the Authoring tab select which panorama you’d like your app to launch into first. Whichever 360 image or video you have as the top-most in your Authoring tab will be the one that loads first. Your VR app can have a top-level menu screen prior to app loading, where users choose between multiple VR experiences using an image slider. Or you can have your VR experience launch straight in from the Home screen. If you choose the latter method, we suggest one of two approaches to app building.
- Use an initial 360 image as your “Menu Page” – Some clients will want to allow their users to select between a number of different images or videos off of a de facto 360 Image Menu Page. To do that, you’ll select a 360 image as your menu background, and then add multiple Navigation links off that main menu for the user to choose from. (more on Navigation Links below) This approach is good if you have multiple distinct VR experiences for your audience or if you’d like to give them a “Choose Your Own Adventure” style experience.
- Launch right into a 360-degree image or video – Rather than allowing your user to choose their narrative direction via a Menu, you can have them automatically open on an image or video-based scene. This is good if you want to have a linear experience for your users where they go scene-to-scene, without needing an initial multi-choice Menu.
Add Navigation between scenes
Once you’ve established if you’re using a 360 image menu or a linear approach, you need to give your users the ability to navigate from scene to scene. App users can initiate navigation by gazing at the Navigation link icons you build into the scene. (NOTE: Your final app will have a white dot “trigger” in the middle of the Field of View, used for initiating the Navigation. You won’t see this trigger while authoring the VR experience. Don’t worry though, it will appear in your final iOS or Android app.)
Setting up navigation depends on if your VR scene is image-based or video-based.
Adding Navigation to 360-degree images (For images, you’ll have to add a navigation link — or multiple ones — somewhere within a scene to allow users to navigate to a next scene)
Select “+Link” from Bottom of Authoring Platform ->
Press Update Position ->
Select Location in Pano You’d Like Navigation Link to Be and Click ->
Select Destination Scene You’d Like Navigation Link to Go To ->
Override Nav Link Label, Change Nav Link Icon, Change Text Color, and Change Icon or Font Size (All Optional) ->
Adding Navigation to 360-degree videos (Videos require a different approach than images. There are three options for what happens after a video plays. All of them are found in the lower right corner of the Authoring view, under the “Transition Options” drop-down)
Loop – Loop plays that video over again and again. This is a good choice if you only have a single video for your Mobile VR app.
Stop – If you’d like to give your users options after a video plays, select Stop. You can add Navigation Links to the scene, as discussed above, and the user can choose the next scene they’d like to go to.
Navigate – This choice allows you to choose the next scene or video that automatically loads after the video plays. This is a good choice if you want your VR to be passive, and you want to control the navigation flow of your app users.
Adding Hotspots to your 360-degree media
VR Hotspots are 2D media (images or videos) that can overlay directly on your 360 media. They can be initiated by the user (via gaze or hand controller), or can automatically be displayed if you’re a Pro user.
The steps for adding Hotspots to your VR scenes are:
Select “+Hotspot” from the bottom of the Authoring view ->
Press “Update Position” in upper right hand corner ->
Select location in 360 media where you’d like the Hotspot to appear ->
Select the 2D image or video from the File Manager you’d like to appear as the Hotspot ->
Add a Label that will appear in the 360 media below the Hotspot icon ->
Change Hotspot icon, Icon/Label color, or Icon/Label size (All Optional) ->
(Optionally) Pro users can change when Hotspots appear and if they play automatically ->
Note that Hotspots work a bit differently in 360 images and videos. For 360 images, the Hotspot is coded to appear fixed to the object where you place it. For videos, it will appear in a location. For that reason, the Pro feature of Hotspot appearance time is something to strongly consider for video.
Overall, Hotspots can be used for educational purposes, for close-up views of things, for adding a video component to a still image, and much much more. Hotspots are a great way to make your app interactive. You can also track Hotspot initiation by adding a Google Analytics id marker to the Hotspot, and viewing the counting stats related to that in Google Analytics.
Creating a Narrative to your VR experience
Authoring a Mobile VR app is as simple as creating a series of scenes, and ensuring your users have a way to navigate from scene-to-scene. This is what we call creating the narrative. You want to ensure that users can intuitively figure out the navigation of the app. Because they’ll be wearing a headset, you want them to experience a logical narrative flow without having to involve you in the process.
Other VR Authoring Options with InstaVR
Above, we’ve listed the basic components of creating a VR application… uploading media, adding navigation between scenes, and placing Hotspots. There’s many, many more options possible with InstaVR, particularly for InstaVR Pro users. Rather than going through them individually here, we’ll link to the main features that may be of interest to you while authoring your app.
2. Using Live Previewer to Test Your Mobile VR App
As you’re authoring your Mobile VR app, you may want to view what the application will look like prior to doing the final packaging. That is why we introduced our Live Preview feature in July 2017. Live Preview will help make you more productive, as you can see in real-time what your app will look like to end users. This will help you to better place and edit your Navigation Links, Hotspots, etc
Using the Live Preview app is simple:
- Click Live Preview from the left side of your Authoring tab.
- Download the Live Preview app to your phone. You can do a direct download or QR code scan for Android. For iOS, you can only do QR code scan.
- Open the Live Preview app.
- Scan the QR code in your Console dynamically created for that project.
- View your phone or place your phone into your VR headset.
Note, you’ll need internet access for the Live Preview feature to work, as it’s constantly updating your view based on the changes you’re making in the Authoring view. If you have any issues with Live Preview, the best first troubleshooting option is to close the app and re-start it.
3. Branding a Mobile VR App
Before publishing, you’ll want to add you or your clients’ branding to your Mobile VR app. That will include an app icon and an app splash image/video (if you’re a Pro customer). You can then choose between a number of Home Screen options for your users.
Adding an App Icon
Your VR users will access your app through an icon placed on the phone’s screen. You can customize this icon. InstaVR recommends a 512 x 512 square png file.
Adding a Splash Image or Video
The splash image or video will load just prior to your VR experience. This is a great branding opportunity. The recommended file dimensions are 1920 x 1080 png or 1920 x 1080 mp4.
Selecting a Home Screen
There’s a couple different approaches to the Home Screen possible with InstaVR. If you don’t know if your users will have headsets, you’ll want to give them the opportunity to un-select “Dual View” and “Use Gyro”. On the other hand, if you know they’ll be using a VR headset, you can enable “Dual View” and “Use Gyro” by default, with your users not having to do anything. Finally, you can customize the Home Screen with an image. Some clients use this to allow users to select between VR Headset and No-VR Headset. (For an example of this, download the WONDER 360 app)
4. Publishing a Mobile VR App
Publishing Mobile VR apps is simple with InstaVR. There’s four main types of Apps you can package — an In-House iOS App, an In-House Android App, an iTunes iOS App, and a Google Play Android App. The app experience is basically the same across the four options, but it’s important to select the right packaging features so that your app will run properly when distributed.
In-House iOS App
An In-House iOS App will run locally on a phone (also known as “sideloading”). Apple currently only allows one In-House InstaVR app on a phone at a time. But Pro users can purchase an Add-on from Apple through us, allowing up to 6 In-House InstaVR apps to be loaded on a phone at a single time.
At a minimum, prior to packaging, you have to open the “Common” section below the Packaging button and enter: App ID, Company Name, and Version #.
In-House Android App
The process is basically the same for creating an In-House Android app as it was for creating an iOS one.
There’s no limitation on the number of In-House InstaVR-created Android apps you can have on a phone. Do make sure to use different app Version #’s (or names) though, as identical names and version numbers will cause your newest app to overwrite your older one.
iTunes iOS App
If you have an Apple Developer Account, you can use InstaVR Pro to create iTunes-ready apps. If you don’t have a Developer Account yet, you can learn more about becoming approved here: https://developer.apple.com/programs/enroll/
Packaging for iTunes is almost identical to the process for In-House iOS apps, except you need to upload your Apple Developer Certificate to our File Manager. We’ll then output an .ipa file you can download and submit to iTunes for distribution.
Google Play Android App
To submit to Google Play, you’ll have to be an approved Google Developer with an InstaVR Pro account. Developer application info can be found here: https://support.google.com/googleplay/android-developer/answer/6112435?hl=en
Unlike with Apple, you don’t have to upload a Certificate to InstaVR before packaging. You will, if your app is over 100 MB, have multiple files created on our platform to submit: the main .apk file & an additional .obb file. Please note that Google Play also caps app submission size at 2GB.
Google Cardboard (or Apps for Specific Phones)
If you are creating an app specifically for Google Cardboard, you can specify that while packaging. That will allow you to package particularly for either v1.0 or v2.0 Cardboard.
Also, if your app will be limited to a specific phone, you can indicate that while packaging. This allows the app to be rendered for specific phone screen sizes.
5. Distribute a Mobile VR App
Just like with Packaging, your distribution method depends on if you’ve created an In-House or Store-Ready app, as well as if it’s iOS or Android.
Apple is a fairly restrictive platform, if you’re not using their iTunes Store for distribution. Currently, the only way to distribute In-House iOS apps to others is to send them an invite through the Console.
The invite will take them to InstaVR on their mobile device, where they’ll be able to download the .ipa file to their phone. For large scale In-House distribution, you can create a generic username & password, and send that to your audience along with the download link.
After download, users will be notified the App was downloaded outside of the normal Store process. So they’ll have to go into their Settings to approve the app as safe.
Google is a very flexible platform. So you can take the In-House InstaVR-created .apk file and self-distribute it quite easily. You can host it on your web site or on a file sharing site like Google Drive or Dropbox. Or InstaVR will generate a QR code that can be scanned for .apk download. Or you can also do like you did with iOS, and send users an email invite to download from InstaVR.
Like with iOS, app users will be prompted to go into Settings and approve the app prior to running it.
iTunes & Google Play
Hosting on the major Stores is the easiest distribution method. The app can be downloaded and run just like other popular apps like Pandora, Twitter, etc. The app is completely white-labelled, so your users won’t even know that InstaVR was integral in bringing the app into existence.
6. Analyzing and Improving Your Mobile VR App
After you’ve published and distributed your Mobile VR apps, you can use our analysis tools to figure out where users are looking, what Navigation Links/Hotspots they’re interacting with, etc. Your users will have to be connected to the Internet for this data to be collected.
Analytics require you to have a Google Analytics account already set up. You can then tag objects such as Navigational Links and Hotspots while authoring your app. If you include your Google Analytics overall account # when packaging, we’ll be able to send data into your analytics account for all your app users who are connected to the Internet when viewing it.
Heatmaps will allow you to visualize where your users are focusing their attention while using your Mobile app. Our new Heatmaps 2.0 gives you access to Live Heatmaps, 3D Heatmaps, Grid-based Heatmaps and more. You can use this data to understand if users are looking where you intend them to look.