Important Australian StreamControl Collab Thread

[Kaiza]

Over the last 3 or 4 months Dom ( NeoTurtle ) and I have been using a dynamic stream overlay program called StreamControl to animate text and images in and out, based on this tutorial by Showdown's founder, Floob (AKA Spenser): http://spensercheung.com/2014/10/23/super-smash-bros-melee-dynamic-overlays/
(Don't set the Browser Source resolution to 1920x1080 unless you're streaming at 1080p.)

I then took it a step further in making it work for my stream assets instead of just using the preset provided, and have built upon the provided preset to include commentator camera overlay animations, smash 4 overlay animations and multi image animations.

I'm encouraging people who are looking to give their stream some extra flavour to read the above guide and set it up for yourself, and then make it into something unique to your stream like I have with this thread's information. The purpose of this thread is to provide knowledge and help each other build up Australia's respective streams by keeping an archive of what we're currently using.

In order for you to modify the files for your own needs you will need to have a basic understanding of HTML, CSS, and a little Javascript (mostly because of the plugin this uses to animate, JSTween)

I will give a basic rundown on which files do what things in MY BUILD (link below) so you can modify the numbers for yourself:

Spoiler

...\1v1smash.xml:

• This holds the information for the layout, fields, and tabs of the actual StreamControl window. This is also the file you would have had to set your StreamControl to look for when loading a loadout in Floob's tutorial. The numbers and button references are pretty self explanatory such as x=, y=, width= etc.

...\browserfiles\1v1tournament.html:

• This holds the information for animating the text and images on to the in game scene for Melee/PM/Brawl. There's usually two references for each element, the first one refers to the text/image animating out of the scene when changing player names or scores, and the second one refers to it animating in to the scene (note that the "board" reference only animates in and never out). To modify positions of text, change the "stop" value in the second element reference (this is where the text will end up after animating in). Additionally, the 1st reference's start and stop values should ALWAYS BE SWAPPED WITH RESPECT TO THE 2ND REFERENCE. Make sure to change the other values appropriately so that they animate in correctly. (e.g. If I changed the 'stop' value by 50, then I would also change the 'start' value by the same amount.)

...\browserfiles\Player Cam.html & Commentator Cam.html

• This holds the information for animating the text and images on the fullscreen player cam & commentator cam scenes respectively. Same rules and terms apply for modification in all html docs as 1v1tournament.html.

...\browserfiles\Smash4Tournament.html

• This holds the information for animating the text and images on to the in game scene for Smash 4.

...\browserfiles\css\1v1Tournament.css

• This holds all the definitions for all of the fonts, images and text references for all of the above html files. You can change default positions and sizes of any element in this file by modifying the top and left values. Pretty self explanatory to modify anything at this stage.

...\browserfiles\images\...

• This folder holds all of the image elements to be animated in. THE FOLLOWING FILES MUST BE PRESENT IN ORDER FOR THE OVERLAY IT IS PART OF TO WORK:
  • SmashOverlay.png - This is the Melee/PM/Brawl bottom player bars
  • SmashOverlayTop.png - This is the Melee/PM/Brawl top title bar
  • WebcamOverlay.png - This is the fullscreen commentator/player cam bottom overlay
  • Smash4OverlayTop.png - This is the Smash 4 top player bars
  • Smash4OverlayBottom.png - This is the Smash 4 bottom title bar
• To modify the image elements, simply replace the above files with your own appropriate 1280 x 720 images

For each scene you set in OBS/Xsplit, you point your browser source to the appropriate html file (e.g. for my fullscreen commentator cam scene i would point my browser source to Commentator Cam.html)

For OBS, I set my CLR Browser source resolution to 1300 x 740 because upon loading into the scene, these bad html scroll bars pop up for a second before disappearing, so by making the res bigger, the scroll bars happen off screen. Make sure to not set the CLR Browser source to fit to screen, instead just align the element in OBS to the top left and it will look as it should.

DISCLAIMER WHEN DOWNLOADING BUILDS:
What this ISN'T is for you to steal our files and use them for yourself. I want you to take what we provide, and expand on it with your own ideas.

Post in this thread with your build and I'll add it to the OP. If you have any questions don't hesitate to ask in this thread.

StreamControl builds:

Kaiza's build: (twitch.tv/kaizmo) (13/10/2015) -

3 Tabs: In game, & Commentator/Player Cam scene overlays.
Includes an in game Smash 4 scene (Smash4Tournament.html).
Added Player Cam Labels - 11/5/2015

- Player Cam Labels no longer active in 13/10/2015 build​

Changed all the file name references to be easier to type - 11/5/2015
IF FOLLOWING EXAMPLE ABOVE, USE THE PREVIOUS VERSION'S IMAGE FILENAMES AS THEY WILL BE DIFFERENT TO MY CURRENT BUILD
Currently is set up for the proper Melee aspect ratio of 3:2 - 13/10/2015​

Previous Builds:

11/5/2015
7/4/2015
​

Dom's build (twitch.tv/melbournemelee) (7/4/2015) - Example Image

3 Tabs: In game, & Commentator/Player Cam scene overlays.
Features ALL stock icons for Melee and PM (look in stocks.csv for each stock name).
Currently is set up for the proper Melee aspect ratio of 3:2​

 

[NeoTurtle]

If anyone's having problems that they can't sort out, feel free to message me here or wherever, and I'll see what I can do to help you! Unfortunately I don't actually have any experience of HTML and CSS outside of streamcontrol so my help might be somewhat limited lmao

 

[Kaiza]

Updated my build - 11/5/2015
New in this version:
Added Player Cam Labels and changed all the image file name references

 

[pseudomac]

