Case Studies

Case Study: itmeJP Overwatch HTML JavaScript Twitch Overlays

By 26 May, 2016 No Comments

With the launch of Overwatch itmeJP set out to play all the 21 heroes for 21 hours and every hour switch hero based on votes. For this we also decided to create some new overlays but these overlays couldn’t be simple images or layered images but instead was programmed in HTML/CSS and JavaScript to enable itmeJP being able to interact with them and being able to set everything up for each new hero. The stream ended up being the biggest Overwatch stream for several hours and topped out at around 22-23.000 viewers.

Hero selection overlay

The very first thing I did was to figure out the best way to structure up the grid system for everything and I landed on using Bootstrap since it already has a built in grid and I’m already familiar with it. Having a pre-made grid allowed me to work faster on the design instead of the code. With that in place I picked out the the yellow and light blue color that is associated with Overwatch. Looked up a typeface from Google Fonts that has the same feel (not look) as the Overwatch font.

All of the headlines and names are controlled by H1, H2 and H3 tags with an added Span tag to get the blue highlight in there. With all of that I started to create the first hero portrait by editing that specific grid or column and you can see what that code looks like below.


Inside of each of these grids I create the images composed of the images as the background image. I wanted itmeJP to be able to click on one of the hero portraits and it would end up being grayed out with a fade. This is achived by creating two different CSS statements. One that is what the portrait would look before clicked and another one for when it’s been clicked. I quickly ran into a problem (due to my own limited knowledge in JavaScript and it was that I couldn’t make it reverse back to it’s first state). So I asked my developer (@SunspotsEU for a some guidance on the matter and he showed a quick fix for the problem and below you can see the early stage of the code:

code-21One of the issues we ran into is that JP is still using the original OBS due to audio issues on his end. If he ran, or you, OBS Studio you’re able to actually interact with something that’s pulled in through the browser plugin. This of course created a problem that we had to fix by adding a background image and do a window capture instead.

We didn’t want the background to be something static but also didn’t want to speed a huge amount of time to create something in CSS or After Effects. Instead what I simply did was to create a video tag and making that video tag into a background image. This is possible with CSS alone however I had to edit out the black bars of the video to make it stretch across the screen. With that done we now had a moving video in the background BUT you probably can tell that something like that would be distracting so I did another CSS trick by simply adding in a CSS filter to blur it.


Hero countdown overlay

With each individual countdown we were able to pull in through the CLR browser instead of doing window capture. For this I skipped getting a grid, since there’s only two space that needed to be filled.

The code is pretty straight forward since we ended up using 21 different HTML documents instead of a rotating thing. The reason for that is so that JP was able to better control it and we didn’t know the order due to the vote. I was also away for the weekend and only got home on Monday evening so the time frame would have been too short. One thing that is unique, in someway, is that when the countdown hits 0:00:00 it turns red. It’s just something that looks more visually instead of having it only go to 0.


As you can see when we have it as CSS I can change the resolution to whatever I want. I’m using a rather high resolution image so even when it’s made bigger it will still maintain high quality. Not that it’s something that we needed to do in this case but it’s nice to have the ability in case we would have wanted to animate it so at 0 it re-sizes and cover a larger portion of the screen.

The JavaScript in this case is a pre-made script that you can find here. This is really the advantage when it comes to using CSS and JavaScript, we can easily pick together codes from different places, research what’s possible and ask questions when needed. You learn as you go as well. Of course there’s also a lot of design things that we need to take into consideration but as long as it works for these one-offs there’s no need to invest a huge amount of time.

I’m actually wrote this on Tuesday so that meant that I could focus on my current clients so I can start working with a few new contracts that looms at the horizon. There might be big things coming and I want to be ready when it does.

Much love




Do you need a Twitch website done the right way? Or do you need a Twitch branding strategy? If you're ready then take a look at the Twitch services and see if they fit into your future.