Introduction

For game developers, Fire’s Dynamic Perspective SDK opens up all kinds of new ways to let players interact with your game’s environment. The phone’s four dedicated cameras offer x, y and z data that you can use to determine where the player’s head is in relation to the device’s screen. This allows you to shift the perspective to reveal new angles on what would have otherwise been a flat image. Over the course of this tutorial, we will walk through how you can convert a simple splash screen to take advantage of a perspective camera, add Dynamic Perspective and create a parallax layering effect to give the scene more of an immersive feel. Before we get started, let’s take a quick look at how the splash screen appears before modifying it:

The above splash screen was built using Sprites in Unity 4.5 and setup with the Orthographic camera. You can download the original Unity project from HERE.

Getting Started

Once you have the project downloaded, open up the Splash scene inside of the Scenes folder so we can walk through how everything is set up.

Here you can see we have 5 sprites and our main camera. You’ll notice that our camera is set to Orthographic. We also have a black background to handle the outside areas around our artwork. Finally, each of our GameObjects has their own custom layer order so they render correctly.

If you run the project, you should see that our player moves up and down (appearing to float), and the start text blinks on and off. Inside of the Scripts folder you’ll find two scripts – “Blink” and “FloatEffect” that make this animation possible.

Now that you have a general understanding of how the project is set up, let’s start making the modifications to work with the perspective camera and lay down the foundation for adding in Fire’s Dynamic Perspective SDK.

Working with the Perspective Camera

Step 1. Select the Main Camera from the Hierarchy tab and change its Projection from Orthographic to Perspective.

You’ll see in the Camera Preview window that everything becomes smaller since the new perspective camera’s Field of View is set to the default value of 60.

Step 2. To start, let’s setup the game to run at the native resolution of the Fire phone (we’ll change this later). Go into the Game tab and select the resolution drop down. We’ll need to add a new resolution called 720p. It will look like this:

Step 3. Select the 720P resolution we just added and re-select the Main Camera so we can play with the Field of View until we find something we like.

Here I have set the Field of View to 30. Now the artwork is centered in the display correctly. Next, we’ll want to move things around a bit so that we add some depth to the scene.

Step 4. Go back into the Scene tab and change the following GameObject’s Z indexes like so:

You should now see there is a difference between what you see in the Scene view (Object A, Left) and what you see in the Game tab preview (Object B, Right) due to the perspective camera and the new Z positions we just setup.

In the game, the objects closer to the camera such as the player, the title, and the “click to start” text are now larger. It’s important to keep in mind that you won’t see these perspective differences in the Scene tab so it’s best to do our layout work in the Game tab.

Step 5. Now we can start testing out how our camera will react as it changes position and rotation in preparation for adding the Dynamic Perspective logic. We’ll run the game and be manually changing the values of the camera on the fly.

Here you can see we are testing by modifying the X position and X,Y rotation values of the Main Camera to simulate our scene being moved all the way to the right-hand side of the screen.

It’s also important to note that we will use this technique to determine our minimum and maximum camera values of the scene inside of Unity itself. This is not something I advise doing on the hardware because moving the phone while trying to test it distorts the view. Instead, I recommend you test all the measurements in Unity. Before we move on, let’s make a few corrections. We’ll want to alter the Main Camera’s Z position to move it closer to the graphics and we’ll need to readjust the Field of View as well.

Step 6. While in the Game tab, you can preview the changes you just made. Change the Main Camera’s Z position to -4.2 to bring the camera in closer, and reset the Field of View to 67.2. This will center the screen better and help give us a better effect later on when we add in Dynamic Perspective. You’ll want to play around with the camera based on you own needs to find the ideal zoom level as well as distortion when the camera rotates based on the head tracking position.

You’ll notice that the perspective is a lot more dramatic. Now when the user is moving their head or the phone as the game is tracking their head position. Widening the Field of View and moving the Camera closer to the objects in the scene will create a little more distortion at the far ends of the screen helping emphasize the effect.

Step 7. Let’s make sure we stop the game, permanently make the Position Z and Field of View changes, and save the scene.

Correcting Layout for Perspective

Step 8. While our GameObjects look OK in their current position, we should make a few adjustments to ensure they stay in place as the camera moves around. To get started, make the following modifications:

Now all of our GameObjects are aligned a little higher on the screen to account for the shift in perspective. In a production game, you would want to detect if the Dynamic Perspective API is available via HeadTrackingReceiver.isAvailable() and possibly move the camera down a bit to compensate for the higher shift in perspective. You can just lower the camera since the code we’ll add will automatically reset the camera for you, but we don’t want to yet.

At this point you can run the game, play around with the X and Y Positions, and see the rotations of the camera. This will give you a sense for how everything will look when we add in our Dynamic Perspective logic.

Setting Up the Amazon Head Tracking Asset Package

Step 9. Now we are ready to import the libraries that will enable us to add Dynamic Perspective logic to our splash screen. You’ll find the Unity asset files in the Fire Phone SDK. From inside of Unity, select the Asset drop down and pick Import Package then Custom Package.

Step 10. You’ll need to find the Fire Phone SDK Unity Asset Package from the SDK folder. Once you select it, you’ll be presented with the following screen.

Here we are just going to import everything in the package. While we’ll only be focusing on the AmazonHeadTracking Plugin, you can also add Fire phone’s Motion Gestures to your game as well to add in support for those APIs. Once installed, you will now have a plugin folder along with the source code and sample scenes you’ll need to test out all of the features of the Fire hardware in Unity.

