Developer Console
Amazon Developer Blogs

Amazon Developer Blogs

Showing posts tagged with Fire phone

October 28, 2014

David Isbitski

Are you a C# developer looking to publish your apps and games across multiple mobile platforms?  Did you know that Xamarin fully supports Amazon’s growing ecosystem of devices including Kindle Fire tablets, Fire TV and Fire phone. 

At Xamarin Evolve 2014 this month I facilitated a session on building native Amazon Fire phone, Fire TV, and Fire Tablet apps with Xamarin Studio (Click the image below to see the video).

This free video will walk you through how to quickly use Xamarin to run your apps and games on Amazon devices, as well as provide an overview of Amazon Appstore services that help developers get their app discovered and increase customer engagement and monetization.  Now is the time!  Using the same C# language you love and the power of Xamarin you can reach millions of potential new Amazon customers. 

For more information about getting started with Xamarin Studio and Amazon Fire devices, check out the following additional resources:

-Dave (@TheDaveDev)

 

 

 

 

October 17, 2014

Paul Cutsinger

Hi everyone, we’re gearing up for AWS re:Invent, which is happening at the Venetian in Las Vegas from Nov 11-14.  And we’re getting pretty excited about the sessions that are designed specifically for mobile developers.

This morning, I was talking to Peter Heinrich (@PeterDotGames) about his  Fire Phone: The Dynamic Perspective API, Under the Hood session. The talking points and the related code demo are shaping up really nicely – here’s the description:

"Fire phone's Dynamic Perspective adds a whole new dimension to UI and customer interaction, combining dedicated hardware and advanced algorithms to enable real-time head-tracking and 3D effects. This session goes behind the scenes with the Dynamic Perspective team, diving into the unique technical challenges they faced during development. Afterward, we explore the Dynamic Perspective SDK together so you leave the session knowing how to add innovative features like Peek, Tilt, 3D controls, and Parallax to your own apps."

Usually, it’s not fun to watch while people test out their code demos, but this one is pretty interactive!

6 other reasons to check out AWS re:Invent

Between mobile focused tracks, hack-a-thons and some exciting start-up events, there’s a lot to be part of this year.  

@PaulCutsinger

 

September 18, 2014

Nathan Lam

A common theme that developers often face is deciding which platform they should make their apps available on next. Are the users on this platform engaged enough? Will I be able to make money on this platform? These are only some of the questions that developers face, before investing their time on transferring their apps. For Playtika, a company which builds highly immersive social games, expanding their apps onto as many platforms as possible has become a core strategy.

Playtika’s app Slotomania currently holds the #8 spot worldwide for highest grossed mobile app on iOS and Android. In addition to iOS and Android, Playtika has also launched on the Amazon Appstore, which has proved to be a big success. According to Playtika, the Amazon Appstore provided the team with the highest ARPU (average revenue per user) compared to other platforms and also contained the highest retention rate amongst its competitors. Recently I had the chance to sit down with Elad Kushnir, VP of Business Development, to discuss how their apps were doing in the Amazon Appstore and their experience working with Amazon.

Amazon Appstore offers 70% higher ARPU compared to Google Play and 15% higher than iOS

“The Amazon Appstore does not only make the migration easy from an existing Google Play app, but it also has outperforming KPI’s as well.” says Elad. The team has seen some impressive results since their app has gone live in the store and have done fairly well for themselves in terms of revenue. “When we compared our 2014 data, we noticed that ARPU on Amazon was 70% higher than on Android and 15% higher than on iOS”- Elad Kushnir

 The team credits the unique audience that Amazon brings in and how engaged they are. “When we looked at retention rates for 2nd day and 7th day metrics, the retention was relatively the same across all platforms. However on the 30th day, retention on Amazon Appstore was 10%-20% higher than on iOS and Google Play.” Says Elad.

Playtika Sees 150% Higher Conversion Rates from Players to Payers on the Amazon Appstore Compared to iOS and 170% compared to Google Play

Getting users engaged is only half the battle. With a free app like Slotomania, conversion rates (paying users/ DAU) is crucial in terms of making revenue which is why Playtika is using Amazon’s In-App Purchasing API. So how many of these users are actually purchasing within the game? From Playtika’s data in 2014, they determined that the average user on the Amazon Appstore is 150% more likely to become a paid user than on iOS and 170% more likely than Google Play.

Figure 1In-App Purchasing

From Google Play to Amazon Appstore with Little to No Work

When the team came together to decide on their next platform, they chose the Amazon Appstore immediately. So why did the team decide that Amazon Appstore was the right choice?

“When we were deciding on our next platform, we already had our app on Google Play. We realized that moving our app from Google Play to the Amazon Appstore would be pretty easy since Fire OS is built on Android. Once we started, we got our apps up and running in a couple days and the process itself was seamless. The best part was that it had relatively low development costs.” – Elad Kushnir

