This tool/application is ment to help with Stream Production when Spectating League of Legends. This is not for when you are playing League of Legends.
Table of contents generated with markdown-toc
I started working on this as a personal project after I couldn't find a single Overlay for when I am Casting/Producing LoL. There was plenty of applications for Champ Select, but nothing for when actually spectating. So, after a while this was what I came up with. It also has some extra features for showing Casters and the Matchup for a "waiting" room/scene. Aswell as a End of Stream scene for showing Socials and Sponsors.
The application is currently not an Electron app, but might be in the future. It's built using NodeJS & React!
Feel free to fork, create a pull request, or create an issue for any thing related!
Also, if you use this in a Livestream, feel free to send it my way aswell. Would love to see it in action!
Lastly, if you need a Caster, feel free to contact me on Twitter or Discord: Cow#8079😊
Best Of Series- Add option to save a current state/config for easy loading
Save single team to load- Make scale feature, to fit other InGame Hud Sizes, and screen resoultions
Swap Teams aroundSave casters- Score in Mathup tab
- Add sponsor for bottom left in LeagueOverlay
- End of stream display
CSS Importer- League Standings
Download from the official website and follow the install instructions
Download or clone the project and unzip
Open a Powershell or CMD and navigate to the folder that you extracted Stream Overlay to
Quick tip: Hold Shift and Right Click in the folder, and click Open PowerShell/CMD Window Here
After the commands has completed, all the dependencies should be installed
This will launch the React App and the API, and open a browser window with the address http://localhost:30060
Start the app using the start.bat file or open a PowerShell/CMD Window and run npm start (If not already running!)
In OBS add a new Browser Source, and add these options:
- Width:
1920 - Height:
1080
One of these URL's:
| URL | Description |
|---|---|
http://localhost:30060/LeagueOverlay |
General Overlay for use while Spectating games |
http://localhost:30060/Matchup |
Team VS Team |
http://localhost:30060/Casters |
Displays the caster(s) |
http://localhost:30060/EndOfStream |
(NOT YET IMPLEMENT) End of stream screen |
If the overlay doesn't load, right click the Browser Source, click Properties and click Refresh cache of current page
Also add an image underneath so it looks nice 😄
TL:DR; Set the Ingame HUD Scale to 100%.
This only applies when using the http://localhost:30060/LeagueOverlay
This will hopefully soon be fixed, implemented, and be soon™ be obsolete!
Currently the InGame overlay is static values, and isnt dynamic. Sadly meaning that YOU have to change to my settings.
Set the Ingame HUD Scale to 100%. At the time of writing, I'm unsure if there is other things that needs to be changed. This als omeans the Game HUD Scale setting in the App is useless 😅
On top there is a Navigation bar, if you want to preview the changes in the browser.
The App UI is split into 3 parts. The top part, I call the "Global Settings". This contains all the settings that isnt specific to a Team. (Didnt have a better name..)
Then there is the Blue Team Settings & Red Team Settings. These are effectivly the same. So will be referenced as "Team Settings"
To apply the settings you have set (Team Name, Score, etc) click the HUGE Save button in the middle. This will save the settings and OBS will update
http://localhost:30060/LeagueOverlay
This is the general overlay that is used while spectating InGame.
http://localhost:30060/Matchup
Views the Matchup and the Series Wins (if applicable)
(WIP)
(WIP)
Display an extra element under the Team Abbriviation
| Option | Description |
|---|---|
| None | Hides the extra element |
| Score | Display the Team Setting Score |
| Series Progress | Display the Series Wins |
This is only applicable if Show Score or Series is set to Series Progress.
Choose what type of "Best Of" series is being played.
Sets the Tournament Name or Match Name
(WIP) Please read the League of Legends INGAME section.
Scale the Stream Overlay elements to match the InGame elements
This will save the settings to a file src\Pages\GameState.json, React will.. React.. and OBS will update to show the new state.
A simple button for swapping the teams around.
The name of the team being played.
Displayed on the http://localhost:30060/Matchup page.
E.G: G2 Esports
The abbriviation or "Short Name" of the team.
Displayed on the http://localhost:30060/LeagueOverlay page.
Assumed to be MAX 4-5 Characters
E.G: G2
Picture or logo of the team.
Upload a picture from your computer (supports drag'n'drop). Or choose an uploaded file from the list.
Images are stored in the public\TeamImages folder.
Displayed on the http://localhost:30060/LeagueOverlay page.
Score of the team. Useful for leagues
For simplicity, this can be whatever you want!
Displayed on the http://localhost:30060/LeagueOverlay page.
E.G: 6-9
Amount of wins in a series.
There is no "checks" so please don't "overload" it or go negative! It WILL look odd.
Displayed on the http://localhost:30060/LeagueOverlay AND http://localhost:30060/matchup page.
If you have made a team and want to save it for later. You can save it as a file. This will save it as a Team Name.json in the public\Teams folder.
To load a team, select a team from the Dropdown. NO UNDO
It's worth noting that the Image is not stored in the JSON file, and only stores a reference to the image.
| Target | Class Name |
|---|---|
| Caster 1 Handle | .caster1 |
| Caster 1 Name | .caster1Name |
| Caster 1 Image | .caster1Image |
| (Repeat for 1-3) |
npm start runs using Concurrently. Which means the is 2 processes running at the same time. The React process, and the Express process used for the "Back End". I know this isn't optimal. But, there is always the Pull Request feature on GitHub 😉
If you for some reason want to interface with the "API". Look in node.server.js for a better understanding.
The API server is a simple Express app that runs on port 30061 This also acts as a documentation for myself:
| URL | Function | Parameters |
|---|---|---|
POST /uploadImage |
Uploads and saves an image for use in Team Icon | body: image.png |
POST /saveConfig |
Saves the current settings to a GameState.json File |
body: Redux State |
POST /saveTeam |
Saves the team to a Team Name.json File |
body: Team State |
POST /saveCaster |
Saves the caster to a Caster Handle File |
body: Caster State |
POST /css/:location |
Saves the uploaded CSS to a file_name.css File in public/CSS/:location |
body: Folder Name |
GET /teams |
Gets all the teams in the public/Teams Folder |
|
GET /casters |
Gets all the casters in the public/Casters Folder |
|
GET /images/:folder |
Gets all the images in the public/:folder Folder |
|
GET /images |
Gets all the images in the public/TeamImages Folder |
|
GET /css/:location |
Gets all saved CSS files in public/CSS/:location |