Saját chat. Saját karakter.

Neon nevek.
Tiszta játéktér.

Az alfaBART vízszintes Twitch-chat teljes telepítési útmutatója. Válassz felbontást, másold a három kódot, majd állítsd saját méretre.

Neon névchipek ⚡Twitch-emote-ok + jelvényekBot- és parancsszűrés

alfaBART / LIVE CHAT CONSOLE● HELYI BEMUTATÓ

alfaBARTNEON DISPLAY / MODEL 01

A mi chatünk, a te képernyődön. A felbontásváltás és az alsó méretmezők ezt az előnézetet is frissítik.

StreamElements, az elejétől

Nyisd meg a StreamElements → My Overlays oldalt.
Hozz létre új overlayt. Egyéni vászonméret: . Név: .
A szerkesztőben: + → Static / Custom → Custom Widget.
Jelöld ki a widgetet. A Position, size and style résznél állítsd be a táblázat értékeit.
Kattints az Open Editor gombra. A HTML, CSS és JS fülek teljes tartalmát külön-külön cseréld le az alábbi kódokra.
Fields és Data: ehhez a widgethez nem kellenek saját mezők; hagyd az alapállapotot.
Done → Save. Másold ki az overlay Copy URL / Overlay URL hivatkozását.

Widget beállítás	Érték

A widget teljes vászonméretű, átlátszó. A látható chatcsíkot a CSS rögzíti a kép legaljára. A widgetet nem kell kézzel lefelé húzni.

A felbontást az OBS alapvásznához válaszd. Ha 1440p-s vászonból 1080p-ben közvetítesz, itt a 1440p oldal kódját használd.

Három fül. Három teljes kód.

A kódok mindig a felül kiválasztott felbontáshoz és a méretezési mezők aktuális értékeihez igazodnak. A kódok kimásolásához használd a Másolás gombot.

Méretek módosítása ↓

HTML / HTML fül

CSS / CSS fül

JAVASCRIPT / JS fül

A kódban a csatorna alfabart. Más csatornánál a JS legelején a CHANNEL_NAME értékét cseréld ki.

OBS: pontos illesztés

A kívánt jelenetben: Források → + → Böngésző. Név: chat_alsósoros.
Illeszd be a mentett overlay URL-jét. Az overlay hivatkozását használd, ne a szerkesztőoldal címét.
Állítsd a böngészőforrást méretűre.
Átalakítás → Átalakítás visszaállítása. Pozíció: X=0, Y=0; vágás minden oldalon 0; határolókeret nélkül.
A forráslistában a chat legyen a játék és a háttér fölött. A kamera alját igazítsd a sáv tetejéhez.
Kapcsold ki: Forrás leállítása, ha nem látható és Frissítés a jelenet aktiválásakor.
Másik jelenetbe a Meglévő hozzáadása lehetőséggel tedd be ugyanazt a böngészőforrást.

OBS / chat	Érték

A chat és a tízpercenként beúszó kép két külön overlay, két külön OBS-forrás. Ez az útmutató a chathez tartozik.

Próba élő adás nélkül

Frissítés után várj legfeljebb 10 másodpercet az emote-listára. A saját Twitch-chatedbe küldd ezt:

teszt alfaba2Hi <3

Új üzenet érkezésekor a korábbiak balra tolódnak, majd megállnak. A szív és a saját emote is megjelenhet. A név elé az üzenethez kapott Twitch-jelvények kerülnek.

A kézi forrásfrissítés és az OBS újraindítása törli a helyben megjelenített chatelőzményt. A widget nem kér le régi üzeneteket és nem készít tartós mentést.

Hangold a saját képedhez

A betűméretet és a sáv magasságát a CSS elején, a :root részben módosíthatod. Az alábbi mezők átírják a fenti teljes CSS-kódot is.

Sáv magassága · pxÜzenet betűmérete · pxNév betűmérete · pxEmote mérete · pxJelvény mérete · pxÜzenetköz · pxJobb belső margó · pxTwitch-csatorna

Méretarányos helyi bemutató, nem élő Twitch-kapcsolat. Teljes szélességű, lekicsinyített nézetben a betűk is kisebbnek látszanak.