Creating the Dynamic Perspective Logic

Step 11. Let’s create a new script called HeadTrackingCamera. We’ll be using C# for the Script. Once you have the script open, add a few properties to the top of the class.

public float movementScale = 5.0f;

private Vector3 newPosition;

Step 12. The first property will represent the multiplier we will use on the X and Y position we’ll receive from the Dynamic Perspective API. The newPosition property will store the updated X and Y values for the camera after we do our calculations on the raw Dynamic Perspective data. Now add the following to the Start() method:

newPosition = transform.position;

This will save our initial camera position, and, moving forward, we will modify the X and Y properties of this vector instead of creating a new one from scratch.

Step 13. In our Update() method we are going to need to test that the Dynamic Perspective API is working and that we can access its data so add the following:

void Update() {
if (HeadTrackingReceiver.isAvailable &&
(HeadTrackingReceiver.lastEvent != null && HeadTrackingReceiver.lastEvent.isTracking)) {
}
}

Here you’ll see that we can talk directly to the HeadTrackingReciever class and access its data. We’ll be testing if it’s available, that the last event isn’t null and that it is still tracking the user. We want this to shut down if it stops tracking the user’s head.

Step 14. Now we can add our position calculations. Add the following inside of the new conditional we just created:

newPosition.x = Mathf.Clamp(HeadTrackingReceiver.lastEvent.x * movementScale, -.7f, .5f);
newPosition.y = Mathf.Clamp(HeadTrackingReceiver.lastEvent.y * movementScale, -.2f, .5f);
transform.position = newPosition;

We are getting the last event’s X and Y values, multiplying it by the movementScale we set up at the top of the class and using a Clamp() to keep it within a certain range of values. I have figured out the optimal values for you based on how far the scene will look when at the edges of the screen, which should help keep our scene in the camera’s view later on when we add the rotation to the camera.

Step 15. Before we test, we’ll need to add this script and the HeadTrackingReciever, which samples for new data every update during the Unity game loop, to the camera.

Step 16. At this point you are ready to test your game on the Fire device. Make sure Unity is set to Android as your platform and do a Build and Run of the game.

When you run this for the first time, you may be asked to locate your Android SDK. Just point Unity to the root of the SDK folder. You may also get the following error:

If you haven’t already done this, you’ll need to change the Bundle Identifier. From the Build Settings menu, select Player Settings, then change the default value of the Bundle Identifier.

Also, while you are in the Settings for Android tab, change the rotation to Landscape Left.

Finally, save your Android build to its own folder in your project.

Once you have the Scene deployed, you should now be able test out the Dynamic Perspective.

Step 17. We’ll also need to add a few properties to the class to make this work:

public float smooth = 1.0F;
public float tiltAngle = 2.0F;

Step 18. After running the project on the phone, you may notice that the parallax effect isn’t very dramatic. While it’s a cool effect, we can greatly enhance it by simply modifying the rotation of the camera in addition to changing its position. Below where we set the new transform value, let’s add this code:

float tiltAroundX = HeadTrackingReceiver.lastEvent.x * tiltAngle;
float tiltAroundY = HeadTrackingReceiver.lastEvent.y * tiltAngle;
Quaternion target = Quaternion.Euler(tiltAroundX, tiltAroundY, 0);
transform.rotation = Quaternion.Slerp(transform.rotation, target, Time.deltaTime * smooth);

Step 19. Now if you re-run the project on the phone, the effect will be a little more dramatic since we are also rotating the camera to match the shift in X and Y position.

Conclusion

At this point, you now have a reusable script you can apply to your camera that takes advantage of Dynamic Perspective in your Unity games. You don’t have to limit this to just the splash screen; I’ve been playing around with adding it to my main game scenes as well wherever I can take advantage of subtle shifts in perspective. When done correctly, the Dynamic Perspective effect is incredibly powerful. Use it to show off parts of the scene that may have normally been blocked by other items in the foreground, or just as a subtle way to add a little more depth to your Unity scenes. I also suggest checking out the Motion Gesture examples included in the Head Tracking Asset Package to add peek and tilt events to your game as well for menus and even to control elements in the game itself.

Now Is the Time to Submit Your Apps for Fire

Create immersive apps that respond to the way a customer holds, views and moves the phone. We have updated Appstore Developer Select, Amazon Mobile Ads API, and Amazon Testing Services with more incentives:

• Appstore Developer Select: Optimize your apps for Fire phone and get enhanced merchandising and 500,000 Amazon Coins incentives for your customers. Get the details here.

• Amazon Mobile Ads API: Developers earn $6 for every thousand interstitial ads displayed across any supported device in August and September (up to one million impressions per app per month) when they distribute their apps on Fire phones and send the first ad request from a qualified app. Get the details here.

• Amazon App Testing Service: Most Android apps just work on Fire mobile devices. Test your app's compatibility in 90 seconds by dragging and dropping your Android APK into our testing tool. Sign up for a free developer account to test your app's look and feel on devices and get the results within 6 hours. Test your app now.

Now is the time to submit your apps and games! Apps that are submitted by July 18 and approved will be in the Amazon Appstore when Fire ships on July 25.

Fire Developer Resources:

• Get a free Amazon Appstore developer account
• Fire Getting Started Guide
• SDK downloads
• Amazon Apps & Services Blog