D&D Beyond Twitch Extension: A Retrospective
The D&D Beyond Challenges team recently released a Twitch extension. It’s allowed streamers to integrate D&D Beyond with their live games, so that their viewers can see all the player characters’ statistics just by mousing over an icon in the Twitch application.
This project was a huge success, and the extension is being used by everyone from small streamers to Critical Role. We learned some valuable lessons along the way that we would like to share, so let’s take a look back at the places where we succeeded, and the places where we struggled.
A Little Context & Our Process
One of D&D Beyond’s goals from the outset was to optimize our service for streamers and non-streamers alike. People who play D&D at home, in private, and people who play it online, for the public, have wildly different needs. Our way to bridge that gap was to create a Twitch extension (especially, because at the time, we were a Twitch subsidiary). Our team was tasked with implementing the Twitch extension.
Some projects take a winding road to completion, while others have a clear destination from the outset. This project was one of the latter. The design for the Twitch extension was created before our team was assigned to the project, so we already had a solid schematic of what we would be creating. The desired functionality was pretty static, since the project had been discussed extensively since D&D Beyond’s creation.
Even though it had been discussed for ages, the project ultimately began in late June of 2018, and we released the extension in late October of 2018. Our team worked in weekly iterations with planning on Monday, daily stand-ups, and retrospectives on Friday. Overall, the team did a great job executing. This was the first time that this team had worked together so it was great that we were able to gel so well.
Desired Functionality
This extension was designed to benefit Twitch viewers first and foremost. We asked: what information do Twitch viewers want to know when they first enter a livestreamed D&D game?
Here’s what we came up with: Character information for the party, including: character portraits, hit points, and links to character sheets. Fortunately, most of this functionality already exists within the D&D Beyond character sheet, but this would be the first time we would be displaying it in a manner that would be focused on outside viewers. The most complex functionality of this project was a really important piece: real time character updates.
Allowing a character’s hit points to update in real time was the most important part of this feature, since people want to know how the characters are doing in the midst of a heated battle. Since people would be watching the stream without refreshing the page, it was important that we pushed updates to the extension. Luckily, Twitch has this functionality built in to the client itself, allowing us to piggyback on their existing technology.
The Design
The examples that Twitch gives in their docs demonstrate a React client with a Node.js back end service, but handling real-time updates would be tricky. We wanted to avoid polling since we expected scaling issues. Luckily, our infrastructure is hosted in AWS, and they have a couple of services that would make this pretty smooth.
The plan was to trigger a message sent to an SQS queue on all character updates. A lambda function would then trigger and make an HTTP request to the back end service.
So, our architecture was in place, we would create a React client as the overlay. Even though the majority of our team’s backend experience was in .NET, we chose to leverage the Twitch example Node.js service as a starting point. Lastly, our (very simple) lambda function was configured to be triggered when a message was put on the queue.
As far as analytics are concerned, we learned in our last project the value of tracking user interaction data, so we implemented custom GA events every chance we got. We are just now started to be able to glean all the information from this project, but because we did it early, it was a pretty light lift.
Awesomeness
We were able to implement a couple of features that we’re tremendously proud of.
The first was the stat bar. An idea that came from the team to emulate fighting games. Check out the CodePen:
Now while the health bar had some actual visual functionality, we also wanted to just goof around a bit. We were able to implement an easter egg that caused a D&D monster called a beholder to fly across the screen when a viewer input in the famous Konami code while viewing. We faced a few challenges implementing this feature; since Twitch extensions are iFrames, we needed to get focus before we could catch when the code was entered so we added a hidden B in the top middle of the screen. It shows when you click on it.
Unfortunately, our analytics told us that no one was finding this awesome Easter egg, so our product person gave the community a little help:
Within an hour, we saw a success in our Analytics and a Twitter reply from a user that proved they figured it out.
Implementing this easter egg and urging our community to discover it was a blast, so please expect more of this kind of awesomeness from our team in the future!
Release & Feedback
We originally showed off on the development update during our Twitch stream. We saw hundreds of users load the extension and got some great feedback. The next big test was a load of thousands of users during a live stream at TwitchCon.
Getting feedback was rather simple because we could see reactions on the stream. Almost all the feedback during our initial streams were positive.
Also, you guys are fantastic and you all deserve a high five, pat on the back and a free beer.
oh holy shit the sidebar is tracking their HP in real time?
the D&D Beyond overlay feels almost a bit.. voyeuristic. I shouldn’t be able to see all these things.
We are still waiting for that free beer, but our team was SUPER stoked to see this kind of feedback.
Scaling Up
We knew we would have to make this extension scale well. D&D Beyond has a partnership with Critical Role, the foremost D&D stream on the web today. Their streams regularly reach tens of thousands of viewers, so we had to make this extension able to handle a massive scale. Luckily, since we had months in production, we were confident the functionality was there, but we were about to get a test of our systems architecture.
Because we used ECS, we have the ability for elastic scaling, but we knew that viewers would be hitting our back end service all at once, so we scheduled our servers to scale out prior to the stream.
The first stream logged upwards of 50,000 viewers and we did have a massive server crash halfway through the stream, but it spun back up in minutes and many people didn’t even notice downtime. The next step was examining the failure.
Monitoring
One thing we noticed were lots of Sentry.io errors. There are tons of different configurations for operating systems, browsers and browser configurations (ad blockers/privacy settings/etc.) and we collected lots of information.
The biggest issue was the crash. We had CloudWatch and New Relic in place to give us lots of information about what was happening.
Overall, this was a fun project that we consider successful. We will add functionality in the future and in the meantime will be working to eliminate bugs, creating more resilience, and learning more about how users use the extension.
Next Up
Now, our team is working on the Encounter Builder. We started in late November and are making great progress. We can’t wait to get this into the hands of subscribers soon!
