Menu
By:
Filters
What's new

New XSplit/OBS Stream Scoreboard for Mortal Kombat X

d3v

d3v

SRK
With Mortal Kombat X coming out in a months time, I'm sure many folks are planning to start their own tournaments/streams for the game.

However, as I'm sure some of you may have noticed, MKX's HUD doesn't exactly fit with the usual scoreboard overlays used in most tournaments - I know I had the same issue when designing the overlay for this season's fighting game tournament at Imperium (where we're running MKX starting next month).

So, after redesigning our own overlay, I decided to "share the wealth" and create a general MKX overlay that people can use.

So without further ado.


This HTML5 based scoreboard/overlay was designed to fit within MKX's minimalist aesthetic for its GUI. As I previously mentioned, it's based on the scoreboard/overlay system we use in our own tournaments here, but with a few features (on stream brackets, sponsor logo/ad control) cut out.

The stuff that is in are:
  • Game status
    • Choose between labels such as Casuals, Exhibitions, Winner Bracket, Loser Bracket, Top 8, Grand Finals, and more.
  • National flags
    • Similar to what was used in Capcom Cup 2014 and SEAM2014.
    • Flags, along with player names are saved to a separate .csv file so they're easy to call up.
  • Custom player labels
    • Add custom labels for the players.
    • Indicate team names for team tournaments exhibitions
    • Indicate bracket position for grand finals (winners or losers bracket)
    • Labels saved to a separate .csv file so they're easy to call up.
  • Win animations
    • Allow a small "victory" sign to appear whenever a player wins a round. This was first developed for a Yubiken PPV tournament that never pushed through that I just adapted for all my scoreboards.
  • Lower 3rd label for commentators
    • Indicate commentator name and twitter handle
    • Names and twitter handles are saved to a separate .csv file so that they're easy to call up.
The scoreboard is designed to work XSplit and OBS via StreamControl 0.4 which is the software most majors use.



Additionally, the design for the scoreboard also works with other games as well.

Those interested can get the scoreboard, alongside StreamControl 0.4 HERE.

PSD files are included so people can use them to create their own overlays based on this.

Set up is simple, just go to Configuration in StreamControl and select the /MKX folder for the XML/JSON path and then select the layout.xml file from that folder for the Layout File.

For XSplit, just drag and drop the .html files onto the scene. For OBS, you will need the CLR Browser plug in to load the .html files.
 
Last edited by a moderator:
d3v

d3v

SRK
For those interested in how the "full tournament system" that we use in our tournaments look like, here are a few shots.

StreamControl


On stream

*mockup using SFV screenshot and live data


Footage from our February tournaments

Anyone interested in getting something like this done can send me a PM.
 
Last edited:
EGP Wonder_Chef

EGP Wonder_Chef

Official Quan Chi Nerf Demander™
Wow nobody posted in this?

I stole your Batman overlay for Injustice, used it all the time. This one looks great. The custom labels are super great, I'm going to use it a lot for people's Twitter handles.

My only issue is that for MKX the "Victory" is going to go over text that's already on the UI. That's minor though.

Great work as usual!


@STORMS this should be front paged.
 
Pig Of The Hut

Pig Of The Hut

Day 0 Phenomenal Dr. Fate and Darkseid player
d3v said:
With Mortal Kombat X coming out in a months time, I'm sure many folks are planning to start their own tournaments/streams for the game.

However, as I'm sure some of you may have noticed, MKX's HUD doesn't exactly fit with the usual scoreboard overlays used in most tournaments - I know I had the same issue when designing the overlay for this season's fighting game tournament at Imperium (where we're running MKX starting next month).

So, after redesigning our own overlay, I decided to "share the wealth" and create a general MKX overlay that people can use.

So without further ado.


This HTML5 based scoreboard/overlay was designed to fit within MKX's minimalist aesthetic for its GUI. As I previously mentioned, it's based on the scoreboard/overlay system we use in our own tournaments here, but with a few features (on stream brackets, sponsor logo/ad control) cut out.

The stuff that is in are:
  • Game status
    • Choose between labels such as Casuals, Exhibitions, Winner Bracket, Loser Bracket, Top 8, Grand Finals, and more.
  • National flags
    • Similar to what was used in Capcom Cup 2014 and SEAM2014.
    • Flags, along with player names are saved to a separate .csv file so they're easy to call up.
  • Custom player labels
    • Add custom labels for the players.
    • Indicate team names for team tournaments exhibitions
    • Indicate bracket position for grand finals (winners or losers bracket)
    • Labels saved to a separate .csv file so they're easy to call up.
  • Win animations
    • Allow a small "victory" sign to appear whenever a player wins a round. This was first developed for a Yubiken PPV tournament that never pushed through that I just adapted for all my scoreboards.
  • Lower 3rd label for commentators
    • Indicate commentator name and twitter handle
    • Names and twitter handles are saved to a separate .csv file so that they're easy to call up.
The scoreboard is designed to work XSplit and OBS via StreamControl 0.4 which is the software most majors use.



Additionally, the design for the scoreboard also works with other games as well.

Those interested can get the scoreboard, alongside StreamControl 0.4 HERE.

PSD files are included so people can use them to create their own overlays based on this.

Set up is simple, just go to Configuration in StreamControl and select the /MKX folder for the XML/JSON path and then select the layout.xml file from that folder for the Layout File.

For XSplit, just drag and drop the .html files onto the scene. For OBS, you will need the CLR Browser plug in to load the .html files.
Click to expand...
Seriously great stuff

Great job man! Are you very experienced w photoshop? Have u ever created an animated psd file like a sports ticker?
 
Reactions: d3v
d3v

d3v

SRK
EGP Wonder_Chef said:
My only issue is that for MKX the "Victory" is going to go over text that's already on the UI. That's minor though.
Click to expand...
That's the least "offensive" place I could put them, without it interfering with other elements in MKX's and other game's HUD.
Pig Of The Hut said:
Seriously great stuff

Great job man! Are you very experienced w photoshop? Have u ever created an animated psd file like a sports ticker?
Click to expand...
I can do animated GIFs in Photoshop. But they're a pain to do since you need to edit frame by frame.
 
Pig Of The Hut

Pig Of The Hut

Day 0 Phenomenal Dr. Fate and Darkseid player
d3v said:
That's the least "offensive" place I could put them, without it interfering with other elements in MKX's and other game's HUD.

I can do animated GIFs in Photoshop. But they're a pain to do since you need to edit frame by frame.
Click to expand...
I was playing around w creating tickers w after effects for a show I'm doing soon and it seems to be working well but someone told me that the virtual set program I'm using reads psd files and automatically scripts them to tickers . I'm gonna get him to show me how soon because I wanna create an "upcoming tournaments" ticker
 
STORMS

STORMS

Co-founder
Administrator
EGP Wonder_Chef said:
Wow nobody posted in this?

I stole your Batman overlay for Injustice, used it all the time. This one looks great. The custom labels are super great, I'm going to use it a lot for people's Twitter handles.

My only issue is that for MKX the "Victory" is going to go over text that's already on the UI. That's minor though.

Great work as usual!


@STORMS this should be front paged.
Click to expand...
Yep, I plan to. In the works fyi @d3v (thank you :) )
 
CrimsonShadow

CrimsonShadow

Administrator and Community Engineer
Administrator
d3v said:
With Mortal Kombat X coming out in a months time, I'm sure many folks are planning to start their own tournaments/streams for the game.

However, as I'm sure some of you may have noticed, MKX's HUD doesn't exactly fit with the usual scoreboard overlays used in most tournaments - I know I had the same issue when designing the overlay for this season's fighting game tournament at Imperium (where we're running MKX starting next month).

So, after redesigning our own overlay, I decided to "share the wealth" and create a general MKX overlay that people can use.

So without further ado.


This HTML5 based scoreboard/overlay was designed to fit within MKX's minimalist aesthetic for its GUI. As I previously mentioned, it's based on the scoreboard/overlay system we use in our own tournaments here, but with a few features (on stream brackets, sponsor logo/ad control) cut out.

The stuff that is in are:
  • Game status
    • Choose between labels such as Casuals, Exhibitions, Winner Bracket, Loser Bracket, Top 8, Grand Finals, and more.
  • National flags
    • Similar to what was used in Capcom Cup 2014 and SEAM2014.
    • Flags, along with player names are saved to a separate .csv file so they're easy to call up.
  • Custom player labels
    • Add custom labels for the players.
    • Indicate team names for team tournaments exhibitions
    • Indicate bracket position for grand finals (winners or losers bracket)
    • Labels saved to a separate .csv file so they're easy to call up.
  • Win animations
    • Allow a small "victory" sign to appear whenever a player wins a round. This was first developed for a Yubiken PPV tournament that never pushed through that I just adapted for all my scoreboards.
  • Lower 3rd label for commentators
    • Indicate commentator name and twitter handle
    • Names and twitter handles are saved to a separate .csv file so that they're easy to call up.
The scoreboard is designed to work XSplit and OBS via StreamControl 0.4 which is the software most majors use.



Additionally, the design for the scoreboard also works with other games as well.

Those interested can get the scoreboard, alongside StreamControl 0.4 HERE.

PSD files are included so people can use them to create their own overlays based on this.

Set up is simple, just go to Configuration in StreamControl and select the /MKX folder for the XML/JSON path and then select the layout.xml file from that folder for the Layout File.

For XSplit, just drag and drop the .html files onto the scene. For OBS, you will need the CLR Browser plug in to load the .html files.
Click to expand...
We need to talk. Do you have Skype?
 
Rice

Rice

SIRO FOR MK1
Looks awesome. I like how it fits the style of the UI.

I love the MKX UI so much. It really emphasizes the gameplay.
 
Kevin 7

Kevin 7

The bad boy scout
A huge thank you for this. Whenever my stream gets up and running I'll make sure to shout out for you and refer people your way for future work. Keep up the good work.
 
Bilbo11

Bilbo11

Mortal
Is any one else having touble getting these to work? I can get the player 1 names only seems like its half cut out.

im using OBS

 
Last edited:
d3v

d3v

SRK
Bilbo11 said:
Is any one else having touble getting these to work? I can get the player 1 names only seems like its half cut out.

im using OBS

Click to expand...
Click on Edit Scene. Then you should be able to drag the box for the scoreboard to widen it.

That said. The scoreboad itself is sized for 720p broadcasts. so if you're not at that resolution, then it might not work properly.
 
NurzBenny

NurzBenny

Old Member
You're a god for this d3v, will be messing around with this this week in anticipation for MKX. Had to dig this thread out, wonderful stuff
 
d3v

d3v

SRK
RiBBz22 said:
@d3v, what is the easiest way to just get rid of the countries from the layout?
Click to expand...
You'll have to edit that element out in the code itself.
RM AtK! said:
Hey for some reason in xsplit i have to refresh it sometimes to get it to update again
Click to expand...
Yep, I'm aware of this glitch and currently have no idea what's going on. Seems to be an issue with XSplit though since I've never been able to replicate it.

From what I can deduce, it stops refreshing the XML file after a certain number of updates. What I do to address this is to disable "optimize scene transition" and "keep in memory" to force it to refresh the html file every time.
 
RiBBz22

RiBBz22

TYM's Confirmed Prophet/Time-Traveler
d3v said:
You'll have to edit that element out in the code itself.

Yep, I'm aware of this glitch and currently have no idea what's going on. Seems to be an issue with XSplit though since I've never been able to replicate it.

From what I can deduce, it stops refreshing the XML file after a certain number of updates. What I do to address this is to disable "optimize scene transition" and "keep in memory" to force it to refresh the html file every time.
Click to expand...
I am not a HTML mastaaaaa, so I will just put on my shades and deal with it.
 
You must log in or register to reply here.