From previous tests, we actually found out that more than 75% of the Android apps we tested just work on Kindle Fire with no additional development required. The team has now launched several of their games on the Amazon Appstore and are working on the getting the remaining ones up and running within the next year.

Moving into Fire Phone and Amazon Fire TV

Moving forward Playtika plans to take their apps to the next level by getting them onto Amazon’s newest devices. Their current focus is to get their app on Fire, in which their team is already planning on integrating Fire’s exclusive feature, Dynamic Perspective. In 2015 Playtika is planning to also have their apps on Amazon Fire TV. For now, the Playtika team tells us that they are very happy with how things are going and plan to release even more apps on the Amazon Appstore in the near future.

Learn More about the Tools Used by Playtika

September 08, 2014

Emily Roberts

Today, Amazon announced the availability of Fire phone, Amazon’s first smartphone, in the UK and Germany. Fire phone is currently available in the US and will ship on September 30, 2014 in Germany and the UK. 

Fire is the only smartphone with Dynamic Perspective and Firefly. Dynamic Perspective is an entirely new sensor system that responds to the way a customer holds, views and moves the phone. The Dynamic Perspective SDK gives developers access to algorithms that identify the X, Y and Z coordinates of the head, enabling a whole new class of apps and games. Firefly quickly recognizes things in the real world—web and email addresses, phone numbers, QR and bar codes, movies, music, and millions of products, and lets the user take action in seconds—all with the simple press of the Firefly button. With the Firefly SDK, developers can extend the use of the Firefly button to enable new actions their users can take based on what they identify. For more information on the Fire phone SDKs, click here.

Getting Started

Optimizing Your Apps

Have an Android app already but not sure where to start with Fire phone?  We offer plenty of tips and tricks to get your app quickly up and running on Fire phone.

A great way to get started is by using the app widget in Fire phone’s enhanced carousel, which enables you to expose content from your app directly on the home screen. Our enhanced carousel is not just limited to launching an app anymore. You can create app widgets that display actionable content below your app’s icon on the carousel. This experience makes your application more visible and accessible to your users. Users can immediately jump to any area within your app that you define or get important information they care about without having to open your app directly. Learn more.

Resources

 

July 30, 2014

Jesse Freeman

Fire phone represents an incredible opportunity for HTML5 developers to create new experiences.  Developers now have direct access to the hardware sensors that power Fire’s Dynamic Perspective, which opens up all kinds of new ways to let users interact with your web app content. Just like native devs, Fire phone’s four dedicated cameras offer x, y and z data that you can access directly to determine where the player’s head is looking at the screen, and shift the perspective to reveal new angles on what would have otherwise been a flat web page.

Over the course of this tutorial, we will walk through how to create a simple splash screen for a game in Phaser (a popular open source game framework). We’ll also cover how to take advantage of the ability to run web apps next to native ones on the Fire phone and how to add Dynamic Perspective to create a parallax layering effect which gives the scene more of an immersive experience. Before we get started, let’s take a quick look at the splash screen we’ll be creating:

Here you can see a standard splash screen for a game where the main player will float up and down, giving the scene some sense of motion. The start text also blinks to let the player know what action they should take.

Getting Started

To start, download my Phaser Project Template from https://github.com/gamecook/phaser-project-template. You will need to have the following setup on your computer:

  • NodeJS
  • Grunt
  • IDE (Sublime Text, WebStorm, or any text based IDE)

This project will give you everything you need to run our project and has step-by-step instructions on how to get everything configured to run locally.  Once you have everything set up, rename the Phaser Project Template to DynamicPerspectivePhaserDemo, then navigate into it via the command line. You’ll want to run the following command to get everything configured:

> npm install

Once that is done running, you should be able to launch the project by typing in the following:

> grunt

This will start a local server and open up your browser to http://localhost:8080.

Now we have everything up and running to build our Phaser splash screen. Just download the artwork from here. You’ll need to create an assets folder inside of the deploy directory of the Phaser Project Template. Once that is created, put all of the artwork you just downloaded into it.

One note: if you are using WebStorm, you will want to exclude the deploy/js folder from the Directories setting so you don’t have any performance issues as our grunt script automatically rebuilds the JS code for us.

Building the Splash Screen

Step 1. Let’s create a clean slate to work from by opening our main.js file in the src/game folder of the Phaser Project Template. Once you have it open, simply delete all the boilerplate code in that file.

Step 2. Next we are going to create our new state object and Phaser game instance from scratch by typing out the following:

var state = {
    preload: function () {
    },
    create: function () {
    },
    update: function(){
    }
}

// Create new game instance
var game = new Phaser.Game(
    800,
    480,
    Phaser.AUTO,
    'game',
    state
)

Step 3. Once you have all the artwork in your assets folder, we can add it to our preload function:

preload: function () {
	this.load.image("mask", "/assets/background-mask.png");
	this.load.image("background", "/assets/background-image.png");
	this.load.image("title", "/assets/title.png");
	this.load.image("start", "/assets/start-text-touch.png");
	this.load.spritesheet("player", "/assets/player-sprites.png", 385, 412);
}

Here you can see we are simply loading everything up as an image with the exception of the player, which will be animated. That means we can use the dedicated sprite sheet loader.

Step 4. In our create() function, let’s setup the scaleMode to give us full screen on different device resolutions:

create: function () {
	this.scale.scaleMode = Phaser.ScaleManager.SHOW_ALL;
	this.scale.pageAlignHorizontally = true;
	this.scale.pageAlignVertically = true;
	this.scale.setScreenSize(true);
...

Step 5. We can start blocking out how the scene will be laid out. Inside of our create() method, add the following:

	// Calculate center point for laying scene out
	var centerOffset = {x: (this.world.width - 679) * .5,
                    y: (this.world.height - 466) *.5};

	// Create background image
	this.background = this.add.image(centerOffset.x, centerOffset.y, "background");

	// Save bg position
	this.bgPos = this.background.position.clone();

} // end create

This will calculate where we will center the background image. We’ll also save out the value for the background in order to use it as a reference point later on.

Step 6. If we refresh the browser, we’ll see our first glimpse at how the splash screen will look:

Step 7. Let’s get back into our code now and add in the player as well as the title and other elements that will help complete the scene. In our create() function. Below the background code we just added, put the following code:

create: function () {
...
	// Create player
	this.player = this.add.sprite(this.bgPos.x + 20, 	this.bgPos.y + 20, 'player');
	this.player.animations.add('fly', [0, 1, 2, 3], 10, true);
	this.player.animations.play("fly");
	this.playerStartPos = this.player.position.clone();

Here you can see we are setting up our player as well as creating and setting a fly animation. We also save out our player’s start position, which we will use later on when we start modifying it based on the Dynamic Perspective code we’ll add for Fire.

Step 8. Now we can wrap this up with the last bit of layout code:

	// Add mask, title and start images
	this.mask = this.add.image(this.background.position.x-50, 	this.background.position.y + 280, "mask");
	this.title = this.add.image(this.bgPos.x + 370, 	this.bgPos.y+295, "title");
	this.start = this.add.image(this.bgPos.x + 405, 	this.bgPos.y+385, "start");

} // end create

Here we add the background mask, the title and the start text.

Step 9. If you refresh the browser you will now see our scene:

While this is really easy to setup, it looks a little boring. Let’s add some animation to it.

Step 10. In our update() function, add the following code:

// Make player float up and down
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + 20;

// make start text blink
this.start.visible = Math.round(this.time.now/500) % 2 ?  true : false;

This code will make the player float up and down as well as make the start text blink. You can test this by refreshing the browser again.

At this point, we have our entire splash screen laid out. Let’s talk about how to set up the Web App Tester on Fire phone to get our splash screen ready for adding the Dynamic Perspective APIs.

Configuring the Web App Tester

Just like you can currently do on the Kindle Fire, you’ll need to download the Web App Tester on the Fire phone for this next part of the tutorial. You can get the latest build from the Amazon Appstore here.

Step 11. Once you have the Web App Tester installed, you’ll want to look up your computer’s IP address.

Step 12. When you have the IP address, you can enter that into the URL field and save it.

Step 13. Now you can pull up the Amazon WebView to make sure everything is working. Once it’s loaded, you should see the splash screen running at full screen on the device. One thing to note is that we are not locking the rotation in this simple demo, so make sure you are holding the phone in landscape. Here is the splash screen being rendered at full 720P resolution on the Fire phone:

As you can see, the process for installing and testing hosted web apps on Fire phone is straight forward. We’ll be using the Web App Tester and Fire phone for the remainder of our tutorial to make sure we can properly test the Dynamic Perspective APIs.

Adding Dynamic Perspective

The good news is that the Dynamic Perspective APIs are built into the Amazon WebView we’ll be testing within the Web App Tester. That means that you don’t have to add in any extra JavaScript libraries to start using Dynamic Perspective in your own HTML5 apps and games, it’s ready for you right out of the box. Let’s get started:

Step 14. We are going to want to make some global variables to store the motion tracking data points we’ll be using in this example. At the very top of our project above where we declared our state object, add the following:

var dpX = 0;
var dpY = 0;
var faceDetected = false;
var scale = 2;

Here we are going to store the x, y values for the Dynamic Perspective x and 7 axis, whether  facial detection is working, and a scale factor to help us manipulate the raw data into something more manageable.

Step 15. Now at the very end of our create() function add the head tracking event listener:

addEventListener('amazonheadtracking', this.handleAmazonHeadTracking);

As you can see, we’ll be using a standard event listener to implement the Dynamic Perspective APIs in our web app.

Step 16. After our create() function, add the following:

