In our last blog post, we showed you how to get started with HoloLens development and set up a development environment. In this post, we will be detailing how to build your first piece of content and deploy it to a HoloLens device. We will also be covering how to construct some interactions using pre-made components contained within the HoloToolkit.
The main aim for this blog post is to get a basic application, that contains two objects and an interactive button which toggles the states of these objects, built and deployed to a device for testing. At the end of this post you will have acquired the basic skills to get a skeleton application built, as well as have access to resources that will help you find and add new features to the existing application.
Creating the main scene
Following on from the last blog post, you should have a project set up with the HoloToolkit imported and ready to use. Before we get started crafting a basic scene to use for building and deployment, navigate to the HoloToolkit example scene folder, as shown in the picture below:
Let’s start by looking through the “Interactable Object Example” which can be found in “InteractableObject_Examples.unity” unity scene file. Once the scene is opened, head to the accompanying HoloToolkit examples description page: https://github.com/Microsoft/MixedRealityToolkit-Unity/blob/master/Assets/HoloToolkit-Examples/UX/Readme/README_InteractableObjectExample.md
As can be seen from this scene, there are a number of examples of how to create interactive objects, either by use of a “button”, or through use of the object itself. Try playing the scene to explore how the various interaction styles work. When you are finished exploring the scene, create a new scene and name it “Blog2_MainScene”. You should now have a completely empty scene and are ready to start adding content in.
The first step is to add the basic necessities for a scene to run on a HoloLens device. Begin by removing already existing Main Camera and add the “MixedRealityCamera” prefab into the scene (Assets/HoloToolkit/Input/Prefabs/MixedRealityCameraParent.prefab). This is a special camera that allows the HoloLens to draw the content over the real world, while clearing the rest of the scene to transparent, allowing the user to see the real world.
Next add the “InputManager” prefab into the scene (Assets/HoloToolkit/Input/Prefabs/InputManager.prefab), this will allow the HoloLens to intercept input events from the device and provide input functionality to scripts that require it.
Finally, bring in the cursor prefab (Assets/HoloToolkit/Input/Prefabs/Cursor/ Cursor.prefab) into the scene hierarchy and attach it to “Simple Single Pointer Selector” script on “InputManager” game object. The cursor will act as the user’s pointer in the scene. Your scene hierarchy should now look as follows:
Now that you have all the necessary prefabs in the scene, you can begin adding some models that will act as your content. We require 2 models for this scenario, and we will be using the built in Unity primitives, but feel free to use any model at your disposal!
Add a sphere (or any model you have) and place it at (1, 0, 5) in the scene. Next add a cube (or any second model you have, it must be different to the first) to the scene and place it at (-1, 0, 5) in the world. Your scene and game view should now look as follows:
For the next step of this tutorial, you are going to create an interactive button which when pressed will hide one object and show the other. Pressing it again will toggle the objects. This example, whilst simple, provides everything you need to start crafting more complex interactions, and will allow you to get started crafting the UI in your application whilst knowing that it will deploy to the HoloLens and function correctly. Given the spatial and holographic nature of HoloLens content, crafting the user interface is one of the most important aspects of development and therefore is often something that should be started first, or in tandem with the first development tasks.
Now add the button that we will use for this, by dragging the “HolographicButton” prefab (Assets/HoloToolkit-Examples/UX/Prefabs/ToggleButton.prefab) into the scene. Position the button at (0, 0, 4) in the world, so that it is placed in between the two models and slightly in front. Your game and scene view should now look as follows:
Adding Basic Interactivity
Now that you have all of the component’s setup, you can start to add functionality for the button. First select “ToggleButton” game object in the scene and navigate to “InteractiveToggle” component. Here you can find a very similar setup to Unity’s Button component as it uses UnityEvents for all of the interactions with the button. To enable and disable your sphere and cube objects you only need to drag the gameobjects into ‘OnSelection()’ and ‘OnDeselection()’ events and correct ‘GameObject.SetActive’ state as shown in a picture below:
If everything is setup in order, when you click ‘Play’ button, you will be able to interact with the button and enable and disable the sphere and cube gameobjects. (To control your player inside UnityEditor: ‘WASD’ to move around, hold right mouse button to look around, hold ‘Space’ key and left mouse button to interact).
Now that you have created a small scene with some interactivity it is time to build this application. Go to File -> Build Settings and make sure that you still have the correct settings from our previous HoloLens developer blog (http://www.pauley.co.uk/blog/microsoft-hololens-a-developers-kick-start-guide/). Under ‘Scenes In Build’ remove ‘Scenes/SampleScene’ and drag in ‘Blog2_MainScene’ in order for this scene to be included in the build. Click ‘Build’ button, select a folder where you would like the finished build to be put and wait for your first HoloLens application to finish building.
After Unity build is finished you will need to do a final compile in Visual Studio. Open the folder where you saved your build and open Visual Studio Solution file inside it. In Visual Studio at the top instead of ‘Debug’, ‘ARM’ and ‘Local Machine’ select ‘Release’, ‘x86’ and ‘Device’ for solution configuration.
When you have the correct settings selected go to Build -> Build Solution, this will kick-off a final part of the building process.
After receiving “Build: succeeded” message you will be able to start deployment onto a device.
To deploy straight to your device, connect your HoloLens to your PC using a USB cable and select Build -> Deploy Solution, this will begin the process that will transfer the build onto your device.
The second way of deploying your build is to create an Appx. To do this, right click on your project inside the Solution Explorer and go to: Store -> Create App Packages.
A new window will open, select option ‘I want to create packages for sideloading’ and on the next page untick ‘x64’ and ‘ARM’ architecture. By clicking on ‘Create’ button Visual Studio you will create an app package that can be installed on any HoloLens device using Device Portal (more information can be found HERE).
After deploying a successful build onto HoloLens, you should be able to launch it and see the same view as was displayed in the editor.
Now that you have finished, try experimenting some more with your new knowledge to get more familiar on how to build apps for HoloLens. But don’t forget to check back soon for the next part of this tutorial, where we will help you setup various UX utilities to improve ease of use.
We are also planning on running some developer courses in the new year. If you require any help, or would like to get in contact with us regarding developer courses, please contact us or at http://pauley.proboards.com/.