Customize the Overlay

Customize your Overlay

Where? What? When? Why? Meow

You can customize this overlay to your hearts delight or you can do some small changes to make it your own. For the most common changes you'll be changing things instead of the setupfile.json which is located in the \PerGame\htmlpages\

How to edit JSON

It's really important to understand the structure of JSON, because if you invalidate the json file. None of the screens will work since the html pages won't be able to parse the json file. Honestly, you probably just can intuitively figure out how to edit the file. If you don't know what JSON is, check this out.

Valdidate the JSON

IF YOUR PAGES AREN'T LOADING THE TEXT, IT'S BECAUSE YOUR JSON IS INVALID.

It's quite simple to validate the json, just grab the text from the file and put it into a json validator website (e.g. http://jsonlint.com/)

MatchDisplay

Location : \PerGame\htmlpages\MatchDisplay.html

This page is made up of two elements. One which is the image of the league that is playing and the other is the game title for that cast. 

To change the logo that is displayed, you'll have to go into the html page and change the source location in the img tag. Lets say in the static folder we added a new ESEA logo that we wanted to use. It file name being ESEA.png. We'd then go to the html file and change:

<img src="..\..\Static\ugclogo.png" />

to

<img src="..\..\Static\ESEA.png" />

Next we want to change the game title that displays underneath it. We'll go into the setupfile.json and edit the game title section to say ESEA Open Grand Finals.

"gametitle": "Season 20 Platinum Grand Finals",

to

"gametitle": "ESEA Open Grand Finals",

 

Production

Location : \PerGame\htmlpages\Production.html

This page is the page which will display the current production staff of that stream. What's nifty about this page is that it is dynamic generated based off of the setupfile.json. So you could have eight people listed, or just one. So lets say that for this cast we have two people working it. First is named t4nny and the second is bagg. We'll need pictures of these guys to go underneath of their names, so we'll grab their images and put them into the \PerGame\ folder. We dropped two files in, one tanny.jpg and the other bagg.png. Lets edit this json.

"production":[
{
"name":"sigafoo",
"role":"",
"pic":"caster1.jpg",
"twitter":""
},
{
"name":"eXtine",
"role":"",
"pic":"caster2.jpg",
"twitter":""
},
{
"name":"VoxDei",
"role":"",
"pic":"camera.jpg",
"twitter":""
}
],

is what the original json looked like before we edited it. We'll change it to

"production":[
{
"name":"t4nny",
"role":"",
"pic":"tanny.jpg",
"twitter":""
},
{
"name":"bagg",
"role":"",
"pic":"bagg.png",
"twitter":""
}
],

Rosters

Location : \PerGame\htmlpages\Rosters.html

This is the page which displays the rosters of the two teams. This is setup only for TF2, but wouldn't be the hard to switch out the classes for another game. What's cool about this page is that you can set it up for highlander, sixes, ultiduo, whatever. The way this works is by adjusting the roster section underneath the teams section.

"teams":[
{
"short":"KND",
"long":"The Kids",
"roster":[
{ "class":"scout", "name":"slemnish" },
{ "class":"soldier", "name":"Etney" },
{ "class":"pyro", "name":"Katsy" },
{ "class":"demo", "name":"Giraffe" },
{ "class":"heavy", "name":"Blues" },
{ "class":"engineer", "name":"Ender" },
{ "class":"medic", "name":"Nursey" } ,
{ "class":"sniper", "name":"yosh"},
{ "class":"spy", "name":"deaft"}
]
},
{
"short":"DK",
"long":"Dunning-Kruger Effect v4",
"roster":[
{ "class":"scout", "name":"Vand" },
{ "class":"soldier", "name":"Aegis" },
{ "class":"pyro", "name":"Billysaurus"},
{ "class":"demo", "name":"Corsa"},
{ "class":"heavy", "name":"Karl"},
{ "class":"engineer", "name":"spamfest"},
{ "class":"medic", "name":"Skeez"},
{ "class":"sniper", "name":"bo4r"},
{ "class":"spy", "name":"feint" }
]
}
],

