Live Streaming is becoming an increasingly popular form of entertainment. As it grows, streamers have looked for more ways to interact with their fans. Through creating systems to automatically allow their fans to interact, streamers have created viral sensations such as Twitch Plays Pokemon, in which commenters can play Pokemon by typing specific commands in chat.
In this tutorial, we are going to build a basic Twitch Chat Game that reads Twitch comments and uses them to allow a player to interact with the web app. While we aren't going to get too fancy in terms of what we make, we will go over the building blocks for you to make the next big Twitch game!
If you'd like to follow along line by line, you can find the source code here:
And if you'd like to quickly try out the game, you can test out a demo on Codesphere right here:
Once the app loads in, just enter your twitch channel on line 45 of index.html and run
The tools we are going to use in this tutorial are relatively straightforward, though you may need additional libraries and frameworks depending on what kind of game or Twitch bot you are looking for.
First, the cornerstone of our interaction with Twitch chat is going to be a library called tmi.js.
You can access p5.js via the following CDN:
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.1.9/p5.min.js" integrity="sha512-WIklPM6qPCIp6d3fSSr90j+1unQHUOoWDS4sdTiR8gxUTnyZ8S2Mr8e10sKKJ/bhJgpAa/qG068RDkg6fIlNFA==" crossorigin="anonymous" ></script>
Finally, we'll be developing and deploying our app with Codesphere. Codesphere is a zero-config cloud provider that offers a Web IDE directly on its platform, in order to make deployment much more seamless.
If you don't wish to deploy your app, all of the steps in this tutorial will work in your text editor of choice.
To keep things simple, we'll be creating an extremely simple, yet fun game for our twitch viewers to play. Here's how it works:
A viewer comments "join" to enter the game. They will then see their name on the screen
Each round, viewers will comment "A", "B", "C", or "D", and be placed in a corresponding box on a 2x2 grid
When the round timer is over, a box is chosen at random and all players in that box are eliminated.
The rounds continue until no more people are left standing
Obviously, a lot more can be added to increase your viewers' involvement and entertainment, but this roulette-esque game will be easy to make and allow us to focus on reading Twitch chat.
First, initialize your npm project with:
After entering the details for your project, install ExpressJS with:
npm i express
Once that is done, create
index.html, and a public folder for us to put our
TMI.js file in. Your file tree should look like this:
server.js file, place the following code to serve our page:
Note the following code which was used to listen to the Twitch chat:
- Allow Twitch Chat to play Chess against you
- Integrate Spotify with Nodejs and let your viewers queue songs
- Let your viewers compete against each other in an .io type game for prizes
Tweet at us the cool things you build @CodesphereCloud!
Happy coding from your good friends at Codesphere, the next generation cloud provider