handleAmazonHeadTracking: function(event){

    dpX = event.x_mm/scale;
    dpY = event.y_mm/scale;

    faceDetected = event.isFaceDetected;
},

This will save the head tracking position values into our global variables that we set up previously. You’ll also see that we are dividing it by our scale to reduce the value a little so we don’t see large x, y values shifts since the original artwork is being scaled up to 1280 x 720 from 854 x 480. Remember that the data returned is relative to the size of the phone’s renderable screen area - not your game - if it’s up-scaled like we are doing here. You may want to modify these factors by the games scale factor instead. Here I am simply dividing them in half.

Step 17. Now let’s calculate the new position we’ll use to apply to each of our layers. Add the following to the top of our update() function:

var newPositionY = Phaser.Math.clamp(dpX, -30, 30);
var newPositionX = Phaser.Math.clamp(dpY, -30, 30);
this.background.x = this.bgPos.x + newPositionX/5;
this.background.y = this.bgPos.y + newPositionY/5;

Here we are using a method called clamp() which is part of the Phaer.Math lib. We supply our Dynamic Perspective x and y values along with a limit so it stays within the specified range. One thing to note is that since this splash screen is designed to run in landscape we need to swap the Head Tracking x and y values since they don’t change based on the phone’s orientation.

Now if you run the game on Fire phone and look at the device as well as move it around, you’ll see the background now subtly shifts in response to your head movement.

Step 18. Let’s add the same effect to our player. You’ll want to replace the current this.player.y line of code where we calculate the floating animation with the following:

this.player.x = this.playerStartPos.x + newPositionX;
this.player.y = (this.playerStartPos.y / 2) + 8 * Math.cos(this.time.now / 200) + (20 + newPositionY);

Now we are modifying the player’s x position and adding the newPoistionY to the end of where we calculate the up and down value to create some additional movement along the Y position. You may also notice that we are not dividing the new x and y values by 5 like we did in the background. This allows us to give the layers a parallax effect so that the background will move at a slower rate.

Step 19. Run the scene again on Fire phone and you’ll see the final effect.

Publishing Your App

If you have previously published a web app to the Amazon Appstore,  you can follow the same process. For those who are new to this, there are 3 easy steps after you have set up your free developer account and specified that you want to create a new app in the portal:

Step 1: Verifying Your Web App’s URL

You can now validate your web app’s URL right from the developer portal.

 

Simply put in the URL for your web app or game with the Fire phone code and click the verify button and the tool will let you know if the contents of the URL pass the preliminary submission requirements.

Step 2: Declaring Web App’s Permissions

Once your URL has been verified, you can select your app’s permission. Simply check off the options that apply to your app.

 

Step 3: Select Compatible Platforms

Then you can define which devices this web app can be published on.

While the Kindle Fire HD, HDX and Fire phone devices offer the best performance for web apps, make sure you test your web app on older devices to ensure the performance is ideal for your users. Intensive web games and anything using WebGL should be distributed on Kindle Fire HD and above.

While you can install web apps in the Amazon Appstore on any Android device that has the store installed, it will default to the native WebView on that device. This means that your app will not have access to the Dynamic Perspective APIs on other Android phones.

Step 4: Certification of Distribution Rights

Finally, certify that have the necessary rights to publish your web app.

 

Conclusion

As you can see, not only can you easily publish HTML5 apps and games alongside native Android apps through the Amazon Appstore, you also get access to the Fire’s Dynamic Perspective API just like native Android apps do. So be sure to submit your app to the Amazon Appstore to tap into millions of potential new customers. 

Related links:

- Jesse Freeman (@jessefreeman)

 

July 25, 2014

Nora Kelly

Fire, Amazon’s first smartphone, is now available at AT&T stores throughout the US and online at www.att.com/firephone or www.amazon.com/firephone.   

Fire is the only smartphone with Dynamic Perspective and Firefly. Dynamic Perspective is an entirely new sensor system that responds to the way a customer holds, views and moves the phone. The Dynamic Perspective SDK gives developers access to algorithms that identify the X, Y and Z coordinates of the head, enabling a whole new class of apps and games. Firefly quickly recognizes things in the real world—web and email addresses, phone numbers, QR and bar codes, movies, music, and millions of products, and lets the user take action in seconds—all with the simple press of the Firefly button. With the Firefly SDK, developers can extend the use of the Firefly button to enable new actions their users can take based on what they identify. 

If you’re ready to get your app on Fire phone, you can test your app today. For more information on the Fire phone SDKs, click here.

Here is a quick recap of all of the Fire phone posts on the Amazon Apps & Services Blog.

Wednesday, July 16th

Adding Dynamic Perspective to Your Unity Games
We walked through how to quickly add Dynamic Perspective to your existing Unity game.

Thursday July 10th

Top 10 Tips for Optimizing Your Android Apps for Fire Phone
Have an Android app already but not sure where to start with Fire phone?  We offer plenty of tips and tricks to get your app quickly up and running on Fire phone and how take advantage of its new capabilities.

