You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
159 lines
7.1 KiB
Markdown
159 lines
7.1 KiB
Markdown
# TomorrowLAN Quad Stream Overlays
|
|
|
|
HTML/CSS browser source overlays for OBS Studio (1920x1080) featuring a 2x2 quad stream layout for the TomorrowLAN gaming event.
|
|
|
|
## Assets
|
|
|
|
| File | Description |
|
|
|------|-------------|
|
|
| `bg.png` | Static dark blue matrix background image |
|
|
| `logo_noyear.png` | TomorrowLAN logo (cyan/white) |
|
|
|
|
---
|
|
|
|
## Overlay Files
|
|
|
|
### Standard Layout (935x515 panels)
|
|
|
|
Panels fill the full canvas with 15px edge padding and 20px gap.
|
|
|
|
| File | Background | Border Animation |
|
|
|------|-----------|-----------------|
|
|
| `quad_static.html` | bg.png | None (solid cyan) |
|
|
| `quad_glow.html` | bg.png | Pulsing glow (12s cycle) |
|
|
| `quad_breathe.html` | bg.png | Breathing opacity/width (8s, staggered) |
|
|
| `quad_bar.html` | bg.png | Single traveling light bar (40s loop) |
|
|
| `quad_dualbars.html` | bg.png | Two chasing light bars (40s loop) |
|
|
| `quad_wave.html` | bg.png | Sequential panel highlight (12s cycle) |
|
|
| `quad_matrix_static.html` | Animated matrix | None (solid cyan) |
|
|
| `quad_matrix_glow.html` | Animated matrix | Pulsing glow |
|
|
| `quad_matrix_breathe.html` | Animated matrix | Breathing opacity/width |
|
|
| `quad_matrix_bar.html` | Animated matrix | Single traveling light bar |
|
|
| `quad_matrix_dualbars.html` | Animated matrix | Two chasing light bars |
|
|
| `quad_matrix_wave.html` | Animated matrix | Sequential panel highlight |
|
|
|
|
### Gap Layout (780x439 panels, exact 16:9)
|
|
|
|
330px vertical gap between columns, 96px row gap. Panels are exactly 16:9.
|
|
|
|
| File | Background | Border Animation |
|
|
|------|-----------|-----------------|
|
|
| `quad_gap_static.html` | bg.png | None (solid cyan) |
|
|
| `quad_gap_glow.html` | bg.png | Pulsing glow |
|
|
| `quad_gap_breathe.html` | bg.png | Breathing opacity/width |
|
|
| `quad_gap_bar.html` | bg.png | Single traveling light bar |
|
|
| `quad_gap_dualbars.html` | bg.png | Two chasing light bars |
|
|
| `quad_gap_wave.html` | bg.png | Sequential panel highlight |
|
|
| `quad_gap_matrix_static.html` | Animated matrix | None (solid cyan) |
|
|
| `quad_gap_matrix_glow.html` | Animated matrix | Pulsing glow |
|
|
| `quad_gap_matrix_breathe.html` | Animated matrix | Breathing opacity/width |
|
|
| `quad_gap_matrix_bar.html` | Animated matrix | Single traveling light bar |
|
|
| `quad_gap_matrix_dualbars.html` | Animated matrix | Two chasing light bars |
|
|
| `quad_gap_matrix_wave.html` | Animated matrix | Sequential panel highlight |
|
|
|
|
### Standalone
|
|
|
|
| File | Description |
|
|
|------|-------------|
|
|
| `bg_matrix.html` | Full-screen animated matrix background (no panels) |
|
|
|
|
---
|
|
|
|
## OBS Setup
|
|
|
|
### Adding the Overlay
|
|
|
|
1. Add a **Browser Source** in OBS
|
|
2. Check **Local file** and select the overlay HTML file
|
|
3. Set **Width** to `1920` and **Height** to `1080`
|
|
4. If streaming at 60 FPS, set the browser source **FPS** to `60` (default is 30)
|
|
5. Layer game/camera sources **below** the overlay in the source list
|
|
|
|
### Game Source Transform (Edit Transform - Ctrl+E)
|
|
|
|
Right-click a game source > **Edit Transform** (or `Ctrl+E`) and enter the exact values below.
|
|
|
|
For all sources, set:
|
|
- **Positional Alignment**: Top Left
|
|
- **Bounding Box Type**: Scale to inner bounds
|
|
- **Alignment in Bounding Box**: Center
|
|
|
|
---
|
|
|
|
### Standard Layout — Edit Transform Values
|
|
|
|
Panel size: **935 x 515**
|
|
|
|
| Source | Pos X | Pos Y | Bounding Box W | Bounding Box H |
|
|
|--------|------:|------:|---------------:|---------------:|
|
|
| Set 1 (top-left) | `15` | `15` | `935` | `515` |
|
|
| Set 2 (top-right) | `970` | `15` | `935` | `515` |
|
|
| Set 3 (bottom-left) | `15` | `550` | `935` | `515` |
|
|
| Set 4 (bottom-right) | `970` | `550` | `935` | `515` |
|
|
|
|
> These panels are slightly wider than 16:9 (935:515 = ~1.815:1 vs 1.778:1). A 1920x1080 game source with "Scale to inner bounds" will be cropped ~6px top and bottom — barely noticeable. Use "Scale to outer bounds" instead if you prefer thin black bars on the sides with no crop.
|
|
|
|
---
|
|
|
|
### Gap Layout — Edit Transform Values
|
|
|
|
Panel size: **780 x 439** (exact 16:9)
|
|
|
|
| Source | Pos X | Pos Y | Bounding Box W | Bounding Box H |
|
|
|--------|------:|------:|---------------:|---------------:|
|
|
| Set 1 (top-left) | `15` | `91` | `780` | `439` |
|
|
| Set 2 (top-right) | `1125` | `91` | `780` | `439` |
|
|
| Set 3 (bottom-left) | `15` | `626` | `780` | `439` |
|
|
| Set 4 (bottom-right) | `1125` | `626` | `780` | `439` |
|
|
|
|
> These panels are exactly 16:9. A 1920x1080 game source fits perfectly — no cropping, no black bars.
|
|
|
|
---
|
|
|
|
### Visual Layout Reference
|
|
|
|
**Standard:**
|
|
```
|
|
┌──────────────────────────────────────────────────┐
|
|
│ 15px │
|
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
|
│ │ Set 1 935x515 │ │ Set 2 935x515 │ │
|
|
│ │ (15, 15) │ │ (970, 15) │ │
|
|
│ └──────────────────┘ └──────────────────┘ │
|
|
│ 20px gap │
|
|
│ ┌──────────────────┐ ┌──────────────────┐ │
|
|
│ │ Set 3 935x515 │ │ Set 4 935x515 │ │
|
|
│ │ (15, 550) │ │ (970, 550) │ │
|
|
│ └──────────────────┘ └──────────────────┘ │
|
|
│ 15px │
|
|
└──────────────────────────────────────────────────┘
|
|
```
|
|
|
|
**Gap:**
|
|
```
|
|
┌──────────────────────────────────────────────────┐
|
|
│ 91px │
|
|
│ ┌────────────────┐ ┌────────────────┐ │
|
|
│ │ Set 1 780x439 │ 330px │ Set 2 780x439 │ │
|
|
│ │ (15, 91) │ │ (1125, 91) │ │
|
|
│ └────────────────┘ └────────────────┘ │
|
|
│ 96px │
|
|
│ ┌────────────────┐ ┌────────────────┐ │
|
|
│ │ Set 3 780x439 │ │ Set 4 780x439 │ │
|
|
│ │ (15, 626) │ │ (1125, 626) │ │
|
|
│ └────────────────┘ └────────────────┘ │
|
|
│ 15px │
|
|
└──────────────────────────────────────────────────┘
|
|
```
|
|
|
|
---
|
|
|
|
## Color Palette
|
|
|
|
| Color | Hex | Usage |
|
|
|-------|-----|-------|
|
|
| Cyan | `#00d4ff` | Panel borders, matrix rain trail |
|
|
| Light cyan | `#80eaff` | Animated glow highlights |
|
|
| Dark navy | `#0a1628` | Matrix background base |
|
|
| White | `#ffffff` | Matrix leading characters |
|