Mit szeretnél?	Hol módosítsd?	Példa
Magasabb chatcsík	CSS → `--bar-height`	+10 px; alul marad
Nagyobb üzenetszöveg	CSS → `--message-size`	+2 px
Nagyobb név a chipben	CSS → `--name-size`	+2 px; a chip is nő
Nagyobb emote / jelvény	CSS → `--emote-size` / `--badge-size`	Csak CSS-módosítás kell
Több hely az üzenetek között	CSS → `--message-gap`	+6 px
Gyorsabb eltolás	JS → `MOVE_MS`	420 helyett 280
Azonnali eltolás	JS → `MOVE_MS`	0
Más neon színek	JS → `COLOR_PAIRS`	Hex színpárok
Más alsó neonvonal	CSS → `#bart-chat::after`	A linear-gradient színei
További bot kizárása	JS → `blockedUsers`	Kisbetűs felhasználónév

Ha csak a méreteket állítod át, a CSS-t kell újramásolni. Az emote- és jelvényméretek is CSS-változókat használnak. Csatornanév, színek vagy botszűrés módosításakor a JS-t is másold újra. Végül Done → Save.

Hibakeresés és működési tudnivalók

Sem sáv, sem vonal: ellenőrizd az aktív jelenetet, a forrás szem ikonját, sorrendjét, méretét és pozícióját.
Sáv van, üzenet nincs: írj a Twitch-chatedbe egyszerű szöveget. A ! kezdetű üzenetek szándékosan kimaradnak. Ellenőrizd, hogy az overlay a megfelelő Twitch-fiókhoz tartozik.
Az emote neve látszik: várj a katalógus betöltésére, majd küldj új üzenetet. A hálózati hiba miatt hiányzó képeknél szöveges tartalék jelenik meg. A katalógus az elérhető globális és csatornaemote-okat tartalmazza; teljes külső emoteszolgáltató-lefedettség nem garantált.
Nincs jelvény: a widget csak az üzenethez képcímmel elküldött jelvényeket jeleníti meg.
Jelenetváltáskor üres: ellenőrizd az OBS két automatikus leállítás/frissítés kapcsolóját, és használd ugyanazt a meglévő forrást.
A túl hosszú üzenet vége három ponttal rövidül. A legutolsó üzenet nem tűnik el idővel. A teljesen kifutott üzenetek törlődnek, legfeljebb 100 elem marad a sorban.
A csatornatulajdonosként beírt emote neve a katalógusból is felismerhető; ez megjelenítési funkció, nem Twitch-jogosultság-ellenőrzés.

Méretek szerkesztése a kódban

Hol? StreamElements → chat_alsósoros → Open Editor → CSS fül. Keresd meg a kód elején a :root blokkot. A lent látható példa az aktuálisan kiválasztott felbontás és méretmezők értékeit mutatja.

CSS / :root

Változó	Mit állít?	Hogyan érdemes módosítani?
`--bar-height`	A teljes sáv magassága	Emeld 6–10 px-es lépésekben. A sáv alja rögzítve marad.
`--message-size`	Üzenetszöveg	Emeld 2 px-es lépésekben.
`--name-size`	A név betűmérete	A chip magassága és belső távolságai is követik.
`--emote-size`	Emote-képek és a <3 szív mérete	A képnek maradjon hely a sávon belül.
`--badge-size`	Moderátor-, VIP- és egyéb jelvények	Általában legyen kisebb a név betűméreténél.
`--message-gap`	Üzenetek közötti üres hely	Nagyobb érték: szellősebb sor, kevesebb kiférő szöveg.
`--edge-space`	Jobb szélső belső margó	Ez a szövegsor margója; a neonvonal teljes szélességű marad.

Csak a CSS-t kell módosítanod. A legegyszerűbb, ha a fenti méretmezőket használod, majd a Módosított CSS másolása gombbal a teljes CSS-t cseréled le. A HTML és a JS méretezéshez nem változik. A CSS-fülön csak egy :root blokk maradjon.

Bot- és parancsszűrés szerkesztése

Botok hozzáadása vagy visszaengedése

Hol? Open Editor → JS fül → keresés: blockedUsers. A teljes const blockedUsers = new Set([...]); blokkot szerkeszd.

JS / blockedUsers

