Warning: Creating default object from empty value in /customers/a/5/4/livespace.se/httpd.www/blogg/wp-content/themes/salient/nectar/redux-framework/ReduxCore/inc/class.redux_filesystem.php on line 29 Case Study: Dropped Frames GOTY 2017 - LiveSpace Twitch Guide
Case Studies

Case Study: Dropped Frames GOTY 2017

By 21 December, 2017 No Comments
Dropped Frames GOTY 2017

Dropped Frames Game(s) of The Year episode is a talk show where itmeJP, CohhCarnage and Ezekiel_III goes over their top 10 games from the past year. This year they also had specific categories with a top 1 game. On top of this there were also a community voted part where anyone could submit their favorite games of the year both as a top 3 and a game in each category.

The Concept

There’s a big difference between this year’s Dropped Frames GOTY and past year’s. Not only in that we  have a completely new visual brand to better align with the outset of the concept. We also didn’t not have the cast on location nor did we have the same team as last year.

From the start I knew that for these type of reveals something more than images where needed. So I took the concept of a local API and used that as a base for the top lists. From the start it was said that each host would actually have 3 games for each category. So having a way to trigger each of their entries was the ideal solution.

The design language that I had designed for Dropped Frames is easily adaptable. It uses two main colors combined with black and white. This makes it easy to add in new elements. When you have a solid brand concept behind a brand you have a lot more flexibility to work out new things fast.

What that later turned it was to have lists using a local API. Then when the categories changed to only one game I had to do some design changes. The change I was to add in box art and game description.

One thing that of course was sort an issue was that it wasn’t possible to set global hotkeys. So how would itmeJP be able to actually use keyboard keys to reveal items and lists? Luckily itmeJP uses xsplit for his talk shows. If it were OBS he would have to use “interact” but in OBS that would also mean that the mouse arrow would show up on screen. However since it was xsplit it is actually possible to just click on the browser source scene and you can interact with it, and not mouse arrow shows up.

The Code

To create the page and the style I simply used HTML and CSS. Once I had it all in order I started to code the JavaScript that would run the entire thing. I decided to use jQuery as the go to JavaScript library.

For the categories I couple use the following:

That meant that I put the entire game inside of an ID div called itemsJP. I used the same setup for CohhCarnage and Ezekiel_III. This if of course not the entire code. Since there also has to be a way for it to know what key you press. To get the right key I used unicode to get the right key. Created a IF statement that said if you press NumPad 1 toggle “itemsJP” on and use a fade in. Since this is a toggle that means that if you press NumPad 1 again it toggles it off.

That works great for one there’s one item. However in the instance of the top 10, community top 5 and community top 3 there’s more than one big entry. In that case toggle won’t work since it for one item only.

So instead I used the local API technique. It dosen’t work in Chrome but in Firefox Developer—and most importantly it works in both OBS and xsplit. With this API it is possible to create a list that you can pull information from.

"Graphics": [
"Leave EMPTY",
"3. Persona 5",
"2. Horizon Zero Dawn",
"1. Cuphead"

It simply look like that. I can then call the data in “Graphics” and what’s under is then an array. That array goes from 0 to 3. The reason why I have “Leave EMPTY” at the top is due to how I set my code up.

I once again used an If statement that went: If amount is less than 10—this is important since without that it would have added a “undefined” entry and kept doing so. I then told it to increase our value by 1 each time NumPad 1 is pressed. When that value increases I told it to add a string of code to the parent of a specific element on the page. That way each time NumPad 1 is pressed a new entry shows up until we get to 10.

if(e.which == 49) {
if ( x < 10) {

Then to make sure that it possible to reset it—just in case something went wrong. I give it the argument that if NumPad 7 is pressed then set our value to 0 and remove all instances of the things we added.

I did the same for CohhCarnage and Ezekial_III—but instead of having NumPad 1 I used 2 and 3 for enteries and 8 and 9 to clear. The same was then done for the community Top 5 and Top 3 in the categories—however  I had to use a lot of keys to make that work.

Final Result

Luckily all of the VOD’s for Dropped Frames is already up so you can check out the overlay in action right away.

Here you can see itmeJP using it to reveal the top game in a specific category:

Here you can see it used on the top 10 list:

As always these type of projects are super fun to work on. I enjoy the rush of seeing it all happen on the screen live as well. Then when it’s all done you get a very special feeling in your body. Thank you for reading!

Are you a designer with Twitch branding experience? Then I’m looking for people to add to the LiveSpace team.

If you’re interested in your own branding for your talk show or your own Twitch channel—just head over to my Twitch branding services and get in touch.



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. twitch.livespace.se