Quickstart

Setup a new electron app to integrate with Overlayed in just a few minutes

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:

• Node.js
• An existing electron app to integrate into. For example the ElectronJS Quick Start.

Alternatively, start with one of our completed example apps.

1. Install the app

   pnpm

   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.

   overlayed.ts

   import { overlayed } from "@overlayed/app";
   import * as Siege from "@overlayed/app/siege";
   import electron from "electron";
   
   export const overlay = overlayed({
     electron,
   	applicationId: "APPLICATION_ID_GOES_HERE",  // You'll receive this from the Overlayed Dashboard
   	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.

   appWindow.ts

   import { overlay } from "./overlayed.ts"
   import type { RenderWindow, RenderWindowConstructorOptions } from "@overlayed/app";
   
   export class AppWindow {
   	private renderWindow: RenderWindow | null = null;
   
   	public create(options?: RenderWindowConstructorOptions) {
   		this.renderWindow = overlay.windows.createInGameWindow(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.

   appWindow.ts

   import { overlay } from "./overlayed.ts"
   
   export class AppWindow {
     private renderWindow: RenderWindow | null = null;
   
     public create(options?: RenderWindowConstructorOptions) {
       this.renderWindow = overlay.windows.createInGameWindow(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.

   main.ts

   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.

   main.ts

       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:

   package.json

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

   pnpm start
   

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