Real players with unique avatars performing an action on the Livestream

Try the stream here: https://www.youtube.com/watch?v=Q_3v4vz7dVI

Ever since the launch of Twitch Plays Pokemon, I have been fascinated by the idea of users in a live stream having some form of agency over the content they watch.

This has evolved into some indie (and a handful of AAA) games integrating streaming capabilities, where messages sent in the stream’s chat can be used to influence effects in the game session. Pretty cool!

Now picture this, an MMO built from the ground up that lets users interact and impact the world without ever even loading a client. While this proof of concept is some ways away from that; making use of some basic game design principles, we can boost user retention, engagement, and delight.

For more cool gamedev / tech stuff, follow me on Twitter! https://twitter.com/LiamSorta

Why did I make this?

The #TeamTrees movement was kicked off as a celebration of Mr. Beast’s 20M Subscriber milestone, with the aim of planting 20 million trees around the world. Being supported by other content creators such as Mark Rober, SmarterEveryDay, and PewDiePie. His movement was picked up by news outlets around the world, even attracting large donations from large tech CEOs, including SpaceX (Elon Musk), Twitter (Jack Dorsey), Shopify (Tobias Lütke), and YouTube (Susan Wojcicki).

This movement really struck a chord with me, in addition to making a donation to the cause, I wanted to do more for it. Having seen so many livestreams that simply record and stream webpage, I knew it could be done better.

Getting started: Overview

Disclaimer: This prototype was put together in less than 24 hours — absolutely no consideration was given to code architecture or design! Use these learnings as a guideline, not documentation :)

This post will cover the integration and some logic for handling users/scores, though won’t include any Unity-specific guidance.

Tools/Services used in this project:

Web Scraping (TeamTrees.org Counter)

Youtube Live Streaming API (Parsing chat messages)

Unity (Dev engine)

Postman

Visual Studio + Photoshop (use whatever code editor/photo editing suite you prefer)

Lofi Hip Hop Chill Beats to Study and Relax To™

Data flow of the Live Stream game

Displaying the #TeamTrees counter

The first thing we need to plug in is our counter from the TeamTrees page, using a GET request by calling ‘UnityWebRequest.Get’, we can grab the source from the TeamTrees.org website. I wrote a small regular expression (Regex) to then extract just the number of trees planted, storing it in a ‘goal’ variable where we interpolate between the current value and the goal. By having this extra line of code, the number climbs up to the new value, instead of jumping to it away, it’s the little things ❤

Linear interpolation on the counter looks waaaaay nicer

//Include "using UnityEngine.Networking;" namespace at the top of //your code void Update() {

progress = (int)Mathf.Lerp(progress, goal, speed * Time.deltaTime);

text.text = progress.ToString("N0") + "

Trees Planted";

}