Wednesday, July 9th   

90 Seconds to Find out If Your App Is Ready for the Fire Phone
We covered testing your Fire phone app with our free App Testing Service.

Thursday July 3rd

Extend Amazon Fire’s Home Carousel: Make a Great First Impression
We covered Fire phone’s new enhanced home carousel and how you can expose content from your app directly on the home screen.

Wednesday June 25th

Firefly: Connecting Your Apps to the Physical World
We posted examples of how developers are taking advantage of Fire’s new Firefly capabilities.

Tuesday, June 24th

Limited Time Offer: Earn a Guaranteed $6 CPM on Interstitial Ads from the Amazon Mobile Ad Network
We talked about new Amazon Mobile Ad Network incentives for developers distributing qualified apps on Fire phone.

Monday, June 23rd

Amazon Fire: Design Best Practices for Dynamic Perspective
We covered some of the design principles behind the Fire UX and what you need to know to design the best customer experience possible.

Friday, June 20th

Appstore Developer Select Benefits Expands to Fire Phone: 500K Amazon Coins Offer per Qualifying App
We announced Fire Phone extra benefits for our Appstore Developer Select program.  Amazon will offer 500,000 Amazon Coins ($5,000 value) for each of your qualifying paid apps or apps with in-app purchasing that meet the additional program requirements for Fire Phone (up to a maximum of 3 awards/developer). You can create campaigns via the Promotions Console to give these Coins away to consumers purchasing any of your paid apps or in-app items.

Wednesday, June 18th

Announcing the Amazon Fire Phone: App and Game Experiences Never before Possible
We unveiled Fire, the first phone designed by Amazon.  Fire is the first and only smartphone with Dynamic Perspective and Firefly. With Fire Develop SDKs available now, these new technologies enable you to create more immersive experiences in your apps and games that increase user engagement. Now is the time to submit your apps and games! Apps that are approved by July 18 will be in the Amazon Appstore when Fire ships on July 25th.

 

 

July 22, 2014

David Isbitski

Today, Amazon announced that Amazon Appstore selection has nearly tripled over the past year, and since Fire phone launched, the rate of app submissions to the Amazon Appstore has more than doubled. Read the press release to learn more about innovative new apps and games from developers—including Camouflaj, Craigslist, eBay, Fandango, Fluik, Kik, Magmic, Trove, TV Guide, and WhitePages—all using Fire phone’s unique technical capabilities.

In addition, yesterday, Amazon Game Studios announced two exclusive new games—Saber’s Edge and To-Fu Fury—for Amazon’s new Fire phone. Saber’s Edge and To-Fu Fury are co-developed with partners, Hibernum and HotGen as part of Amazon Game Studios’ mission to build fun, immersive games from the ground up for Amazon devices. These new games were created exclusively for Fire phone and take advantage of Amazon’s groundbreaking Dynamic Perspective.

Ready to get your app on Fire phone? Test your app today.

Here is a quick recap of all of the Fire phone posts on the Amazon Apps & Services Blog.

Wednesday, July 16th

Adding Dynamic Perspective to Your Unity Games
We walked through how to quickly add Dynamic Perspective to your existing Unity game.

Thursday July 10th

Top 10 Tips for Optimizing Your Android Apps for Fire Phone
Have an Android app already but not sure where to start with Fire phone?  We offer plenty of tips and tricks to get your app quickly up and running on Fire phone and how take advantage of its new capabilities.

Wednesday, July 9th   

90 Seconds to Find out If Your App Is Ready for the Fire Phone
We covered testing your Fire phone app with our free App Testing Service.

Thursday July 3rd

Extend Amazon Fire’s Home Carousel: Make a Great First Impression
We covered Fire phone’s new enhanced home carousel and how you can expose content from your app directly on the home screen.

Wednesday June 25th

Firefly: Connecting Your Apps to the Physical World
We posted examples of how developers are taking advantage of Fire’s new Firefly capabilities.

Tuesday, June 24th

Limited Time Offer: Earn a Guaranteed $6 CPM on Interstitial Ads from the Amazon Mobile Ad Network
We talked about new Amazon Mobile Ad Network incentives for developers distributing qualified apps on Fire phone.

Monday, June 23rd

Amazon Fire: Design Best Practices for Dynamic Perspective
We covered some of the design principles behind the Fire UX and what you need to know to design the best customer experience possible.

Friday, June 20th

Appstore Developer Select Benefits Expands to Fire Phone: 500K Amazon Coins Offer per Qualifying App
We announced Fire Phone extra benefits for our Appstore Developer Select program.  Amazon will offer 500,000 Amazon Coins ($5,000 value) for each of your qualifying paid apps or apps with in-app purchasing that meet the additional program requirements for Fire Phone (up to a maximum of 3 awards/developer). You can create campaigns via the Promotions Console to give these Coins away to consumers purchasing any of your paid apps or in-app items.

