readek / roa-stream-tool Goto Github PK

A Rivals of Aether overlay and control panel for tournament streams

License: MIT License

HTML 11.71% JavaScript 76.99% CSS 11.30%

roa-stream-tool's Introduction

RoA Stream Tool

So you want to do a Rivals of Aether stream, huh? Well, today is your lucky day, because I have done tons of work so you don’t have to! With this tool, you will be able to set up a RoA tournament stream in no time.

Now with a Discord Server!

Also available for Melee and Rushdown Revolt!

Features

Easy and fast setup using a browser source. Drag and drop!
Handy interface to quickly change everything you need, like player names, pronouns, characters, scores, round, casters...
- With customizable Player and Commentator Presets to setup your match in no time!
Every single character and skin the game has to offer is supported (more than 300 different skins!).
- You can also add in custom skin codes for any character!
- This includes recolorable HD renders!
- Workshop characters are also supported!
A "VS Screen" to be displayed when waiting for the next game.
A Bracket View to showcase your tournament's top 8 positions!
A Remote GUI that can be accessed by any device within the local network, including mobile devices!
Now with 2v2 support!
Made to be customized! Add workshop characters, custom overlays or even dive into the code if you're brave enough!

How to setup

These are instructions for OBS Studio:

Get the latest release.
Extract somewhere.
Drag and drop RoA Scoreboard.html into OBS, or add a new browser source in OBS pointing at the local file.
- If the source looks weird, manually set the source's properties to 1920 width and 1080 height, or set your OBS canvas resolution to 1080p, or make the source fit the screen (Ctrl+F).
In the source's properties, change Use custom frame rate -> 60 (if streaming at 60fps of course).
Manage it all with the RoA Stream Tool executable.

Repeat from the 3rd step to add the VS Screen.html and Bracket.html views, though I recommend you to do so on another scene.

It is very recommended that you turn off the in-game top HUD. The overlay was made with that HUD off in mind.

Interface shortcuts!

Press Enter to update*.
Press either F1 or F2 to increase P1's or P2's score.
Press ESC to clear player info*.

** Functionallity may change in some menus to ease workflow.*

For developing, there are some shorcuts to make things easier:

Press F5 to reload the GUI.
Press F12 to open the dev console. This will also unlock window resolution.

Advanced setup

Yes, those instructions above are enough, but we can do better. All of this is optional of course.

2 basic transitions are included in the Resources/OBS Transitions folder, intended to be used to change to the game scene and to the vs screen, if you don't have a transition yourself of course. To use them on OBS:

Add a new stinger transition.
Set the video file to Game In.webm if creating the game scene transition, and Swoosh.webm if creating a vs screen transition.
Transition point -> 350 ms.
I recommend you to set the Audio Fade Style to crossfade, just in case.
On the scene's right click menu, set it to Transition Override to the transition you just created.
Also, you may want to set a hotkey to transition to the game scene so you can press enter ingame to start the replay and press the transition key at the same time. The transition is timed to do so.

Also, you may find the "3 2 1" of the game's intro a bit distracting when combined with the scoreboard intro. These are the sprites to remove them (using the Modding Tool).

Remote GUI

The Stream Tool GUI can be controlled remotely by any device within the local network where the GUI is running, and yes, this includes mobile devices! Please take a look at the wiki for instructions.

Other stuff...

Do you want to customize something? Do you need some OBS tips and tricks for a RoA stream? Please, go to the wiki!

The project now has a Discord server! If you need support about this (or other) stream tools, you're free to join us!

Workshop creators! Do you want your character added to the Stream Tool? There's a guide to help you do that, don't worry!

Do you want to adapt this project to another game but can't figure out how to? Lucky for you, I'm open for commisions! Contact me on Mastodon or on the project's Discord Server!

Do you want to support this project? You can contribute, and get some extra rewards, on Ko-fi or Patreon! Every bit helps towards development of more features and stream tools!

Closing notes

This project is basically my learning grounds as a web developer. This is actually where I started learning javascript! As such, the code you're about to see may be unoptimized or badly written, so if you know how the web dev world works, please leave suggestions about how to improve the project as pull requests, or take a look at the issues page to see if you can help with those! Any help will be greatly appreciated.

Also, you may wonder, what happened to the old, lua scripted version of this controller? Well, turns out obs is just not ready for this kind of stuff. Current version of OBS doesn't have any kind of animator, and has to stutter to load every image you want to change, so it was really hard to get around that. Also, was much harder to update. With this javascript version, I wanted to make things better so I could update it with more ease. Anyways, the link of the old version will stay up if you ever want to know about lua obs scripting!

