Build your OBS overlay with drag and drop, widgets included

Before: coordinates and five sources

Until now, placing a decoration meant typing coordinates into a table of fields, without seeing the result. And each of the five widgets was a separate browser source in OBS, with its own address and its own size.

The table is gone. The scene is built by eye, and the widgets become part of the overlay.

What the gallery holds

The gallery, to the left of the preview, can be filtered with a search.

• Your decorations: the props, frames and paintings you own, with their drawn preview.
• The five widgets, always available, nothing to own: what the creature needs to evolve, what it is asking for, its four states, its identity, and what the stream has produced.
• Decorations you do not own yet, five at most, faded. They cannot be placed: they lead to their page in the Decorations.

Floor and wallpaper keep their own list: a tiling is not dragged, it fills the scene.

Placing an object, step by step

1. Open the Stream page, then the Scene tab.
2. Drag a decoration or a widget from the gallery: it lands under the cursor. A single click places it in the centre.
3. Move it on the preview. It snaps to a four-pixel grid; hold Alt to place it pixel by pixel.
4. Set its order: move up, move down, in front of or behind the creature. Remove what you no longer need.
5. Made a mistake? Undo steps back, one gesture at a time.
6. Click "Save the scene".

The overlay open in OBS reloads its settings every four seconds while you are live, every thirty seconds off air: the saved scene shows up within that delay, without touching the source address.

A preview that tells the truth

• The real creature runs in it, at its real size. You see where it walks before putting a widget in its way.
• Widgets show their real content, the one of the creature on air, with the same styles as on air. You judge the space the text takes, not an empty box.
• Mouse and finger follow the same path: the scene can also be built from a tablet or a phone.

Why widgets live inside the overlay

Decorations and the creature are animated pixels, drawn on a canvas. Widgets are text. Text drawn on the canvas and then scaled up would turn blurry; so widgets are placed as HTML on top of the canvas, and stay sharp.

Their position follows every frame, their content is recomputed once per second. And one source instead of five means a single page to load and keep up to date in OBS.

The creature is not placed

In the scene, the creature is the only object that decides where it is. It walks, jumps and climbs; with obs-websocket enabled, it uses your OBS sources as platforms and follows them when they move.

What you build is its terrain: the floor, the wallpaper, and the objects in front of or behind it.

Moving from five sources to one

• The Overlay tab of the Stream page shows the size to give the browser source, which is the size of the canvas. A smaller source would shift the whole scene.
• The LiveGotchi OBS script sets up the overlay source at the right size.
• Old widget sources keep working: their addresses are still served and show the same content. Remove them from OBS one by one, whenever you like.

For what the creature brings to your stream, see LiveGotchi for streamers (in French).

Frequently asked questions