From Tablet to TV: What you need to know Qualcomm® Uplinq™

MIKE HINES DEVELOPER EVANGELIST, AMAZON

@MikeFHines mikehines45

mihines@amazon.com

CREDIBLY INNOVATE PHOTO HERE

Welcome to Uplinq 2014

TODAY’S AGENDA • What is Fire TV • Looking good on TV • Working with Controllers • Getting started with Fire TV

Introducing Amazon Fire TV

Amazon Fire TV gives you a familiar Android–based platform to extend your apps and games to the big screen.

Choose between the Amazon Fire TV Remote or the Amazon Fire Game Controller for a richer gaming experience

The Amazon Fire TV is

INCREDIBLY POWERFUL Amazon Fire TV uses a Qualcomm® Snapdragon™ 300 Quad Core processor with Qualcomm® Krait™ technology, Qualcomm® Adreno™ 320 GPU and 2GB of RAM to support high performance game experiences.

Support for multiple types of

GAME CONTROLLERS Amazon Fire TV works with the Amazon Fire TV Remote and the Amazon Fire Game Controller through the Bluetooth HID gamepad profile.

Full support for

LOCAL MULTI-PLAYER Amazon Fire TV allows up to 7 game controllers to be connected at one time, opening up multi-player gaming in the living room.

Taking advantage of

SECOND SCREEN Amazon Fire TV supports second-screen experiences using DIAL, an open standard, that allows customers to discover and open apps on their television right from their tablet or phone.

CREDIBLY INNOVATE PHOTO HERE

Full support for

HD VIDEO OUT Amazon Fire TV has support for full HD video out from your app or game at 1080p.

Designing for the 10-foot Experience

You will have to design your user interface differently for people sitting 10 feet away from the display.

The goal of 10 foot user interface design is to make the user's interaction as simple and efficient as possible, with as few button presses as possible while still having an intuitive layout, in terms of accomplishing user goals—what is often called user-centered design.

http://en.wikipedia.org/wiki/10-foot_user_interface

CLEAN, SIMPLE, AND EASY TO NAVIGATE THE AMAZON FIRE TV’S UI IS

Navigation should be

REMOTE FRIENDLY Remember that every Fire TV comes with an Amazon Fire TV Remote so: • Focus on the core navigation buttons • Standard Android navigation for Menu, Home

and Back buttons. • Reserve media buttons for playback only.

The following patterns are references for optimizing the design of your own apps with the system UI.

Icons are large and easy to see from across the room Home Screen (Launcher) EXAMPLE 1

Make button selection easy to see as you move around the UI via the remote Home Screen (Selection) EXAMPLE 2

Use vertical lists to display more content in landscape centric TV resolutions 1D List Views EXAMPLE 3

Only expose details when user selects item and have quick action navigation Detail View EXAMPLE 4

Chances are that your existing landscape designs will work perfectly as is assuming it supports: • Button states for selected, disabled, etc. • Easy navigation via the Amazon Fire TV Remote • Clearly indicates how to move from screen to screen

Working with HD Resolutions on TV

BUILD FOR ONE RESOLUTION

ORIENTATION

Setting up RESOURCE CONFIGURATIONS If you design your app to run on platforms other than Amazon Fire TV, such as tablets, you can create different layouts and drawables for each platform, and store them in subdirectories of res/named for various platform and device configurations. For more info, check out the Android developer resources at http://bit.ly/droid-screens

UNDERSTANDING HOW OVERSCAN WORKS

TV COLOR GAMUT

Handling different resolutions is all about understanding aspect ratios. Design for 16:9 and 4:3 along with UI that dynamically adjusts for either ratio.

http://en.wikipedia.org/wiki/List_of_common_resolutions

Think Remote First

That means at the very least, your app should support simple four-way navigation and selection input from the remote itself.

Endless runners, turn based games and other mechanics that don’t require precision input can be played with the remote.

CREDIBLY INNOVATE PHOTO HERE

This is the

AMAZON FIRE TV REMOTE The remote has all the core navigation buttons you will need for your app and casual games: • Navigation and selection wheel • Android navigation buttons for Menu, Home

and Back • Media playback buttons • Voice Search (reserved for system only)

THE 6 MAIN INPUTS FROM THE REMOTE

Code example

CAPTURING KEY EVENTS Handle DPAD_UP, DPAD_DOWN, DPAD_LEFT

and DPAD_RIGHT to navigate your layout.

DPAD_CENTER is the “Enter” key. You can

capture these events by overriding the

onKeyDown method of your View.

Adding Amazon Fire Game Controller Support

Build upon your existing Amazon Fire TV Remote’s controls with the Amazon Fire Game Controller which adds analog sticks, additional buttons and a dedicated GameCircle launcher.

THE AMAZON FIRE TV CONTROLLER Similar to a console controller with a full array of buttons

The Amazon Fire Game Controller is perfect for games which require precision controls and multiple buttons.

CREDIBLY INNOVATE PHOTO HERE

Code example

CAPTURING MOTION EVENTS To access the joystick axis, you can override

Android’s built in onGenericMotionEvent

method in the Android View. You’ll have access

to the AXIS_X & AXIS_Y values.

Use the following calculation to return a value between 0 and 1 in order to account for the dead zone found in some controllers.