If anyone's having problems that they can't sort out, feel free to message me here or wherever, and I'll see what I can do to help you! Unfortunately I don't actually have any experience of HTML and CSS outside of streamcontrol so my help might be somewhat limited lmao

Im trying to make my player tabs come up from the bottom and not the top. What should I edit?

 

[Kaiza]

Im trying to make my player tabs come up from the bottom and not the top. What should I edit?

don't they already come in from the bottom?

 

[pseudomac]

don't they already come in from the bottom?

im using spensers so no, but now i have a different problem lol. im having trouble positioning precisely and not eyeballing it. what method did you use?

 

[Kaiza]

im using spensers so no, but now i have a different problem lol. im having trouble positioning precisely and not eyeballing it. what method did you use?

edit 1v1tournament.html and make sure roughly on line 43 (whichever line has a bit of code referring to ('#board').tween"
copy and paste this in:

                $('#board').tween({
                   top:{
                      start: 100,
                      stop: 0,
                      units: 'px',
                      time: 0,
                      duration: 1.3,
                      effect:'easeOut'
                   },
                });

so it would like like this

What this does makes it so that everytime the browser source is loaded, it'll animate whatever image 'board' refers to in your .css file, from the bottom up to it's default position (0)

 

[pseudomac]

edit 1v1tournament.html and make sure roughly on line 43 (whichever line has a bit of code referring to ('#board').tween"
copy and paste this in:

                $('#board').tween({
                   top:{
                      start: 100,
                      stop: 0,
                      units: 'px',
                      time: 0,
                      duration: 1.3,
                      effect:'easeOut'
                   },
                });

so it would like like this

What this does makes it so that everytime the browser source is loaded, it'll animate whatever image 'board' refers to in your .css file, from the bottom up to it's default position (0)

New issue, no matter how i edit some positions like "top" or "left" it doesnt move. do you know what might be causing this?

 

[Kaiza]

New issue, no matter how i edit some positions like "top" or "left" it doesnt move. do you know what might be causing this?

if you could give me an example that would help.
Which ones specifically? I know if there's no reference for a top or left position then it'll just go off of whatever you put in your css file
you also have to save the file and reload the CLR broswer source (untick and retick) in OBS any time you make a change

 

[pseudomac]

if you could give me an example that would help.
Which ones specifically? I know if there's no reference for a top or left position then it'll just go off of whatever you put in your css file
you also have to save the file and reload the CLR broswer source (untick and retick) in OBS any time you make a change

incoming ****ty youtube video lmao, https://www.youtube.com/watch?v=RVN35c7mQ6Y

 

[Kaiza]

incoming ****ty youtube video lmao, https://www.youtube.com/watch?v=RVN35c7mQ6Y

dammit dude did you even read my tutorial? Also I would suggest downloading notepad++ for this as it makes editing these files much easier. you were modifying the .CSS file which gets overruled if there's other info about the where the text should be in the .HTML files

The position of it doesn't change because there's something else telling the text where to be, look in 1v1tournament.HTML.

...\browserfiles\1v1tournament.html:

• This holds the information for animating the text and images on to the in game scene for Melee/PM/Brawl. There's usually two references for each element, the first one refers to the text/image animating out of the scene when changing player names or scores, and the second one refers to it animating in to the scene (note that the "board" reference only animates in and never out). To modify positions of text, change the "stop" value in the second element reference (this is where the text will end up after animating in). Additionally, the 1st reference's start and stop values should ALWAYS BE SWAPPED WITH RESPECT TO THE 2ND REFERENCE. Make sure to change the other values appropriately so that they animate in correctly. (e.g. If I changed the 'stop' value by 50, then I would also change the 'start' value by the same amount.)

change the "start" and "stop" references in 1v1tournament.HTML for whatever you want to change (make a "left" command if you want to have it animate in horizontally, add a "top" command if you want it to animate in vertically)

e.g. My text currently animates in horizontally, if I wanted to change this to vertical, I would change the text that says 'left' into 'top' and adjust the start and stop values until they line up where i want them to be

 

[pseudomac]

dammit dude did you even read my tutorial? Also I would suggest downloading notepad++ for this as it makes editing these files much easier. you were modifying the .CSS file which gets overruled if there's other info about the where the text should be in the .HTML files

The position of it doesn't change because there's something else telling the text where to be, look in 1v1tournament.HTML.
change the "start" and "stop" references in 1v1tournament.HTML for whatever you want to change (make a "left" command if you want to have it animate in horizontally, add a "top" command if you want it to animate in vertically)

e.g. My text currently animates in horizontally, if I wanted to change this to vertical, I would change the text that says 'left' into 'top' and adjust the start and stop values until they line up where i want them to be

Lol my mistake. Sorry about that. I really appreciate the help regardless.

 

[Magical Samurai]

Happened to stumble upon this. Nice looking layout files, seems to be fairly well organized and easy to adapt.
If you're still encountering that scroll bar issue you might want to just try slapping this in there somewhere on whatever your main container is.

html { overflow: hidden; }

 

[Kaiza]

Updated my build into OP - 13/10/2015
New in this version:
Drop shadow on text, set up for correct melee aspect ratio
- No longer has player cam labels, will be re implementing soon

 

[Kaiza]

lmao remember when i kept this **** updated lol not anymore

 

[Kaiza]

ON A REAL NOTE i'll probably be opening up some stuff from recent events such as SXC2K16 for example use here

 

[pseudomac]

lmao remember when i kept this **** updated lol not anymore

rippo

 

[Magical Samurai]

Riperino.
Damn this thread is old.
I should upload some stream assets too, I'm sure someone would get use out of a good stream overlay boilerplate.

-haganbmj

 

[Toony]

Riperino.
Damn this thread is old.
I should upload some stream assets too, I'm sure someone would get use out of a good stream overlay boilerplate.

-haganbmj

Please do!