Wednesday, June 18th

Announcing the Amazon Fire Phone: App and Game Experiences Never before Possible
We unveiled Fire, the first phone designed by Amazon.  Fire is the first and only smartphone with Dynamic Perspective and Firefly. With Fire Develop SDKs available now, these new technologies enable you to create more immersive experiences in your apps and games that increase user engagement. Now is the time to submit your apps and games! Apps that are approved by July 18 will be in the Amazon Appstore when Fire ships on July 25th.

 

 

July 16, 2014

Jesse Freeman

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:

GameObject

Z Position

BackgroundImage

1

BackgroundMask

-0.25

ClickToContinue

-0.5

Player

-1

Title

-0.5

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:

GameObject

X Position

Y Position

BackgroundImage

0.44

0

BackgroundMask

-0.35

-3.25

ClickToContinue

1.8

-1.57

Player

-1.15

0

Title

1.6

-1.05

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:

July 10, 2014

David Isbitski

With the launch of the Fire, Amazon’s first Android-based phone, you can now create experiences where customers interact in an entirely new way with your apps. With Dynamic Perspective, apps can have peek, tilt and zoom capabilities all based on customer head movements. You can also use the Firefly button to identify virtually anything and enable actions your customers can take based on what they identify. By enhancing or optimizing your apps for Fire, you have the opportunity to enable experiences that combine realistic visuals and bring new depth to what customers can do on a phone. And while you think about the new experiences you can offer your user, you can get the current version of you app running on Fire with little or no modification. Here are 10 tips to help you get your apps running on Fire phone today!

Tip 1 – Register for a Free Amazon Developer Account

Fire uses the Amazon Appstore exclusively, and we’ve streamlined the process to make it easy to submit your app. Registration is free, fast, has no annual subscription cost, and supports both free and paid apps. Once your Fire phone app is submitted you also have the option to distribute the apps across Kindle Fire, Fire TV and Android devices simply by selecting those device targets in the developer console. The boxes indicating your intent to publish on other devices will be pre-checked in the console. Most Fire apps will also work on Kindle Fire tablets and Android devices, so just keep those checked if you are not sure. To get started:

  1. Sign in or register for a free developer Amazon Apps & Games Developer Portal account. If you do not already have one, you will be prompted to create an account
  2. Submit your payment and tax information if you intend to sell a paid app or offer in app items for purchase.

Tip 2 – Download the Fire SDKs

Fire phone development APIs fall into two categories: Dynamic Perspective SDK and Firefly SDK. Both SDKs are available through the standard Android SDK Manager as a single add-on and support a variety of programming languages.

To download the add-on simply open the Android SDK Manager from a command line or from within Android Studio and do the following:

  1. Add the following user-defined site, in the Manage Add-on Sites dialog: https://s3.amazonaws.com/android-sdk-manager/redist/addon.xml
  2. Expand Android 4.2.2 (API 17) and click SDK Platform and Amazon Fire Phone SDK Addon.

Macintosh HD:Users:dave:Desktop:Screen Shot 2014-07-01 at 9.34.32 PM.png

  1. Accept license agreement and install the packages.
  2. Set your project up in Eclipse and specify Amazon Fire Phone SDK in the Compile With drop-down.

The SDK includes everything you need to get started including multiple sample projects and Android Studio gradle support.

You also have the option to download the Fire Phone SDK directly without installing the add-on here.

Tip 3 – Test Your APK compatibility with the Amazon Testing Service

Fire is based on the latest version of Fire OS 3.5, which is based on Android API level 17. Android app compatibility is supported on Fire OS, so if an app runs on Android it can run on Fire with little or no effort. Simply drag and drop your Android APK and receive feedback on your app's compatibility within 90 seconds. You will also have access to additional Fire phone test results that enable you to see how your app looks and performs on Fire phone. The test results are presented in 6 hours and include carousel, peek and tilt actions.

Checking APK compatibility and submitting can be done in just a few steps:

  1. Drag and drop your APK to the app-testing control here.
  2. If your app passes testing, you can submit it to the Amazon Appstore right away. If testing reveals any issues, you will see a list of issues to address. 

Tip 4 – Become Familiar with the Fire Phone Design Guidelines

Fire represents a huge leap forward in mobile user experiences. As a developer, you’ll want to design the best customer experience possible for this new platform. To help you achieve that, we’ve outlined the core design principles that will allow you to take advantage of Fire’s unique Dynamic Perspective features in our guide here.

The good news is that if you are an Android developer your app will work on Fire with little or no work, and as you will see, just a few modifications to your app’s user experience will let it better take advantage of all that the Fire SDK has to offer.

For additional best practices for designing Fire phone user experiences check out our blog post here.

Tip 5 - Add the Fire Phone Android Theme to Your App

The quickest optimization you can make is to set the application Theme in your Android app’s AndroidManifest.xml file. This updated Amazon theme will set app fonts, color pallet and skinned controls to match Fire phone’s design guidelines.

