readek / roa-stream-tool Goto Github PK
View Code? Open in Web Editor NEWA Rivals of Aether overlay and control panel for tournament streams
License: MIT License
A Rivals of Aether overlay and control panel for tournament streams
License: MIT License
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.
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
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!
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.
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.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
π Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. πππ
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google β€οΈ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.