After doing many Rocket League broadcasts over the years I was curious how custom overlays worked and decided to experiment with making one. The project is currently meant for learning purposes and not intended to be used in an actual broadcast.
These instructions will get you a copy of the project up and running on your local machine for development and testing purposes.
- Rocket League - Videogame that the overlay is meant for. Also works with the Steam version if you have it from before being delisted
- BakkesMod - Main modding tool for Rocket League and required for getting game data
- Node.js - JavaScript runtime, needed for SOS-WS-Relay
- SOS-WS-Relay - Broadcasts game information to be picked up by the overlay
Download and install BakkesMod and Node.js. The current LTS build of Node.js is preferred.
Download the SOS-WS-Relay repository and this repository. Place both folders in an easily accessible location.
Direct a command prompt window to the SOS-WS-Relay folder and run npm install then node ws-relay.js.
Information about the launch options for SOS-WS-Relay can be found in the project's README file.
Now launch Rocket League and BakkesMod. Lastly, open main.html from this repository and spectate a custom 3v3 game with bots in Rocket League.
If everything is working properly, live information from the game will show up in the main.html window.
- You must be a spectator for SOS to get game data. Game information is not relayed while in a player slot.
- The project is currently meant for handling 3v3 matches. 4v4 is possible with modifications to the HTML and JavaScript.
- Placing the overlay on a game feed can be done with a program like OBS or vMix
- RL Broadcast Programming discord - Community and resources for creating Rocket League overlays
- SOS Overlay System - Information on events and data pulled from the game
- SOS Introduction Tutorial Code - Initial code to subscribe to SOS-WS-Relay events
- WebStorm - JavaScript IDE
- GitHub Desktop - GitHub app