Behind the Development: The Pokémon Badge Collector Extension

Few entertainment franchises have achieved global success in the same way Pokémon has. Last week, Twitch and The Pokémon Company International kicked off Pokémon: The Series extravaganza featuring 16 movies and 900+ episodes to be live-streamed in several different marathons spanning into 2019. This will be the single longest programmatic viewing event to stream on Twitch.

__Another aspect we’re particularly excited about is the Pokémon Badge Collector Extension. This super-slick and engaging, interactive overlay allows viewers to virtually collect Pokémon badges while they watch.

To activate the Extension, viewers click on the Poké Ball overlay and start collecting Pokémon badges. That’s not all, though; the Extension is feature packed including:

• Achievements — track lifetime stats, such as points and total badges collected over the course of the entire marathon

• Inventory — review and search through all the Pokémon you’ve caught

• Leaderboard — see how you rank with friends and other Pokémon fans who are also watching and playing along

• Bonuses — complete individual and global community goals to earn special bonuses and rewards

We caught up with the creative folks over at Stink Studios to learn more about what went into building such a unique and innovative Extension for Twitch.

TwitchDev: Why are you excited about this program and Extension?

Stink Studios: Twitch is the only major live streaming platform that offers a way for developers to create interactive applications that exist over the content. Plus, anyone can build an Extension and distribute it to broadcasters, truly democratizing this platform’s feature.

Here at Stink Studios, we’ve contextualized this as a sort-of augmented reality: an Extension acts as that heads-up display to live content. There is a lot of talk about the merging of technology and content; Twitch Extensions do this.

TwitchDev: Is this the first Extension you’ve built for Twitch? If yes, where did you start?

Stink Studios: This is our first Extension that we’ve built for Twitch. When building for a new platform, the very first place we start is the documentation. Fortunately, Twitch Extensions has written pretty thorough information to get developers started, but leaves it pretty open-ended so developers can customize their codebase to suit their needs. The next step we did was to do a general audit of the landscape, combing through pre-existing Extensions and searching Github for publicly available codebases. Finally, we prototyped typical network relation strategies — 1:1, 1:N, N:N, and N:1 — within the Twitch Developer Rig since these patterns would be the foundation to our extension.

TwitchDev: Can you briefly describe your development process, including how you came up with the idea, how long it took, what you did to test or troubleshoot, etc.?

Stink Studios: Here at Stink Studios, creative and technical teams work closely together to come up with new concepts for clients. We iterated a lot of ideas together in what we call a “grab-bag deck.” One idea that stuck out was collecting badges throughout a stream’s duration. In particular, how can we reward viewers for active watching? Twitch told us that they think Pokémon would be a great content partner for this concept, and we did another round where we tied the technical concept with the content.

From there, we created UX documentation about how the Extension works, such as user flows and game mechanics, which flowed into creative designs that gave the Extension a look and feel that is consistent with both the Twitch and Pokémon universes. These first two phases (UX and design with technical R&D) took about four weeks.

Finally, we went into our coding process, where we began to actually build the Extension from the ground up. Since this was a new platform for us, we had to vet out how the Extension works across different screen sizes, as well as how to handle about 100,000 concurrent users within this context. Then, we created an overall backend systems architecture and split out the visual components to be built out on the front end. We divided and conquered over about six quick sprints, which took us about five weeks to build. However, now that we have a lot of the infrastructure encapsulated as reusable components, we can have the foundation to build any future extensions efficiently.

TwitchDev: Describe the tech behind this Extension? Any hurdles you had to overcome?

Stink Studios: For the front end of this project, we used React and Redux since they are battle-tested and production-ready libraries that have a lot of community support. We sometimes use Vue on other projects, but since the Twitch Developer Rig is already built with React for the front end, so we decided to align with that.

For the back end of this project, we used a serverless architecture, built on Amazon Web Services (AWS). Serverless architecture is a relatively new backend paradigm, where the server only exists when data is transmitted to it, rather than having a box that is “always-on.” In particular, we used AWS API Gateway and Lambda to both handle our users and their badge collections, which are stored on an Aurora database. In order to alleviate stress on the database when a lot of users collected a badge simultaneously, we needed a way to slow down all the requests. To accommodate this, we used AWS’s SQS as a virtual conveyor belt. Interestingly enough, SQS is actually one of the oldest services on AWS. In combination with all of the relatively new services we have used, it served as a good contrast in our architecture.

Finally, to be incredibly reactive to viewers, we leaned into optimistic updates with eventual consistency model. That is to say, viewers would immediately see their badge and stat updates after a collection without having to wait for the server to return any information. Once the server processed all the information in bulk, it would validate their collection and tell the front end, which would either retain the collection or rollback the change. Using these principles allows for viewers to have immediate gratification without sacrificing the verification of their actions.

TwitchDev: The Extension initially had some outages due to significantly higher usage than expected, can you describe how you optimized and scaled to keep up with demand?

Stink Studios: This outage affected primarily our Users API. In particular, viewers entering the stream were not able to access the Extension. If you were in the stream before the outage occurred, you could actually keep collecting Pokémon badges. Our primary issue was bottlenecks with the database. We made a lot of optimizations to our AWS Lambda functions to pool and reuse database connections, but ultimately, pivoted away from using a serverless architecture to a more typical server-based setup on AWS Elastic Beanstalk. Fortunately, we were using a framework that made the transition relatively painless. Although our Collect API is still a serverless microservice, it makes more sense for our Users API to use a more typical pattern for accessing and writing user information. Most of the time, the tried-and-true solutions work the best!

Watch and collect Pokémon badges over on the TwitchPresents channel and dubbed on its companion channels in French, German, Spanish, Italian, and Brazilian Portuguese.

Ready to build interactive experiences on Twitch? Start now!