HarmfulBreeze / overlay

Customizable UI for League of Legends champion select spectating.
MIT License
31 stars 8 forks source link
java java-cef league-client-apis league-of-legends react streaming tournament

This repository has been archived due to a lack of time and a lack of maintenance of the main dependency of this project.

Overlay

An easy-to-use, yet very customizable application to display champion select information in streams

Gradle CI Discord

Screenshot

Requirements

Getting started

Customization

Edit the configuration by modifying config.conf and saving. You can also customize fonts and more elements: check out ./web/img/custom and ./web/fonts.

OBS Studio Setup

Two methods can be used to set up Overlay with OBS Studio: simple and advanced. Please note that the simple method has a resolution restriction (windows cannot exceed a certain size on Windows).

Method 1 (simple)

  1. Open Overlay by double-clicking on run.bat.
  2. In OBS, set up a window capture of the greenscreen Overlay window.
  3. Set up a color key filter with key color set to HTML #008000 and Similarity/Smoothness to the minimum.

    Method 2 (advanced)

  4. Open config.conf in a text editor and set nogui to true. Save the file.
  5. Double-click on run.bat, wait until you see the message WebSocket server started successfully in the console.
  6. In OBS, create a new browser source.
  7. Check Local file and click the Browse button. Navigate to the Overlay folder, then select the web/index.html file.
  8. Set the width and height to a 16:9 aspect ratio (like 1920x1080 for 1080p).
  9. Make sure Shutdown source when not visible and Refresh browser when source becomes active are both unchecked.
  10. Click OK.
  11. Set up a color key filter with key color set to HTML #008000 and Similarity/Smoothness to the minimum.

Next time, make sure to start Overlay before starting OBS Studio. If you forgot, double-click the browser source and click Refresh cache. Don't forget to make your browser source local file point to the latest index.html after upgrading to a newer Overlay version.

Building and running

Building