Download - Porting Tablet Apps to the Amazon Fire TV
From Tablet to TV: What you need to know Qualcomm® Uplinq™
MIKE HINES DEVELOPER EVANGELIST, AMAZON
@MikeFHines mikehines45
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.