roa-stream-tool's People

Contributors

Stargazers

Watchers

Forkers

dhuacon spritestar0 morganlug voidboi9 kyebrowning ateozc cvaranese humpalum swolekat brie-r gullgum manfranmike bigbeno37 ilikepizza107 aaronchpmn

roa-stream-tool's Issues

HD images stutter when fading in for the first time.

Edited 27 Feb 2021

Whenever fading in an HD character for the first time, it will stutter on both the scoreboard and the VS screen. When using the Doubles overlays, this is way more noticeable. This is because, well, the HD images are full resolution, so big files. But it actually also happens with the normal images (depending on your hardware of course). Since on the VS screen we are also fading in the trail, it will also stutter when we move it for the first time.

It seems like an easy bug to fix, but I couldn't any solution to this yet. I'm 100% sure the image is fully loaded before showing it since the code is using .decode() on them, but turns out the stutter actually happens when the opacity changes from 0 to 1.

Also, this only happens the first time the image loads. When loading an image that's been already used before (without resetting the browser source of course), everything will be smooth 60fps even with the biggest files.

When testing on the current Chromium version (at this time 88), the stutter is way less visible, but still there. OBS uses a previous chromium version sadly. Wanna know the funny thing? This issue is non-existent on Firefox. 0 stutters at all.

If anyone who knows javascript knows how image loading actually works, help would be greatly appreciated.

Developer Documentation

Hello,

Sorry if this isn't the right place to post it and sorry for messaging you on all the places I can find you, but I've made a repo that is your app but for Sonic Riders ( https://github.com/swolekat/Sonic-Riders-Stream-Tool ). I have everything working locally but I can't seem to figure out how to package it up. I was hoping you had some documetation on the processes you used since when I try to run all of the yarn scripts, nothing produces the exe and resources structure to make it all work.

Sorry again for being annoying. The tournament that wants to use this is in two days and I'm scrambling to try to get it to work.

Thank you for this repo and hopefully your response.

Scoreboard white borders have some diagonal black pixels

If you look very very closely, you can see that the Scoreboard's diagonal while lines have some black-ish pixels on them, making it look really ugly if the background is clear enough.

This is actually not an issue with the image itself, but a new "issue" introduced in the latest version of OBS (v27) regarding alpha image handling. Now, the OBS guys have a very in-depth wiki page about it, but I was not able to figure out the actual problem here, as following the (Photoshop) instructions did not solve the issue.

This is something that also happens on the score up videos.

If, for example, you try to use any browser instead of OBS itself to see the scoreboard, you will not see this issue.

So yeah, if anybody knows what to actually do so OBS reads transparency correctly, please let me know!

Remote GUI can go out of bounds on mobile devices

If you open the remote GUI on your phone, chances are that you will able to scroll past what would normally be visible:

Seems like something easy to fix? But researching online, I haven't found anything. CSS do be like that.

If anyone knows whats up, please post below!

Characters not appearing in 2nd release

I recently downloaded the second release and after setting it up, the characters, text boxes, and .webm backgrounds did not appear in OBS. The only thing that would appear was the "VS" and caster overlay. I understand this may be a simple error on my part, but I wanted to alert you nonetheless as I am reverting to the prior release for the time being.

VS Screen: P2's character isn't rendering on the most right part of the screen.

This has actually been the most long standing bug of this project. And of course, once again it only happens on chromium, Firefox has no issue with this. Anyways, short answer, those pixels of the character image are not being rendered because of this little fella:

Wait, why am I rotating the thing exactly 182 degrees? Actually, why am I just not using transform: scaleX(-1)?? Well, the thing is, if i use scaleX then this happens when the character fades in:

This happens on the few frames the trail is moving. For some reason, when moving, the trail will appear in front of the skin. This only happens on certain characters (Normal Maypul, HD Etalus, many workshop characters...), and this only happens when flipping the image and doing clip for masking the image (so it doesnt go to the other player's side). Why is it doing that? Absolutely no idea, and no matter how much I tried, I couldn't get it to not show without just not clipping.

Speaking of, turns out this issue doesn't exist when using an image mask instead of a clip mask. But then we have 2 new problems (you can test it out yourself with the included VS mask!): Now both characters will have cropped pixels on the edges of the screen when moving the image, and for some reason it stutters a bit more than usual. So that's why I decided to not use image masks.

So why the 182º? Well, turns out, for whatever reason, if we crop out a single column of pixels with that code, the flicker doesn't happen. Why? I have absolutely no idea, but I'll take the downsides. I mean, it's hard to notice anyways.

But I would really like to have this done properly. If anyone has some tips to help, it would be greatly appreciated