Simply set the android:theme argument to the application section of the Android Manifest to Theme.DeviceDefault, as introduced in Android 4.0, and your application will pick up the skinned controls that match Fire phone.

Tip 6 – Utilize the Fire Foundation Controls

The Fire Foundation Controls are included in the Dynamic Perspective SDK and give your app 2D controls designed and built for use with the device. These controls currently include SidePanel, HeaderNavigationBar, TabBar, ToolBar and MediaController. All of these controls can be implemented in three steps just as you would with any Android control.

Step 1: Prepare the Android Manifest
The Android manifest needs to be modified to include a <uses-library> tag to load the Foundation Controls library (in addition to setting the theme as mentioned in Tip 3).


 

Step 2. Place the control in your XML Layout file

In this example Android layout file we are referencing the new header navigation bar and utilizing two additional files. Strings.xml will contain the names of our menu items and header_menu.xml file defines the menu items for the HeaderNavigationBar's actions menu.

XML layout for HeaderNavigationBar inside of a RelativeLayout view:

Strings.xml containing menu item names:

Header_menu.xml containing action menu items:

Step 3. Implementing the Control

All of the APIs for Fire phone will be installed into your <Android_SDK>/sdk/add-ons/addon-amazon_fire_phone_sdk_addon-amazon-17 folder including the SDK samples. To access the controls you will need to reference them from your own app. For example, to implement the HeaderNavigationBar make sure you reference the amazon.widget.* package and implement the control. The following code shows how to inflate the XML layout into a view, obtain a reference to the HeaderNavigationBar, use the reference to set a click listener on the actions menu, and implement up navigation.

In the case of the HeaderNavigationBar we will also disable the Android title bar before inflating the layout. We can also programmatically change menu items by setting properties directly on the HeaderNavigationBar like so:

For more details on implementing Foundation Controls in your Android app check out our Implementing Foundation Controls for Fire phone guide here.

Tip 7 - Implement a Side Panel Layout

One easily identifiable layout characteristic of Amazon Fire apps is the Side Panel layout included as part of the Fire Foundation Controls. Implementing the Side Panel layout will go a long way to giving your app that Fire phone look and feel.

With this control, no matter what the current view in your app, a user can always access your menu or a context aware page just by executing a quick swipe or gesture.

For example, doing a quick right-flick of the phone (or swiping in from the left) can expose a navigation pane. You can also put a context-sensitive pane a flick away in the other direction. In the picture above, the middle content panel is a Music Store. The left panel is a navigation panel, and the right panel is context sensitive, and when the user is looking at music in the content panel, the right panel will show recommendations.

SidePanel Layout works very similar to the HeaderNavigationBar described above. You will need to reference the EAC library in your Android Manifest like above, reference the same amazon.widget library in your java code and then define the left, right and content panels in your XML layout file.

A full Side Panel sample project is included with the Fire SDK under the /Samples/SidePanels folder and you can get more details about implementing a Side Panel layout here

If you don't have a Fire phone you can also use the simulator included in the SDK to test your SidePanel implementations.

Tip 8 – Adding Depth and Perspective to Your Android App Interface

In addition to the 2D Foundation Controls, Dynamic Perspective includes a rich set of APIs and Controls to help developers incorporate peek, tilt and zoom capabilities within their apps while adding a sense of realistic depth and perspective. These controls work behind the scenes with Fire’s advanced camera and sensors to automatically adjust their appearance based on how your application is being viewed. These new UI Controls are part of the Euclid package included in the Fire phone SDK.

For the most part, Euclid controls are very similar to their Android and Foundation Controls counterparts. Euclid controls retain the name of the original base control, but with a "Z" prepended to the name. For example, a Button control becomes a ZButton control.

       

Figure 1- Example of Euclid Controls. From left to right: ZCheckbox, ZButton, ZSwitch and ZRadioButton

Euclid simplifies the process of adding 3D effects to your Android apps. Because most Euclid layout and widget classes are derived from either standard Android or Amazon Foundation Control classes, you are probably already familiar with the most common methods and attributes of Euclid controls and should be able to convert your app to use the new Dynamic Perspective UI with few code updates.

The following aspects of a control remain unchanged when you swap a stock Android control for its Euclid equivalent, such as changing a Button to a ZButton:

  • Click handler methods: User interaction is handled via your existing onClick() method or View.OnClickListener object.
  • Screen position methods: Layout in the X and Y planes follow the same rules as 2D widgets.
  • Layout methods: Euclid controls follow Android rules for scaling, sizing, and padding, and auto-resize based on layout parameters.
  • Support methods: Euclid controls often inherit Android widget support for testing, accessibility, and localization.

The biggest difference between Euclid and 2D widgets is how their visual assets are produced and rendered. These differences provide new behaviors but also set some limits on what you can change. Euclid widgets are artist-created textured mesh files, including collections of vertices, edges and faces that define the shape of 3D objects.