const blockedUsers = new Set([
  "streamelements",
  "streamlabs",
  "nightbot",
  "moobot",
  "fossabot",
  "sery_bot",
  "wizebot",
  "soundalerts",
  "commanderroot",
  "sajatbotod"
]);

A sajatbotod helyére a kizárni kívánt bot valódi Twitch-felhasználónevét írd, kisbetűkkel, @ nélkül.
Minden név idézőjelben legyen. A sorokat vessző válassza el.
Ha visszaengednél egy botot, töröld a nevét tartalmazó sort.
Minden bot átengedéséhez használhatod ezt: const blockedUsers = new Set([]);

A szűrés felhasználónév-lista alapján működik. Egy ismeretlen botot külön hozzá kell adnod; az üzeneteket csak a megjelenítésből zárja ki, a Twitch-chatről nem törli.

Parancsok elrejtése

Hol? Ugyanott a JS-ben, az addMessage függvényben keresd ezt a sort:

JS / parancsszűrés – alapbeállítás

if (text.trimStart().startsWith("!")) return;

Ez a szóközökkel kezdődő !parancs üzeneteket is kihagyja. Ha a / karakterrel kezdődő, a widgethez szövegként eljutó üzeneteket is elrejtenéd, csak ezt az egy sort cseréld az alábbira:

JS / ! és / kezdetű üzenetek elrejtése

if (/^[!/]/.test(text.trimStart())) return;

Ha minden parancsot is látni szeretnél, a szűrősort töröld vagy tedd megjegyzésbe:

JS / ha a parancsokat is meg szeretnéd jeleníteni

// Parancsszűrés kikapcsolva.
// if (text.trimStart().startsWith("!")) return;

A három parancsszűrési példa három alternatíva: csak egyet használj. A botlista és a parancsszűrő egymástól függetlenül működik. Módosítás után a JS fület mentsd el: Done → Save.

A névchipek színeinek szerkesztése

Hol? Open Editor → JS fül → a kód elején keresd: COLOR_PAIRS. Ezt a teljes blokkot kell szerkeszteni:

JS / COLOR_PAIRS

const COLOR_PAIRS = [
  ["#26ffe6", "#658bff"], // Türkiz → kék
  ["#ff70d5", "#b794ff"], // Rózsaszín → lila
  ["#eaff75", "#26ffe6"], // Lime → türkiz
  ["#bda2ff", "#70caff"], // Lila → világoskék
  ["#70caff", "#26ffe6"]  // Világoskék → türkiz
];

Mit jelent egy színpár?

["#26ffe6", "#658bff"]

Első szín: a név színe, a keret és a finom fény alapja, a gradiens egyik vége.
Második szín: a chip hátterének és a villámnak a másik gradiensszíne.
A háttér áttetszősége és a visszafogott fény automatikusan ezekből készül.

Hogyan váltakoznak?

Minden megjelenített új üzenet a következő színpárt kapja.
A lista végén újra az első következik.
Ugyanannak az embernek két üzenete is kaphat eltérő színt.
A korábbi üzenetek megtartják a kapott színüket.
Egyetlen színpár esetén minden névchip ugyanazt a párost használja.

A példagombok kódmintát másolnak; a botlistát és a chipszíneket a StreamElements JS-fülén kell szerkesztened. Ezek a példák nem írják át automatikusan a fenti teljes JS-kódot. Tarts meg egy saját mentést a módosított JS-ről.

A chipszínek módosítása nem változtatja meg az üzenet fehér szövegét és az alsó színes vonalat. A vonalhoz a CSS-ben a #bart-chat::after rész linear-gradient(...) színeit szerkeszd.

Mentés után

Done → Save, majd küldj új üzenetet a Twitch-chatedbe. Ha az OBS még a régi verziót mutatja, frissítsd a chat böngészőforrását. A kézi frissítés kiüríti a helyi chatelőzményt.

Források

A menüpontok neve a felület nyelvétől függhet. A letöltött útmutató és kódmásolás offline is használható; az élő chat és az emote-képek internetkapcsolatot igényelnek.

StreamElements · Widget és szerkesztő · Chatüzenetek és jelvények · Emote-katalógus

Neon nevek.Tiszta játéktér.