Reactive Backdrop — Create Reactive Sprite Scenes

Build lively, layered backgrounds and overlays from your own sprites. Designed for game developers, artists, and streamers, the editor lets you compose scenes with parallax, motion, and spawn effects — no coding required.

Overview

Use the editor to assemble 2D sprites into animated scenes. Tune depth, movement, and behavior visually, then export a standalone HTML page you can use on stream, in menus, or on a website.

Features

• Use your own PNGs or sprite sheets
• Parallax and motion via mouse/touch
• No-code editor with real-time preview
• Export a ready-to-host HTML page
• OBS-friendly: optional desktop mouse tracking
• Fine control over spawn, scroll, depth, and animation

How It Works

The editor creates a configuration for a lightweight runtime that reproduces your scene without the editor UI. You can export the page and use it directly in OBS or host it like any static website.

Using the Editor

1. Import or pick your sprites.
2. Adjust parallax depth, spawn behavior, scroll direction, opacity, and scale.
3. Preview motion with mouse or touch; tweak speeds and ranges.
4. Export to generate a standalone HTML page with your configuration.

OBS Integration

1) Use the exported page as a Browser Source

Add your exported HTML to OBS as a Browser Source. You can load it as a local file or via a local/remote URL. For parameterized setups, load it via a URL.

2) Split the overlay into multiple Browser Sources

Hide specific sprite groups or the background using URL parameters. This lets you layer multiple Browser Sources and place other scene elements in between.

• ?disable-background — hide the static background (makes it transparent)
• ?disable-all-background-objects — hide all sprites
• ?disable-background-groups=bg-1,bg-2,bg-3 — hide only these groups
• ?disable-except-background-groups=bg-1,bg-2,bg-3 — show only these groups

Notes: Group IDs correspond to each sprite group’s ID set in the editor. Usage can look like this:
C:/Path/to/html/example.html&disable-except-background-groups=bg-1,bg-2
http://localhost:8000/your-export/index.html?disable-background.

3) Optional: desktop mouse reaction

To react to your desktop mouse even when the Browser Source isn’t focused, serve the page via the python script provided in the download and add ?track-mouse to the URL. The page will poll a local endpoint for the normalized cursor position and map it to screen coords.

Example URLs:

• http://localhost:8000/resources/template.html?track-mouse
• http://localhost:8000/index.html?disable-background&disable-except-background-groups=bg-1,bg-2&track-mouse

Export & Embed

The export produces an HTML page with asset files integrated that you can host anywhere (your site or as a Browser Source in OBS), if you have the required rights for the media you used to create it.

Troubleshooting

• URL parameters not working: open the page via HTTP(S) instead of file://.
• No desktop mouse reaction: confirm you added ?track-mouse and are loading it via the local python server. Future versions may support simpler setups.

License & Credits

The pages you generate can be used commercially or non-commercially. Full license details are visible in the editor and export.

Support

This is an early version. Feedback and bug reports are welcome. If you like it, please consider supporting the project.

Download

The Download only contains some generated example scenes and the python script for the desktop mouse tracking. To create your own scenes, use the editor here on itch.io.