Although you can set the color of a 3D widget, you cannot add a border, set a custom background, or make changes in View.OnDraw(). However, 3D controls do provide the same access to behaviors such as animations and head tracking without additional code.

The following summary highlights the changes between 2D and 3D controls:

  • Layout parameters: 3D object layout parameters include depth in addition to height and width. While 2D Android layouts are a nested hierarchy of flat rectangles, 3D layouts are a nested hierarchy of rectangular boxes.
  • Delegate classes: All 3D methods are passed to delegate classes to handle 3D operations, such as layout and animation. You do not need to extend the delegate classes unless you want to modify the stock control animations or layout.
  • Missing or overridden class methods: Some 2D Android base class methods have been removed from the 3D controls because these methods are either not relevant to a 3D environment or have been replaced with true 3D paradigms. For example, stock Android controls support rotation using a faux 3D mode, whereas Euclid replaces these methods with a simplified 3D orientation method.
  • Draw method: Because they are not rendered dynamically, 3D controls do not directly use the Draw method. Instead, you must build a tree of transformations and execute a drawing command using ZSceneNode and ZRenderable. This retained approach better matches the model of the underlying 3D graphics library. Note that this change is transparent if you are using the stock 3D controls in the toolkit.
  • Unsupported base class attributes: Some 2D base class attributes are not supported in 3D, such as the Android faux shadow parameter. See the API reference documentation for information about specific control attributes.
  • 3D-specific methods and attributes: 3D controls have 3D-specific methods and attributes, such as the ability to supply layout attributes using orientation_Zin a linear layout or depthGravity.

For more information on implementing Euclid controls be sure to check out our Dynamic Perspective UI Migration Guide here. For suggestions on when to use the standard Android widgets, 2D controls and the new Euclid controls check out our comparison matrix here.

Tip 9 – Firefly SDK: Apps that Discover the World around You

With the Firefly SDK, developers can build apps that recognize real world objects - QR and bar codes, artwork, songs, movies and more - and let customers interact with them. Firefly combines Amazon's deep catalog of physical and digital content with multiple image, text and audio recognition technologies to quickly identify over 100 million movies, TV episodes, songs and products. It can also recognize URLs, email addresses and phone numbers. Customers simply press the Firefly button to discover helpful information and take action in seconds. You can use the Firefly SDK to supplement item identification or build actionable options for customers after an item is recognized. For example, iHeartRadio used the Firefly SDK’s built-in music recognizer and music database to identify a song playing. Then they built their own Firefly action to create a station based on the song Firefly recognized.

Integration with Firefly requires the creation of a plug in. You can get complete details on implementing a Firefly plugin on our developer portal here.

Tip 10 – New Developer Incentives for Fire Phone Apps

The immersive apps you create for Fire phone are also eligible for new developer promotions. We have updated Appstore Developer Select and Amazon Mobile Ads API 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.

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

Be sure to check out these additional Fire phone developer resources:

-Dave (@TheDaveDev)

 

July 09, 2014

Paul Cutsinger

Do you want your app or game to be on the new Fire phone?  Most Android apps already work on Fire phone. Take 90 seconds to find out if your app is ready by using the Amazon App Testing Service. If any incompatibilities are found while testing, you’ll get a detailed report with guidance on how to remedy the situation.

To help you get started, here’s a step-by-step guide and a video that walks you through the process.

1) Go to the developer portal

To start, head over to the developer portal at (https://developer.amazon.com/welcome). All you need is your app’s .APK.

2) Drag your App’s .APK onto the tester

3) Get compatibility test results in 90 seconds

Most Android apps work on Fire mobile devices without change. If the tests do find anything that could prevent publication, you’ll receive specific suggestions and be directed to documentation that will help you make the necessary changes.

4) We’ll also test it on the device


You can also use the testing service to get several screenshots so you can see what your app looks like on Fire phone, as well as a log and information about CPU and memory usage. These tests take about 6 hours.

If you’re signed into the developer portal, this will happen automatically and the results will be available on your App Testing service dashboard: https://developer.amazon.com/tya/dashboard.html.

If you don’t have a developer account yet, just enter an email address and the results will be sent to you.

The top section of the results page includes a list of screenshots. Click through them to see what your app looks like on the right.

Below that are sections that show you memory and CPU usage and your log during the test.

Macintosh HD:Users:cutsinge:Desktop:Screen Shot 2014-07-03 at 3.33.54 PM.png

5) Now Is the Time to Submit Your Apps for Fire

Once you’re ready to submit your app, begin the submission process by clicking the orange button in the middle of the screen or by going to: https://developer.amazon.com/public/support/submitting-your-app

To submit, you’ll need to sign in. Developer accounts are free so go ahead and make one if you haven’t already.

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

  • Amazon 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 Amazon 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

@PaulCutsinger