Instrukcja OBS Studio
W OBS Studio kliknij „+” w panelu Źródła, wybierz „Przeglądarka”, wklej link widżetu z Banner Studio i wpisz szerokość oraz wysokość pokazane w oknie eksportu. Tło jest przezroczyste, a dane odświeżają się co 2 minuty.
Przygotowanie linku widżetu
Link widżetu ma postać https://twoja-domena/widget?riotId=…&platform=…&style=…. Zawiera wyłącznie ustawienia wyglądu i Riot ID – nigdy klucz API. Wygenerujesz go przyciskiem Generuj link OBS w Studio.
Jak dodać źródło „Przeglądarka” w OBS Studio
- W OBS wybierz scenę, do której chcesz dodać baner.
- W panelu Źródła kliknij + i wybierz Przeglądarka (Browser).
- Nazwij źródło, np. „Ranga LoL”, i potwierdź.
- Wklej link widżetu w pole URL. Pole „Plik lokalny” zostaw odznaczone.
- Wpisz Szerokość i Wysokość dokładnie takie, jak w oknie „Generuj link OBS” (zależą od układu i skali).
- Kliknij OK, a potem przeciągnij baner w wybrane miejsce sceny.
Pole „Własny CSS” może zostać domyślne. Widżet ma przezroczyste tło, więc baner nakłada się na grę lub kamerę bez ramki.
Jakie wymiary ustawić?
Wymiary zależą od układu i skali. Dla skali 100% są to:
| Układ | Kod stylu | Opis | Wymiary (px) |
|---|---|---|---|
| Prime | crest | Pełny profil ranked | 820 × 180 |
| Broadcast | lane | Pasek transmisyjny | 980 × 130 |
| Compact | compact | Obok kamerki | 620 × 140 |
| Showcase | card | Karta gracza | 360 × 340 |
| Split | split | Dwie strony rankingu | 760 × 200 |
| Minimal | minimal | Czysta typografia | 640 × 120 |
| Tower | tower | Układ pionowy | 290 × 420 |
| Scoreboard | scoreboard | Wyniki na pierwszym planie | 820 × 210 |
| Slim | slim | Cienki pasek | 560 × 84 |
| Wide | wide | Długi pasek dolny | 1100 × 100 |
| Info | info | Karta z siatką statystyk | 320 × 350 |
| Stripe | stripe | Skośny pasek esportowy | 720 × 104 |
| Badge | badge | Plakat z dużym emblematem | 240 × 420 |
| Ticket | ticket | Bilet z odrywanym końcem | 660 × 132 |
| Deck (animowany) | deck | Karty statystyk zmieniają się same | 520 × 128 |
| Orbit (animowany) | orbit | Okrągły licznik LP | 300 × 448 |
| Marquee (animowany) | marquee | Przewijana taśma transmisyjna | 920 × 64 |
| Hextech (animowany) | hex | Obracająca się świecąca ramka | 560 × 170 |
| Tabs (animowany) | tabs | Zakładki zmieniają treść | 560 × 150 |
| Radar (animowany) | radar | HUD z echami ostatnich gier | 500 × 170 |
| Flip (animowany) | flip | Obracane karty jak tablica odlotów | 640 × 118 |
| Ladder (animowany) | ladder | Drabina wszystkich rang | 780 × 128 |
Jeśli włączysz formę, KDA, CS lub top championów, do wysokości dochodzi stopka banera (ok. 56–120 px, zależnie od układu i sposobu prezentacji). Przy skali innej niż 100% pomnóż wymiary przez skalę (np. Prime przy 120% to 984 × 216). Okno eksportu liczy to za Ciebie. Szczegóły w układach banerów.
Odświeżanie danych
Widżet pobiera nowe dane co 2 minuty, a serwer dodatkowo buforuje odpowiedź Riot API przez około 90 sekund, aby nie przekraczać limitów. Po zakończonym meczu ranga i LP mogą pojawić się z krótkim opóźnieniem po stronie Riot.
Aby wymusić odświeżenie, w OBS kliknij źródło prawym przyciskiem → Właściwości → Odśwież pamięć podręczną bieżącej strony.
Baner się nie wyświetla?
- Sprawdź komunikat w źródle: „Nie znaleziono gracza…” oznacza błędny Riot ID lub serwer.
- Upewnij się, że wklejony link jest kompletny i zaczyna się od
https://. - Zweryfikuj wymiary źródła – zbyt małe obetną baner.
Pełna lista przyczyn: rozwiązywanie problemów.
Najczęstsze pytania
Jakie źródło wybrać w OBS dla banera rankingu?
Wybierz źródło „Przeglądarka” (Browser) i wklej w pole URL link widżetu wygenerowany w Banner Studio.
Czy tło banera jest przezroczyste?
Tak. Widżet ma przezroczyste tło, więc nakłada się na scenę bez ramki. Krycie samego banera ustawiasz suwakiem „Krycie tła”.
Jak często odświeża się ranga w OBS?
Co 2 minuty. Serwer dodatkowo buforuje dane Riot API przez ok. 90 sekund.
Dlaczego Riot ID w linku ma %23?
%23 to zakodowany znak #. Dzięki temu przeglądarka poprawnie odczytuje tag gracza.