Today, there are over 100 million Alexa-enabled devices around the world. The number of active users of Alexa has more than doubled since 2019, and engagement with third-party Alexa-powered devices has doubled since 2020. Many of Alexa’s customers love playing games in a variety of categories — from trivia games like Question of the Day to game shows like The Price is Right — on their devices, and in this new series, you’ll learn some tips and tricks on how to build great games on Alexa that focus on richer screen experiences leveraging the Web API for Games.

This first blog touches upon art of the possible, shares some success stories from our top developers, and dives into performance optimizations you can make to keep your customers coming back for more. In the next blog, we'll go deeper on performance and speak specifically on sample framework integrations. Stay tuned!

Selecting the right Alexa technology for your game

When developing games for Alexa devices with screens, Alexa provides two technologies for rendering your presentation: Alexa Presentation Language (APL), and the Web API for Games. Depending on your game’s needs, you may use either or both technologies.

Alexa Presentation Language (APL)

APL is a compact, declarative design language targeted at creating flexible graphical layouts with basic touch interaction, using minimal device resources. All Alexa devices with screens are capable of displaying APL, and APL provides tools for adapting your design to the vast variety of Alexa enabled screens, across many form factors, from many manufacturers. APL’s document model complements the Alexa Skills Kit voice model, allowing you to send a new layout with every skill response. APL is designed around a data binding concept, making it easy to dynamically adjust your layouts by defining slots in your layout, which will be swapped at presentation time by consulting a separate JSON object you specify.

APL includes components for arranging bitmap and vector images and text, as well as components that can host audio and video playback. APL provides a local command processing facility that allows you to specify how messages are sent to your skill’s endpoint in response to customer interactions, as well as make presentation adjustments to indicate you have done so. The Alexa Developer Console provides a comprehensive APL editor with syntax checking and preview.

If your game is primarily voice driven and you’d like to augment it with some simple imagery and optional button press interactions, then to reach the largest number of Alexa devices, consider implementing an APL version. To learn more, the trainings and workshops are designed to help you deploy an APL skill in as little as 5 hours. APL Ninja is a great community driven resource for exchanging tips and tricks with other builders.

Web API for Games

The Web API for Games lets your Alexa skill deploy a web app to compatible Alexa devices, which will host your app in a Chromium based web view. Your web app can leverage any standard web technologies like HTML, CSS, JavaScript, WebAudio, and WebGL to create traditional, fully animated, 2D and 3D, device side processed, interactive games. Using the Alexa JavaScript API, your web app can send and receive authenticated messages to your skill’s endpoint, letting you include Alexa voice intents and Text To Speech processing in your game.

Because Web API game development uses standard web technology, you can easily leverage any existing JavaScript modules like language processing tools, texture generators, or event routers, existing HTML5 presentation frameworks for graphics and audio like ThreeJS, PixiJS, HowlerJS, or CreateJS, or even entire game engines like Phaser, or BabylonJS. You can host your web app at any publicly visible HTTPS location, and you can make additional HTTP calls to load assets and use backend services anywhere on the web.

The Web API for Games is only supported on select Alexa devices that have sufficient processing power to host a web app. This includes all Amazon Echos Show (excluding the Echo Spot), and Amazon Fire TV Stick and Cube devices 2018 and later. If you’d like to create a game that requires GPU accelerated 2D and 3D rendering and animation, touch interactions that require custom logic like gestures or drag and drop, sound mixing that carries between player interactions, or game logic that requires a simulation loop, then consider making a Web API version.

Working across APL, Web API, and devices without screens

If you’ve decided that your game can support and would benefit from both the reach of APL and the richness of Web API, then you can provide both versions to your customer. The ASK skill request will identify which capabilities the device in use has, and you can decide on the fly which of your experiences to offer. Similarly, if your skill does not find any display capabilities in the skill request, you may either offer a voice-only version of your game, fall back to offering some alternative interaction like reminding them of their high score, or just explain to the customer that they need a device with a screen in order to play. Remember, customers may discover your skill from a wide variety of sources, if they can’t play your game right now, give them a reason to come back later on a different device!

Here's a good way of thinking about the two multimodal frameworks:

Getting started with the Web API

First, check if a device supports HTML. Before sending a presentation directive, you should check whether the device has the capability to support HTML and then fallback to APL or provide a voice-only version of your game, if unsupported. This is the same supportedInterfaces block that can be checked for APL-capable skills today.

In Typescript, checking for HTML support might look like:

export function supportsHTMLInterface(handlerInput: HandlerInput): boolean {
    const { context } = handlerInput.requestEnvelope;
    const htmlInterface: boolean = (context.System &&
        context.System.device &&
        context.System.device.supportedInterfaces &&
        context.System.device.supportedInterfaces['Alexa.Presentation.HTML']) as boolean;
    return htmlInterface;
}

Once you determine that the requesting device supports the interface, you can send an Alexa.Presentation.HTML.Start directive to spin up a web view on your device and get started (tech docs).

The remainder of this guide is not intended for beginners. For that, refer to the Getting Started with the Web API for Games blog or check out our Hello World boilerplate repo to start developing now.

Going further with the Web API: Reference games

We’ve built 3 reference games that demonstrate the flexibility of what you can do with the Web API, and serve as great starting points in your game development journey. Github repo links for each of the games below will be provided in a future blog update but in the interim, enable the games and get inspired!

Controlling a character with your phone

WebRTC is an open source framework allowing the real-time communication between web applications and mobile devices. In Slime Time (click to try it), you can pair your phone with your AED via a QR code and control the character on-screen using your phone as a virtual d-pad while engaging with the in-game characters with your voice.