Wchodzimy na żywo.

Pięć scen w nocnym klimacie Los Santos. Pliki są gotowe do zwykłego hostingu statycznego. Grafika, czcionki i animacje znajdują się w paczce.

Wersja 02 zawiera Twój avatar, czarno-niebiesko-fioletowy motyw, Discord nyxu_x oraz https://tipply.pl/@Nyxu. Przy aktualizacji poprzedniej paczki podmień cały folder i skopiuj nowe linki z panelu. Stare linki z #cfg=… zawierają poprzednie ustawienia kolorów i napisów.

Uruchomienie na hostingu

Rozpakuj archiwum. Wgraj zawartość folderu nyxu-stream do katalogu na hostingu, na przykład public_html/nyxu/. Zachowaj strukturę folderu assets.
Otwórz https://twoja-domena.pl/nyxu/index.html. Wybierz scenę, wpisz napisy i ustaw kolor.
Naciśnij Kopiuj link. Skopiowany adres dotyczy wybranej sceny i zawiera wszystkie ustawienia widoczne w panelu.
W programie streamingowym dodaj źródło przeglądarkowe, wklej link i ustaw szerokość 1920 oraz wysokość 1080.
Dla kolejnych scen powtórz wybór i kopiowanie linku. Sceny zmieniaj w swoim programie streamingowym.

Możesz wcześniej otworzyć index.html dwuklikiem i obejrzeć zestaw lokalnie. Linki do transmisji skopiuj po otwarciu panelu z adresu hostingu.

Sceny w paczce

Scena	Adres względem folderu	Zastosowanie
Start	`overlay.html?scene=start`	Pełne tło, duży napis, odliczanie, Twoje napisy.
Rozgrywka	`overlay.html?scene=live`	Przezroczysta nakładka nad grą, logo, rotujący panel, opcjonalna ramka kamery.
Przerwa	`overlay.html?scene=brb`	Pełne tło i osobne odliczanie przerwy.
Rozmowa	`overlay.html?scene=chat`	Tło z przezroczystym oknem na kamerę oraz drugim na czat.
Koniec	`overlay.html?scene=end`	Podziękowanie i Twoje napisy.

Adresy z tabeli korzystają z config.js. Link skopiowany w panelu ma dodatkową część #cfg=… i używa ustawień zapisanych w tym linku.

OBS Studio

Przygotuj sceny Start, Rozgrywka, Przerwa, Rozmowa i Koniec. Dla każdej dodaj źródło Przeglądarka / Browser.
Wklej link danej sceny w pole URL. Ustaw 1920 × 1080. Dla tych animacji wystarcza 30 FPS.
Ustaw płótno transmisji na 1920 × 1080. Źródło nakładki ma wypełniać płótno przy pozycji X 0, Y 0.
W scenie Rozgrywka umieść przechwytywanie gry na spodzie, kamerę nad grą i źródło tej nakładki na górze. Przezroczystość jest już ustawiona w plikach.
Na Start i Przerwę możesz włączyć Odśwież przeglądarkę, gdy scena stanie się aktywna, aby każde wejście do sceny uruchamiało licznik od początku.
Po zmianie plików na hostingu odśwież źródło. Jeśli przeglądarka przechowuje starszy plik, użyj odświeżenia pamięci podręcznej źródła.

Nazwy opcji zależą od języka interfejsu. Opis źródła przeglądarkowego i jego ustawień znajduje się w dokumentacji OBS. Dokumentacja OBS ↗

Kamera w scenie rozgrywki

W panelu włącz Ramka kamery, wybierz jej położenie i skopiuj nowy link. Obraz z kamery ustaw na 384 × 216 px. Dopasuj lub przytnij źródło do proporcji 16∶9, następnie wpisz poniższe współrzędne. Pozycje dotyczą obrazu kamery wewnątrz ramki.

Położenie	X	Y	Obraz kamery
Po prawej · góra	1487	254	384 × 216 px
Po prawej · środek	1487	469	384 × 216 px
Po lewej · góra	49	254	384 × 216 px

Scena rozmowy

W tej scenie dodaj kamerę i osobne źródło przeglądarkowe swojego widgetu czatu, a nakładkę Nyxu ustaw nad nimi. Podane współrzędne obejmują przezroczyste okna.

Element	X	Y	Szerokość	Wysokość
Kamera lub obraz gry	80	210	1264	711
Źródło czatu	1384	210	456	711

Okno czatu jest przygotowanym miejscem na widget. Adres widgetu uzyskasz u dostawcy, którego używasz do swojej platformy. W obu oknach możesz umieścić własne źródła dostępne w programie streamingowym.

Napisy, kolory i zapis

W panelu ustawisz nick, kategorię, hasło, kolor, napisy, czas odliczania i widoczność kamery.
Pierwszy i drugi podpis możesz przeznaczyć na Discorda, YouTube, TikToka, Kicka lub donate. Wpisz własny adres albo nazwę. Puste pole treści ukrywa dany blok.
W rozgrywce dolny panel pokazuje na zmianę pierwszy podpis, drugi podpis oraz hasło. Zmiana następuje co 10 sekund. Gdy wszystkie trzy treści są puste, panel znika.
Zmiany w panelu aktualizują jego podgląd. Aby zastosować je w programie streamingowym, skopiuj nowy link i podmień URL źródła.
Przycisk Pobierz config.js zapisuje ustawienia do pliku. Wgraj go w miejsce dotychczasowego config.js. Źródła korzystające z prostych adresów z tabeli pobiorą te ustawienia po odświeżeniu.
Źródła z #cfg=… nadal korzystają z ustawień zapisanych we własnym adresie. Możesz dzięki temu mieć różne kolory i układy w różnych scenach.
Panel zapamiętuje ustawienia w przeglądarce. Otwarty w OBS i otwarty w zwykłej przeglądarce korzystają z osobnych sesji. Zmiany przenosisz linkiem albo plikiem.

Odliczanie i ruch

Domyślnie Start i Przerwa mają po 5 minut. Licznik zaczyna biec po załadowaniu sceny. Odświeżenie rozpoczyna odliczanie ponownie. Po dojściu do zera zostaje 00∶00 i pojawia się komunikat JESTEŚMY GOTOWI. Scenę przełączasz w programie streamingowym.

Możesz wyłączyć odliczanie. Wtedy scena pokazuje krótki komunikat. Wyłączenie animacji zatrzymuje ruch tła i animowane detale. Odliczanie nadal działa, a napisy w rozgrywce zmieniają się co 10 sekund. Ustawienie systemowe ograniczania ruchu również zatrzymuje animacje.

Pliki i dostosowanie

index.html to panel, overlay.html wyświetla sceny, config.js przechowuje ustawienia domyślne. Pliki overlay.css i studio.css definiują wygląd, a skrypty JS obsługują ustawienia i odliczanie. Folder assets zawiera tło, przesłany avatar Nyxu i czcionki z licencjami.

Projekt skaluje całe płótno proporcjonalnie. Właściwa rozdzielczość źródła to 1920 × 1080. W pionowym formacie trzeba przygotować osobny układ. Audio, obraz z gry i kamery dodajesz jako źródła w swoim programie.

Grafika tła została wygenerowana do tego zestawu. Avatar jest przesłanym plikiem użytkownika, osadzonym bez modyfikacji. Układ i animacje przygotowano w HTML, CSS i SVG. Lokalne fonty pochodzą z rodzin Nimbus Sans Narrow i DejaVu. Ich informacje licencyjne znajdują się w assets/fonts/LICENSES.txt.

Otwórz Stream Studio ↗