gc1 = GameController.getControllerByPlayer(1) float x = gc1.getAxisValue(GameController.AXIS_STICK_LEFT_X); float y = gc1.getAxisValue(GameController.AXIS_STICK_LEFT_Y); float value = (float) Math.sqrt(x * x + y * y);

You can connect up to 7 Bluetooth game controllers to the Amazon Fire TV, only 4 of those controllers are assigned to player numbers in the GameController API.

GAME CONTROLLER API http://bit.ly/ftv-controller-api

The GameController API, part of the Amazon Fire TV’s SDK offers the following things: • Methods to associate game controllers with the player

numbers as defined by the Amazon Fire TV. • Methods to query controller state at any time. • Input event constants specific to gamepads. • Behavior to enable you to process gamepad input

events on a per-frame basis (that is, within a game loop).

Once you have a reference to the GameController instance you can use gameController.getControllerByPlayer() and supply the player number for access to that particular controller.

Once you reference a player’s controller you can call gameController.isButtonPessed() along with a key constant such as BUTTON_TRIGGER_LEFT which returns a Boolean if the key is pressed.

Access the analogue stick by calling gameController.getAxisValue()and supply a constant such as AXIS_STICK_LEFT_X to return a float you can use to determine the direction it is being pushed in.

Test changes since the last frame by calling gameController.wasButtonPressed()and supplying a constant such as BUTTON_TRIGGER_LEFT.

Make sure that you are always making calls to GameController.startFrame()on every frame inside of your game loop.

Remote and Game Controller Optimized UI

1. HANDLING A MISSING CONTROLLER Fire TV automatically detects if the controller is connected for you

2. CLEARLY DISPLAY THE CONTROLS Always show the your game’s controls and use the A for selection.

3. ANTICIPATE USER NAVIGATION FLOW Never let the player get stuck or backtrack through navigation groups

4. HAVE CLEAR UI SELECTED STATES UI should have states for enabled, disabled, highlighted & selected

How to Get Started

EXTENSIVE ONLINE DOCUMENTATION http://bit.ly/ftv-sdk

SETTING UP YOUR DEV ENVIRONMENT http://bit.ly/ftv-dev-setup

Download the following: • The Java Development Kit (JDK) • Android SDK • An Android IDE (Eclipse or Android Studio) • The Amazon Fire TV SDK add-on

Connect to Fire TV via ADB over the wired Ethernet port or a WiFi network connection.

Test your app or game before submitting it to the Amazon Appstore directly on the Amazon Fire TV.

What’s included in the

FIRE TV SDK The Amazon Fire TV SDK is an Android SDK add-on. It includes these components: • Notifications API, for building Fire TV

notifications. • GameController API, for managing players and

input from game controllers. • Sample apps to help you use the SDK.

The included code covers how to use the Notification API, a sample game and a UIWidget example.

CREDIBLY INNOVATE PHOTO HERE

Summary

WHAT WE LEARNED We covered the following: • Amazon Fire TV is powerful • Design for 10’ UI and Color Saturation • Design an interface for Controller,

Gamepad • Submit to Amazon Appstore http://bit.ly/DevPortalAccount http://bit.ly/FireTVDeveloper @ MikeFHines

HTML5 Mobile Web Apps 65

developer.amazon.com/blog @MikeFHines

Building for Amazon Fire TV

TABLETS AND TVS ARE Prime targets for future development

Source: Vision Mobile Developer Economics 2013 % of respondents using and planning to use each screen type (n = 4,946)

Android developers can use existing tools and frameworks to develop for Amazon Fire TV.

Over 75% of Android apps we've tested just work on Kindle Fire tablets, with no changes required.

TEST YOUR APK ONLINE https://developer.amazon.com/public

Amazon Fire TV Notifications

1. Informational Notifications, for general messages to the user, with optional actions.

1. Media Notifications, for information on media (artist,

title) playing in the background.

These notifications will appear for a short time and disappear without interaction. Informational Notifications NOTIFICATION EXAMPLE

Adding actions to

AMAZON FIRE TV NOTIFICATIONS Modify the notification call to action by using PendingIntent(setContentIntent()) which allows you to: • Provide a way for the app to start an

action using the pending intent. • Enable the user to press the menu key to

turn the notification into a modal window.

When a modal is active, the user must take actions to dismiss it. MODALS TAKE OVER FOCUS MODEAL EXAMPLE

Encourage cross-device usage

Adding GameCircle lets your customers use apps, play games and interact with other customers across any mobile device.

Enable customers to pick up where they left off regardless of the devices they use. Whispersync for Games automatically synchronizes app data across devices and resolves conflicts.

Leaderboards and Achievements can extend the audience and time of engagement of your game, as players encourage their friends to play the game so they can be ranked against people they know. For non-game apps, Achievements can encourage exploration of app features.

LEARN MORE ABOUT GAMECIRCLE http://bit.ly/AMZNGameCircle

Services for Amazon Fire TV

GameCircle provides everything you need to implement achievements, leaderboards, and saved game synching on mobile devices regardless of platform.

Amazon Fire TV supports the Amazon In-App-Purchasing API so you can offer consumable items, permanently entitled items, and even subscriptions for sale in your app.

With support for deep analytics and A/B testing you’ll be able to fine tune your Amazon Fire TV apps and games to create the most engaging experience possible.