Fekete tinta. Fehér kísértetek.

Szellemes chat.
Keskeny sáv. Saját hangulat.

Az alfaBART rajzolt, fekete-fehér, 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.

Rajzolt szellemek · macska · holdTwitch-emote-ok + jelvényekBot- és parancsszűrés

alfaBART / GHOST CHAT CONSOLE● HELYI BEMUTATÓ

alfaBARTGHOST DISPLAY / MODEL 02

Rajzolt horrorchat a képernyőd legaljá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 rajzolt panel, ág, szellem, macska és hold be van építve a CSS-be. Nincs külön képfeltöltés.
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_szellemes.
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 névtáblán	CSS → `--name-size`	+2 px; ellenőrizd a névtábla elférését
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
Figurák sorrendje	JS → `DECORATIONS`	ghost / cat / moon
Fehér név / szöveg	CSS → `--name-color` / `--text-color`	Hex színkódok
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, díszsorrend 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 panel, sem üzenet: üzenet nélkül ez a változat teljesen átlátszó. Küldj sima tesztüzenetet; ha az sem látszik, 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_szellemes → 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évtábla betűmérete	A fekete névtábla méretét is ellenőrizd nagyítás után.
`--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 az üzenetpanelek háttere átlátszó vásznon jelenik meg.

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.

Díszek, névtáblák és színek

A szellemes változatban nincsenek neon névchipek. A fekete névtábla az üzenet fölött van, fehér felirattal. A rajzok beépített SVG-képek a CSS-ben: nem kell fájlt feltölteni vagy képlinket megadni.

Szellem, macska, hold váltakozása

Hol? JS fül, a kód elején: DECORATIONS. A lista sorrendjében kapnak díszt az új üzenetek.

JS / díszek sorrendje

const DECORATIONS = ["ghost", "cat", "moon"];

Ha csak szellemeket szeretnél, ezt a teljes sort használd helyette:

const DECORATIONS = ["ghost"];

Díszek elrejtése

A figurákhoz ezt másold a CSS legvégére. A fekete panel és a névtábla megmarad.

CSS / figurák kikapcsolása

.chat-decor {
  display: none;
}

A bal oldali csupasz ág elrejtéséhez:

.chat-message::after {
  display: none;
}

Fehér szöveg, fehér név

CSS → :root. A két szín külön állítható; az alapdizájn fekete-fehér.

--text-color: #f4f4f6;
--name-color: #f6f5f7;

A rajzok mérete

A felbontás kiválasztása automatikusan beállítja a díszek méretarányát a CSS --art-unit változójával: 1440p-n 1px, 1080p-n 0.75px. Ezt alaphelyzetben ne módosítsd. Az üzenet- és névbetűméret külön szabályozható a fenti mezőkkel.

A panel, a névtábla és a díszek CSS-szelektorai: .chat-message::before (üzenetháttér), .chat-name (névtábla), .chat-decor (figura), .chat-message::after (ág). Az SVG-adatcímek hosszúak; teljes sorukat tartsd egyben.

A példák a megfelelő CSS- vagy JS-részlet cseréjére szolgálnak. A díszítési példák nem írják át automatikusan a fenti teljes JS-t. A méretmezők viszont azonnal frissítik a teljes CSS-t és mindkét előnézetet.

Mentés és teszt

Done → Save, majd új üzenet a Twitch-chatedbe. Ha OBS-ben a korábbi változat marad, frissítsd a chat böngészőforrását. A kézi frissítés kiüríti a helyi előzményt. Egy hosszabb üzenettel és a saját emote-oddal is tesztelj.

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

Szellemes chat.Keskeny sáv. Saját hangulat.