The way that this works is that it uses the top teams class and matches it with the person in the same spot below. This means that if you had the soldier as the first class on the second team and the scout as the first class on the first team. It would not work correctly. Teams MUST have the same class order. Let me say this again, in order for things to display correctly. The class order for both teams must be the same.

Lets do an example sixes roster

"teams":[
{
"short":"4G",
"long":"Froyotech",
"roster":[
{ "class":"scout", "name":"b4nny" },
{ "class":"scout", "name":"Freestate" },
{ "class":"soldier", "name":"-blaze" },
{ "class":"soldier", "name":"habib" },
{ "class":"demo", "name":"paddie" },
{ "class":"medic", "name":"shade" }
]
},
{
"short":"EVL",
"long":"EVL GAMING",
"roster":[
{ "class":"scout", "name":"saam" },
{ "class":"scout", "name":"happycool" },
{ "class":"soldier", "name":"marmadukegrylls" },
{ "class":"soldier", "name":"tipbwai" },
{ "class":"demo", "name":"Rikachu" },
{ "class":"medic", "name":"cookiejake" }
]
}
],

Lastly lets do an example ultiduo

"teams":[
{
"short":"ULT",
"long":"ULTIMATE POWER",
"roster":[
{ "class":"soldier", "name":"brick" },
{ "class":"medic", "name":"Nursey" }
]
},
{
"short":"DRP",
"long":"404 Uber cannot be found",
"roster":[
{ "class":"soldier", "name":"Duwatna" },
{ "class":"medic", "name":"scubasteve" }
]
}
],

Match Display With Teams

Location : \PerGame\htmlpages\MatchDisplay_WithTeams.html

This page is pretty simple. It'll use the short and long names set inside of the Teams section of the setupjson file. You must have two teams, no more, no less. The top team inside of the Json will be displayed on the left "Team1" and the second team will displayed on the right "Team2". Inside of the /PerGame/ folder is the two images that you must override for that game.

Team1.jpg
Team2.jpg

Simply overwrite the pictures with the teams currently playing that night. Inside of the page we use an iframe of the MatchDisplay.html page. So we will reuse that page inside of this page. This does create some wonkiness inside of OBS Class and often does not be force refreshed to get it to display correctly.

To see the example of valid team json look above at the Rosters section.

Scoreboard

Location : \PerGame\htmlpages\Scoreboard.html

The scoreboard element is pretty simple. Remember that changing the json file, does not automatically refresh inside of OBS, but you must manually refresh it by either turning on/off the source in the scene or by switching scenes. This scoreboard can do one to many maps.

"maps":[
{
"name":"ASHVILLE",
"score":"0-0"
},
{
"name":"STEEL",
"score":"-"
},
{
"name":"PRODUCT",
"score":"-"
}
]

That is an example of doing three maps. We played around a little bit with the presentation and found that doing the map names in all caps seem to help the look. Also by not having a 0-0 score in the maps that were not being played gave it overall a better look and communicated the story of what was actually happening in that moment better to the viewer.

Lets do some examples with a game which was only doing one map.

"maps":[
{
"name":"BADWATER",
"score":"0-0"
}
]

Lets say we were casting a badwater game. Now this scoreboard everything to do with the teams listed above. The score on the left side is associated with the team1 and the score on the right is associated with team2. The names pulled to be displayed next to the scores are from the teams section in the "short" value.

If we wanted to give a point to team1, simply we just change the text.

"maps":[
{
"name":"BADWATER",
"score":"1-0"
}
]

We would save the file and then inside of OBS we would refresh the control and the score would be updated.

It's not working!!!!

More than likely if it's not working it's one of two things.

  1. You have invalid json. Copy the entire setupfile.json to http://jsonlint.com/ and verify that the data is set up correctly.
  2. You just need to refresh it in OBS. Sometimes the page will just not load correctly and took multiple tries. If you open up the pages inside firefox/chrome/etc.. they should display correctly every time, but sometimes OBS needs to refresh them many times before they will display correctly.