© 2014 Amazon.com, Inc. and its affiliates. All rights reserved. May not be copied, modified, or distributed in whole or in part without the express consent of Amazon.com, Inc.

November 12, 2014 | Las Vegas, NV

AFF302

Responsive Game DesignBringing Desktop and Mobile Games to the Living Room

Jesse Freeman, HTML5 & Game Developer Evangelist, Amazon

ONE OS, MULTIPLE FORM FACTORS

For the first time in Amazon’s history, we have a complete device ecosystem for publishing your game.

FIRE OS ON PHONE, TABLET & TV

Our platform is the perfect fit for any developer publishing Android games. We’ve found that most Android apps we tested just work on Fire OS devices. If your IDE outputs an APK, we can run it!

CHANCES ARE YOUR GAME ALREADY WORKS

Making a Mobile Game?

AMAZON FIRE PHONEGot a mobile game? Try out our Fire Phone,

which features top-end specs, dedicated GPU,

2 GB of RAM and unique features such as

Dynamic Perspective and Firefly.

Got a Tablet Game?

AMAZON FIRE HD & HDXBuilding for tablet? We have several Fire

tablets ranging from 6”, 7”, and 8.9" sizes.

Each tablet has blazing fast processors as well

and high-resolution HD displays. Our Fire HD

lineup also has great performance at a more

affordable price point for customers.

Making a PC or Console Game?

AMAZON FIRE TVWant to build your games for the big screen?

Target Fire TV, which allows you to take

Android games and publish them for the

10-foot living room experience.

Putting It All Together

AMAZON GAMING SERVICESWe have services designed exclusively for

game developers such as GameCircle. If your

current game has leaderboards, achievements,

and cloud syncing it shouldn’t take long to

migrate over to our APIs. We even support

Unity and other third-party game frameworks.

Distribute Your Game with Us

THE AMAZON APPSTOREReach hundreds of millions of new customers

in 236 countries across multiple platforms:

• Fire Phone

• Fire HD & HDX

• Fire TV

• Amazon App for Android

• BlackBerry

• Mac & PC

GATEWAY TO THE LIVING ROOM

Amazon Fire TV gives you a familiar Android-based

platform to extend your apps and games to the big

screen.

WHAT IS AMAZON FIRE TV?

Choose between the Amazon Fire TV Remote or the

Amazon Fire Game Controller for a richer gaming

experience

POWERFUL ANDROID-BASED GAMING

The Amazon Fire TV is

INCREDIBLY POWERFULAmazon Fire TV uses a Qualcomm Quad

Core Snapdragon Krait 300 processor with

Adreno 320 GPU and 2 GB of RAM to support

high-performance game experiences.

Support for multiple types of

GAME CONTROLLERSAmazon 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 MULTIPLAYERAmazon Fire TV allows up to 7 game

controllers to be connected at one time,

opening up multiplayer gaming in the living

room.

Taking advantage of

SECOND SCREENAmazon 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.

Full support for

HD VIDEO OUTAmazon Fire TV has support for full HD video

out from your app or game at 1080p.

WHAT IS RESPONSIVE GAME DESIGN?

a set of guidelines and best practices that help websites scale from desktop to mobile.

ON THE WEB, RESPONSIVE DESIGN IS

http://bit.ly/1vT19ek

Same Site on Desktop and MobileResponsive design allows the layout of a site to adapt to different screen resolutions.

A

BE

C D

A

B

C D

E

RESPONSIVE DESIGN

similar concepts to include other key aspects you need to consider when making multi-platform games.

RESPONSIVE GAME DESIGN BUILDS ON

Responsive game design can be summed up in the following key requirements:

1. Game graphics and UI support multiple resolutions

2. Game mechanics work across multiple types of input

3. Publish to multiple platforms with the same codebase

4. Saved data is synced across all platforms

APPLYING RESPONSIVE DESIGN CONCEPTS TO GAMES

PART 1 –

GAME GRAPHICS AND UI

What does it take to get a game’s graphics and UI to look good at multiple resolutions?

SCALING GAME VISUALS ACROSS DIFFERENT RESOLUTIONS

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

WHAT MAKES DESIGNING FOR TV SO DIFFERENT

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.

THIS IS CALLED THE 10-FOOT USER INTERFACE

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

“

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

Navigation should be

REMOTE FRIENDLYRemember 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.

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

WHEN DESIGNING MOBILE FRIENDLY UI

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.

SUPPORTING MULTIPLE RESOLUTIONS

Resolution Scaling DemoCODE EXAMPLELeveraging a 3D camera to maintain pixel perfect scaling

ANTICIPATE USER NAVIGATION FLOWNever let the player get stuck or backtrack through navigation groups.