while (true) {

UnityWebRequest www = UnityWebRequest.Get("https://teamtrees.org/");

yield return

if (www.isNetworkError || www.isHttpError) {

Debug.Log(www.error);

}

else {

var myRegExp = new Regex("(?<=data-count=\")(.*)(?=\">)");

Match a = myRegExp.Match(www.downloadHandler.text);

goal = int.Parse(a.Value);

if (first) { progress = goal; first = false; }

}

yield return new WaitForSeconds(5f);

}

} IEnumerator GetCounter() {while (true) {UnityWebRequest www = UnityWebRequest.Get("https://teamtrees.org/");yield return www.SendWebRequest(); if (www.isNetworkError || www.isHttpError) {Debug.Log(www.error);else {var myRegExp = new Regex("(?<=data-count=\")(.*)(?=\">)");Match a = myRegExp.Match(www.downloadHandler.text);goal = int.Parse(a.Value);if (first) { progress = goal; first = false; }yield return new WaitForSeconds(5f);

Live Streaming API: Pre-requisites

Generating API Key

To pull messages from our chat, we’ll be using YouTube’s Live Streaming API. Before getting started, we need to generate an API key on the Google Developer Console — once generated, go to the API Console and select the project you just made. On the Enabled APIs Page, make sure the status for YouTube Data API v3 is ON.

ref: Google’s page on generating an API Key

Getting Livestream ID

When calling the API, we need to provide a livestream ID — Note that this is not the same as your video ID, we have to make a separate call to find out what our REAL livestream ID is.

Enter the following URL into your browser / Postman:

(Your video ID is the code at the end of your stream’s URL — https://www.youtube.com/watch?v=M4SnZMTlZ68)

Inside the response you’ll get an ‘activeLiveChatId’ at the bottom, we can then plug this into the next call to get our chat messages!

Pulling Chat Messages

I’d recommend checking out the documentation page for the LiveChatMessages API to familiarise yourself with the extra options available in case you want to play around with them. In this case, we’re only using the snippet, and authorDetails, as we’re only using messages and requesting for the sender’s username/channel ID.

You can test to see if this is working by pasting the following URL into your browser / Postman:

https://www.googleapis.com/youtube/v3/liveChat/messages?liveChatId={LIVE_CHAT_ID}&part=snippet,authorDetails&key={API_KEY}

Message Handling

With the API returning the chat info to us, we can start using it as a method of input! To break this code block down line-by-line, we’ll start with the etag.

etag — To make sure we don’t process messages more than once, I add the etag property that gets sent with every snippet to a list, the etag being a unique identifier for that message.

!tree — As we only want to handle a !tree command, we’re excluding all other messages. Should we want to start accepting multiple commands, we can scrap this line and add our own handler in later.

authorChannelID — This is a unique identifier for a user’s channel, this will allow us to ignore adding a user to the queue if they are already in it, avoiding congestion.

PlayerPool — I created an object pool for a bunch of players, the Busy() method returns either true/false, depending on whether a user with the same channel ID is already being rendered.

If all of these checks go through OK, then we add both the user’s display name and channel ID to a queue, then cache the message to avoid duplication later.

for (int i = 0; i < messages.Count; i++) {

if (!SavedIDs.Contains(messages[i]["etag"])) {

if (messages[i]["snippet"]["displayMessage"].Value == "!tree") {

if (!UserQueueID.Contains(messages[i]["snippet"]["authorChannelId"])) {

if (!PlayerPool.Busy(messages[i]["snippet"]["authorChannelId"].Value)) {

UserQueue.Add(messages[i]["authorDetails"]["displayName"]);

UserQueueID.Add(messages[i]["snippet"]["authorChannelId"]);

SavedIDs.Add(messages[i]["etag"]);

}

}

}

}

}

From here, you’ll have a list of qualifying usernames and channel IDs. Now the fun part begins, go do something with that data!

Bonus: Custom Characters

I thought it’d be fun to give every user their own unique avatar — sidestepping the issue of 2-minute latency UX, I used their username as a means of generating the character.

Prepping the character

I used a wonderful asset called Tiny RPG — Forest that contained an animated character sprite. As it was already coloured and split into different sprites, I generated my own sprite sheet, then split them up into key areas that I could recolour. I set the colours for each layer to white / grey for the standard / shaded areas of the image, as retaining the original colours would throw off my colouring later on.

Spritesheets separated by colour areas

Splitting these into sprites manually would’ve been an incredibly tedious task, thankfully, Pausebreak Studios released Easy Sprite Sheet Copy tool that copies over a sprite atlas data between sprite sheets.

With all of these sprites chopped up, there’s no need to manually position them as they’ll already be relative to the base layer. Dragging them into the animator gives us this spooky ghost-looking character.

Spooky ghost character

Custom Colouring

To avoid completely random characters, I created a set of colours for each area (note the base layer having some funky looking colours, this is because I didn’t greyscale the sprites).

Colour sets for each area of the sprite

To colour the player, I set the random seed to be based on the sum of all ASCII characters in their username, we can then call Random.InitState(total) to set our random seed, reproducing the same sets of colours every time that username is passed through.

As to why I initialise the total as 3… I wanted to make sure my own name produced a cool player.

total = 3;

foreach (char c in name) {

total += c;

}

Random.InitState(total);

Base.color = cBase[Random.Range(0, cBase.Length)];

Gear.color = cGear[Random.Range(0, cGear.Length)];

Hair.color = cHair[Random.Range(0, cHair.Length)];

Hat.color = cHat[Random.Range(0, cHat.Length)];

Thanks! + Twitter Self-Promo

Thanks for reading my exploration of the Youtube Live Chat API!

If you want to check out my future experiments/ramblings, you can find me on Twitter: https://twitter.com/LiamSorta

Want to give the stream a try for yourself? Head over to https://www.youtube.com/watch?v=Q_3v4vz7dVI and type ‘!tree’ to see what your avatar looks like!