After this guide you’ll have an electron-based overlay that:

  • Renders a window in-game
  • Can be toggled via a hotkey
  • Can listen to a basic game event

Prerequisites:

Alternatively, start with one of our completed example apps.

1

Install the app

pnpm i @overlayed/app @overlayed/electron
2

Create and configure the app

We’ll set up a basic keybind, so we can use it later on to toggle the window.

import { overlayed } from "@overlayed/app";
import { Siege } from "@overlayed/app/siege";

export const overlay = overlayed({
	appName: "my-app",
	modules: [Siege.module()],
	keybinds: {
		toggleMainWindow: {
			keys: ["AltLeft", "KeyX"],
			mode: "toggle",
		},
	},
});
3

Setup our in-game window

We’ll need to create a window using the Overlayed API since we want it to render in-game.

import { overlay } from "./overlayed.ts"
import type { RenderWindow, RenderWindowConstructorOptions } from "@overlayed/app";

export class AppWindow {
	private renderWindow: RenderWindow | null = null;

	public create(options?: RenderWindowConstructorOptions) {
    // Only call createWindow for windows you want to render in-game
		this.renderWindow = overlay.windows.createWindow(options)

    // For now we'll load google.com, you'll want to replace this with your own HTML
    this.renderWindow.loadURL("https://google.com");
	}
}
4

Setup the window hotkey listener

We can listen to the keybind we created in the first step to toggle the window’s visibility.

import { overlay } from "./overlayed.ts"

export class AppWindow {
  private renderWindow: RenderWindow | null = null;

  public create(options?: RenderWindowConstructorOptions) {
    this.renderWindow = overlay.windows.createWindow(options ?? {});
    this.registerKeybinds(this.renderWindow);
  }

  public destroy() {
    this.renderWindow?.destroy();
  }

  private registerKeybinds(renderWindow: RenderWindow) {
    overlay.keybinds.toggleMainWindow.on("toggle", () => {
      if (renderWindow.isVisible()) {
        renderWindow.hide();
      } else {
        renderWindow.show();
      }
    });
  }
}
5

Listen to the gameLaunch event

We’ll need to listen to the Game Launch event to know when the game has started.

import { AppWindow } from "./appWindow.ts"
import { overlay } from "./overlayed.ts"

function start() {
  const appWindow = new AppWindow();
  overlay.on("gameReady", () => appWindow.create());
  overlay.on("gameClose", () => appWindow.destroy());
}

app.on("ready", start);
6

Listen to a basic game event

There’s a variety of game events that can be listened to, for example we can listen to when a player joins the game.

    import { AppWindow } from "./appWindow.ts"
    import { overlay } from "./overlayed.ts"
    import { siegeStateManager } from "./siegeStateManager.ts"

    function setup() {
      const appWindow = new AppWindow();
      appWindow.create();

      overlay.on("gameReady", ({game}) => {
        if(game === "siege") {
          // ...
        }
      })

      overlay.siege.on("player_joined", (event) => {
        console.log(event.content);
      });
    }

    setup();
7

Run the app

Make sure to configure the package.json and tsconfig.json (optional) files with the following:

  {
    // ...
    "scripts": {
      "start": "tsc && ogg-electron ."
    }
  }

pnpm start

Congrats! 🎉
You just made your first overlay with Overlayed!