Overlays - fe-art/Toolscreen GitHub Wiki

Setting Up the Ninjabrain Bot Overlay

Before configuring the overlay in Toolscreen, make sure the OBS overlay is enabled in Ninjabrain Bot:

  1. Open Ninjabrain Bot.
  2. Go to Settings > OBS Overlay.
  3. Make sure Enable Overlay is ticked.

Then in Toolscreen:

  1. Open the config menu with Ctrl+I.
  2. Go to Basic and make sure Ninjabrain Bot Overlay is enabled.
  3. Do F3+C in a world to see the overlay.
  4. To configure it further, go to Advanced > Images > Ninjabrain Bot.

Configuring an Image Overlay

Go to Advanced > Images and select the overlay you want to configure.

To reposition the overlay, either click and drag it in the game or use the X and Y sliders.

Here is an example configuration workflow for Ninjabrain Bot:

  1. Set Opacity to full.
  2. Enable Pixelated Scaling.
  3. Temporarily increase the Scale so you can see what you're doing.
  4. Adjust the Crop to just the parts you want to see.
  5. Scroll down to Color Key and add a new color key.
  6. For Ninjabrain Bot's default background, use the RGB value 55, 60, 66.
  7. Adjust the sensitivity slider until the background is cleanly removed.
  8. Optionally change the Background Color to something else.
  9. Go back up and reduce the Scale to your desired size.

Understanding Relative Positioning

When positioning an overlay, you can change what it's relative to. The options include positions relative to the viewport (game content) or the screen.

  • Viewport means relative to the game content. In thin mode, the center of the viewport is the center of the narrowed game area. Top-left of the viewport is the top-left corner of the game content.
  • Screen means relative to the actual monitor. Top-left screen is always the top-left corner of your display.

If you're configuring an overlay for zoom mode, use relative to screen because the viewport may extend off-screen. For overlays in thin or wide mode, either option works depending on where you want it anchored.

Adding a Window Overlay

Window overlays capture a portion of another window and display it in-game. This example uses Spotify.

  1. Go to Advanced > Window Overlays.
  2. Click Add New and give it a name (e.g., "Spotify").
  3. Unlike mirrors, window overlays are automatically added to the mode you're currently in. You don't need to manually assign them.
  4. Select the window to capture from the dropdown.
  5. Adjust the Cropping to just the part you want (e.g., the song title).
  6. Adjust the Scale.
  7. Enable Pixelated Scaling if desired.
  8. Click and drag the overlay to position it.
  9. Add a Color Key to remove the background (e.g., black).
  10. Optionally enable Background and adjust its opacity.

If you want to include another part of the same window (e.g., both the song title and the progress bar), create a second window overlay pointing to the same window with different cropping.

Adding a Browser Overlay

Browser overlays render a live web page in-game. This is useful for higher-quality overlays or dynamic web content.

  1. Go to Advanced > Browser Overlays.
  2. Click Add New Browser Overlay and give it a name.
  3. Type or paste a URL and press Enter to save it.
  4. The page will appear in the background.
  5. Scroll down and try enabling Transparent Mode. This only works with websites that support transparency. If it doesn't work, add a Color Key instead.
  6. Adjust the FPS (increase it for active/updating content like chat).
  7. Adjust the Scale and drag the overlay to position it.
  8. Optionally enable Background with partial opacity.

Browser overlays are very flexible. You can display live chat, dashboards, or even play videos.