PART 2 –

GAME INPUT

Evolution Of The Console ControllerGAME INPUT EXAMPLE

http://gizmodo.com/5110650/the-evolution-of-the-console-controller

With a lot of planning and consideration, it’s possible to have games work with a single input mechanic across different devices.

SUPPORTING CONTROLS ACROSS DIFFERENT INPUT TYPES

That means at the very least, your app should

support simple four-way navigation and selection

input from the remote itself.

A REMOTE IS INCLUDED WITH EVERY AMAZON FIRE TV

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

DESIGNING FOR THE AMAZON FIRE TV REMOTE

This is the

AMAZON FIRE TV REMOTEThe 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 EVENTSHandle 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.

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 OPTIONAL AMAZON FIRE GAME CONTROLLER

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

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

DESIGNING FOR THE AMAZON FIRE TV GAME CONTROLLER

Code example

CAPTURING MOTION EVENTSTo 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.

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.

SUPPORTING MULTIPLE CONTROLLERS

GAME CONTROLLER APIhttp://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).

THE GAME CONTROLLER API

Cross-platform Controls DemoCODE EXAMPLESingle input for moving a character on desktop, mobile, tablet and TV.

DETECT THE PLATFORMAnd always display the correct input controls based on the platform the game is being played on.

PART 3 –

SINGLE CODEBASE

When targeting multiple platforms, the key is to try to reuse as much code as possible.

PUBLISHING A SINGLE GAME FROM THE SAME CODEBASE.

Pick Frameworks

THAT SUPPORT MULTIPLE

PLATFORMSDon’t reinvent the wheel. Pick the right

framework to build your game with:

• Unity

• GameMaker

• Unreal Engine

• HTML5

PART 4 –

SYNCING DATA

A key component to the responsive game design concept is allowing a single game session to extend across different devices, allowing your player to start on one platform and continue on another.

SAVING STATE ACROSS DEVICES

GameCircle provides everything you need to implement

achievements, leaderboards, and saved-game synching

on mobile devices regardless of platform.

FIRE OS HAS BUILT IN SUPPORT FOR GAME CIRCLE

Whispersync for Games automatically

synchronizes game data and resolves any

conflict arising from offline and simultaneous

game use.

WHISPERSYNC FOR GAMES

You define achievements for your game in the

GameCircle panel of the Amazon Apps &

Games Developer Portal, enter metadata

associated with that achievement, and upload

the images to display for that achievement.

ADDING ACHIEVEMENTS TO YOUR GAME

Leaderboards can also extend the audience of

your game, as players encourage their friends

to play the game so they can be ranked

against people they know.

THE IMPORTANCE OF LEADERBOARDS IN GAMES

LEARN MORE ABOUT GAMECIRCLEhttp://bit.ly/amzn-gc

REAL WORLD EXAMPLE

Terraria on the Amazon Appstorehttp://amzn.to/1vsR5WR

Terraria’s gameplay can be broken up into 4 distinct modes:

1. Dig - Exploring the world

2. Build - Creating new structures in the world

3. Fight - Completing missions and activities

4. Explore - Vast open-world sandbox environment

WHAT MAKES TERRARIA UNIQUE

Each gameplay mode requires different levels of precision making it ideal for playing the game on different form factors that cater to each type.

DIFFERENT STYLE OF PLAY

64

DIGGINGIdeal for playing on touch screens while on the go

BUILDINGWorks well on touch screens and controllers for more detailed building

FIGHTINGRequires precision and is ideal with a game controller

Terraria also takes advantage of

GameCircle’s WhisperSync, making it

possible to switch between Fire

phone, tablet, and TV based on what

you are doing and where you are.

WHERE DO WE GO FROM HERE?

EXTENSIVE ONLINE DOCUMENTATIONhttp://bit.ly/ftv-sdk

RESPONSIVE GAME DESIGN POSThttp://bit.ly/rgd-post

WANT TO LEARN MORE?http://bit.ly/games-on-fire

The End

THANKS FOR

WATCHINGDon’t forget to check out

https://developer.amazon.com/public/

for more info on how Amazon can help you

publish and monetize your own games.

See my blog posts at http://bit.ly/freej-amzn

Next Sessions:

Thur 11:00 in Murano 3304

AFF202: Everything You Need to Know about Building Apps for the Fire Phone

Thur 4:30 in Murano 3304

AFF301: Fire Phone: The Dynamic Perspective API, Under the Hood

https://developer.amazon.com/welcome

https://developer.amazon.com/blog

Android

Fire phoneKindle Fire

Fire TV and Fire TV Stick

BB 10

http://bit.ly/awsevals