92 lines
2.6 KiB
Plaintext
92 lines
2.6 KiB
Plaintext
Pokémon Party OBS Overlay
|
|
|
|
This is the simple Option 2 version: a static overlay page plus a party.json file.
|
|
|
|
Files:
|
|
overlay.html - the OBS/browser overlay
|
|
editor.html - editor for the six party slots
|
|
guide.html - visual setup guide you can open in your browser
|
|
server.py - local server that lets editor.html save party.json directly
|
|
party.json - your six party slots
|
|
sprites/ - put your Pokémon sprite PNG/GIF files here
|
|
|
|
How to run locally:
|
|
1. Open a terminal in this folder.
|
|
2. Run:
|
|
py server.py
|
|
|
|
On Mac/Linux, use:
|
|
python3 server.py
|
|
3. In OBS, add a Browser Source with:
|
|
http://localhost:8765/overlay.html
|
|
4. Open the visual guide if you want setup help:
|
|
http://localhost:8765/guide.html
|
|
5. Recommended OBS browser size:
|
|
Width: 1400
|
|
Height: 230
|
|
6. Keep the server terminal open while streaming.
|
|
|
|
Important:
|
|
Use server.py if you want the editor to save party.json directly.
|
|
Plain python -m http.server still works for viewing the overlay, but it cannot save files.
|
|
|
|
Changing your party:
|
|
Option A, recommended direct-save workflow:
|
|
1. Start the server with:
|
|
py server.py
|
|
2. Open this in your normal browser:
|
|
http://localhost:8765/editor.html
|
|
3. Fill in the six slots.
|
|
4. Click Save party.json directly.
|
|
5. OBS should update within 2 seconds.
|
|
|
|
Option B, backup static workflow:
|
|
1. Open this in your normal browser:
|
|
http://localhost:8765/editor.html
|
|
2. Fill in the six slots.
|
|
3. Click Copy JSON and paste it over the contents of party.json, or click Download party.json and replace the old file.
|
|
4. Save party.json. The overlay checks for changes every 2 seconds.
|
|
|
|
Option B, browser-storage preview workflow:
|
|
1. Open editor.html in the same browser/profile that will view the overlay.
|
|
2. Click Save to browser preview.
|
|
3. Use this overlay URL:
|
|
http://localhost:8765/overlay.html?source=browser
|
|
|
|
For OBS, Option A is more reliable because OBS may not share browser storage with your regular browser.
|
|
|
|
Each slot looks like this:
|
|
{
|
|
"species": "cyndaquil",
|
|
"nickname": "Toast",
|
|
"sprite": "sprites/cyndaquil.png",
|
|
"status": "alive"
|
|
}
|
|
|
|
Status options:
|
|
alive - normal
|
|
boxed - yellow tag
|
|
dead - grayscale sprite and crossed text
|
|
empty - empty slot
|
|
|
|
Sprite naming:
|
|
You can name files however you want, as long as party.json points to the right path.
|
|
Examples:
|
|
sprites/cyndaquil.png
|
|
sprites/155.png
|
|
sprites/toast.gif
|
|
|
|
Layout options:
|
|
Horizontal party bar:
|
|
http://localhost:8765/overlay.html
|
|
|
|
Vertical sidebar:
|
|
http://localhost:8765/overlay.html?layout=vertical
|
|
|
|
2x3 grid:
|
|
http://localhost:8765/overlay.html?layout=grid
|
|
|
|
Notes:
|
|
The page has a transparent background for OBS.
|
|
If a sprite file is missing, the overlay shows a Poké Ball placeholder instead of breaking.
|