Chat Heroes

Boy Hero
Boy Chef
Boy Pirate
Girl Hero
Girl Chef
Girl Pirate

Inspiration

Chat Heroes came about after spending approximately 3 years on the Twitch platform. While we were able to meet and chat with new people, we still felt limited in the ability to express ourselves. Twitch brought games to life, and now Chat Heroes brings chat to life. Being able to communicate with your own, personalized animated characters and multiple interactions brings chat into a whole new dimension.

What it does

Chat Heroes allows users to pick their own characters, personalize them and type commands into the chat box on a stream to have their characters perform actions as a video overlay on the stream. Chat Heroes allows both the streamers and viewers to show love, say hello, get salty, etc. Chat Heroes provides multiple characters and interactions to choose from.

Example videos of interactions: (right click and open link in new window)

How we built it

Chat Heroes was built using several technologies and Amazon Web Services infrastructure. The characters themselves are created in Adobe Illustrator. An animator animates them using Esoteric Software's Spine. The animation is exported from Spine into images and JSON data hosted on AWS S3 and AWS CloudFront CDN. The images and JSON data are put together in the browser using several JavaScript libraries hosted on Twitch's CDN for the extension. The animations are controlled by an IRC chat bot written in Node.Js, which runs on an AWS EC2 instance and the GUI JSON endpoints are hosted on a separate AWS EC2 instance running Amazon Linux with Apache. JSON Web Tokens are exchanged through Twitch and the endpoints to ensure the authenticity of the transactions.

Challenges we ran into

Our biggest single challenge was time. We found out about the contest at the end of January 2019 when we were developing our concept for an Extension. Besides time, pulling together technical, artistic, creative and business talent from all over the world in short order was extremely difficult. From a technical standpoint, the biggest challenge was integrating so many different components together without complicating the end user experience.

Accomplishments that we're proud of

Taking this concept to a production ready Extension in an extremely compressed time frame. Utilizing many different technologies and platforms to make smooth, creative and fun animations. The best part about developing this extension is getting to be silly and creative to allow others to have a ton of fun.

What we learned

We learned how flexible and extensible the Twitch platform really is. The APIs and endpoints can do a lot more than they seem at first look. The community forum is well established and people are willing to help when you get hung up.

What's next for Chat Heroes

The sky is the limit. Chat Heroes will implement many new features and must continue to deploy new character and interaction content on a continuous and rapid schedule to keep engaging users. More characters; more interactions; character customization; replaying interactions (in case you miss them); data analytics to understand the users and what they would like to see from the Extension; continual improvement of the infrastructure through more in-depth understanding of the Twitch and the AWS infrastructures.