Keď pripojíte ovládač, stláčate tlačidlá, pohybujete paličkami, stláčate spúšte... a ako vývojár nič z toho nevidíte. Prehliadač to, samozrejme, zachytáva, ale pokiaľ neprihlasujete čísla do konzoly, je to neviditeľné. To je bolesť hlavy s rozhraním Gamepad API. Existuje už roky a v skutočnosti je dosť silný. Môžete čítať tlačidlá, palice, spúšte, diela. Ale väčšina ľudí sa toho nedotkne. prečo? Pretože neexistuje žiadna spätná väzba. Žiadny panel v nástrojoch pre vývojárov. Neexistuje jasný spôsob, ako zistiť, či ovládač vôbec robí to, čo si myslíte. Je to ako lietanie naslepo. To ma dosť narušilo, aby som si vytvoril malý nástroj: Gamepad Cascade Debugger. Namiesto pozerania na výstup konzoly získate živý interaktívny pohľad na ovládač. Stlačte niečo a na obrazovke to reaguje. A s kaskádovými vrstvami CSS zostávajú štýly organizované, takže je jednoduchšie ladiť. V tomto príspevku vám ukážem, prečo je ladenie ovládačov taká bolesť, ako to CSS pomáha vyčistiť a ako si môžete vytvoriť znovu použiteľný vizuálny debugger pre svoje vlastné projekty.
Aj keď ich všetky dokážete prihlásiť, rýchlo skončíte s nečitateľným spamom na konzole. Napríklad: [0,0,1,0,0,0,5,0,...] [0,0,0,0,1,0,0,...] [0,0,1,0,0,0,0,...]
Môžete povedať, aké tlačidlo bolo stlačené? Možno, ale až po namáhaní očí a vynechaní niekoľkých vstupov. Takže nie, ladenie nie je jednoduché, pokiaľ ide o čítanie vstupov. Problém 3: Nedostatok štruktúry Aj keď dáte dokopy rýchly vizualizér, štýly sa môžu rýchlo zamotať. Predvolené, aktívne a ladiace stavy sa môžu prekrývať a bez jasnej štruktúry sa váš CSS stáva krehkým a ťažko sa rozširuje. Pomôcť môžu kaskádové vrstvy CSS. Zoskupujú štýly do „vrstiev“, ktoré sú zoradené podľa priority, takže prestanete bojovať so špecifickosťou a hádať: „Prečo sa môj štýl ladenia nezobrazuje?“ Namiesto toho máte oddelené obavy:
Základňa: Štandardný, počiatočný vzhľad ovládača. Aktívne: Zvýraznenie pre stlačené tlačidlá a posunuté páčky. Ladenie: Prekrytia pre vývojárov (napr. číselné údaje, sprievodcovia atď.).
Ak by sme mali definovať vrstvy v CSS podľa tohto, mali by sme: /* od najnižšej po najvyššiu prioritu */ @layer base, active, debug;
@layer base { /* ... */ }
@layer active { /* ... */ }
@layer debug { /* ... */ }
Pretože každá vrstva sa skladá predvídateľne, vždy viete, ktoré pravidlá vyhrávajú. Vďaka tejto predvídateľnosti je ladenie nielen jednoduchšie, ale aj zvládnuteľné. Pokryli sme problém (neviditeľný, chaotický vstup) a prístup (vizuálny debugger vytvorený pomocou kaskádových vrstiev). Teraz prejdeme krok za krokom procesom zostavenia ladiaceho nástroja. Koncept ladiaceho nástroja Najjednoduchší spôsob, ako zviditeľniť skrytý vstup, je jednoducho ho nakresliť na obrazovku. To robí tento debugger. Tlačidlá, spúšťače a pákové ovládače majú vizuálny vzhľad.
Stlačte A: Rozsvieti sa kruh. Štuchnutie palicou: Kruh sa posúva. Stlačte spúšť do polovice: Pruh sa naplní do polovice.
Teraz sa nepozeráte na 0 a 1, ale v skutočnosti sledujete reakciu ovládača naživo. Samozrejme, akonáhle začnete hromadiť stavy, ako je predvolený, stlačený, informácie o ladení, možno dokonca režim nahrávania, CSS sa začne zväčšovať a zložitejšie. Tu prichádzajú vhod kaskádové vrstvy. Tu je skrátený príklad: @layer base { .tlačidlo { pozadie: #222; hraničný polomer: 50 %; šírka: 40px; výška: 40px; } }
@layer active { .tlačidlo.stlačené { pozadie: #0f0; /* jasne zelená */ } }
@layer debug { .button::after { content: attr(data-value); veľkosť písma: 12px; farba: #fff; } }
Na poradí vrstiev záleží: základňa → aktívna → ladiť.
základňa nakreslí ovládač. aktívne zvláda stlačené stavy. debug hodí na prekrytia.
Rozbiť to takto znamená, že nebojujete proti zvláštnym vojnám. Každá vrstva má svoje miesto a vždy viete, čo vyhráva. Budovanie It Out Najprv dáme niečo na obrazovku. Nemusí to vyzerať dobre – len musí existovať, aby sme mali s čím pracovať.
Gamepad Cascade Debugger
To sú doslova len krabice. Zatiaľ to nie je vzrušujúce, ale umožňuje nám to neskôr uchopiť pomocou CSS a JavaScriptu. Dobre, používam tu kaskádové vrstvy, pretože to udržuje veci organizované, keď pridáte ďalšie stavy. Tu je hrubý prechod:
/* ==================================== NASTAVENIE KASKÁDOVÝCH VRSTVENÍ Na objednávke záleží: základ → aktívny → ladiť ==================================== */
/* Definujte poradie vrstiev vopred */ @layer base, active, debug;
/* Vrstva 1: Základné štýly - predvolený vzhľad */ @layer base { .tlačidlo { pozadie: #333; hraničný polomer: 50 %; šírka: 70px; výška: 70px; displej: flex; zdôvodniť-obsah: stred; align-items: center; }
.pause { šírka: 20px; výška: 70px; pozadie: #333; displej: inline-block; } }
/* Vrstva 2: Aktívne stavy - spracováva stlačené tlačidlá */ @layer active { .button.active { pozadie: #0f0; /* Jasne zelená po stlačení */ transformácia: mierka(1.1); /* Mierne zväčší tlačidlo */ }
.pause.active { pozadie: #0f0; transformácia: mierkaY(1.1); /* Pri stlačení sa vertikálne roztiahne */ } }
/* Vrstva 3: Ladenie prekrytí – informácie pre vývojárov */ @layer debug { .button::after { content: attr(data-value); /* Zobrazí číselnú hodnotu */ veľkosť písma: 12px; farba: #fff; } }
Krása tohto prístupu spočíva v tom, že každá vrstva má jasný účel. Základná vrstva nemôže nikdy prepísať aktívnu vrstvu a aktívna vrstva nikdy nemôže prepísať ladenie, bez ohľadu na špecifickosť. To eliminuje vojny špecifickosti CSS, ktoré zvyčajne trápia ladiace nástroje. Teraz to vyzerá, že nejaké zhluky sedia na tmavom pozadí. Úprimne povedané, nie príliš zlé.
Pridanie JavaScriptu Čas JavaScript. Toto je miesto, kde ovládač skutočne niečo robí. Vytvoríme to krok za krokom. Krok 1: Nastavte správu stavu Najprv potrebujeme premenné na sledovanie stavu ladiaceho nástroja: // ==================================== // MANAŽMENT ŠTÁTU // ====================================
nechať bežať = nepravda; // Sleduje, či je debugger aktívny nech rafId; // Uloží ID requestAnimationFrame na zrušenie
Tieto premenné riadia slučku animácie, ktorá nepretržite číta vstup gamepadu. Krok 2: Získajte referencie DOM Ďalej získame odkazy na všetky prvky HTML, ktoré budeme aktualizovať: // ==================================== // ODKAZY NA PRVKY DOM // ====================================
const btnA = document.getElementById("btn-a"); const btnB = document.getElementById("btn-b"); const btnX = document.getElementById("btn-x"); const pause1 = document.getElementById("pause1"); const pause2 = document.getElementById("pause2"); const status = document.getElementById("status");
Ukladanie týchto referencií dopredu je efektívnejšie ako opakované dopytovanie DOM. Krok 3: Pridajte záložnú klávesnicu Pri testovaní bez fyzického ovládača namapujeme klávesy klávesnice na tlačidlá: // ==================================== // FALLBACK KEYBOARD (pre testovanie bez ovládača) // ====================================
const keyMap = { "a": btnA, "b": btnB, "x": btnX, "p": [pauza1, pauza2] // kláves 'p' ovláda oba pruhy pauzy };
To nám umožňuje otestovať používateľské rozhranie stlačením klávesov na klávesnici. Krok 4: Vytvorte hlavnú aktualizačnú slučku Tu sa odohráva kúzlo. Táto funkcia beží nepretržite a číta stav gamepadu: // ==================================== // HLAVNÁ SLUČKA AKTUALIZÁCIÍ GAMEPADU // ====================================
function updateGamepad() { // Získajte všetky pripojené gamepady const gamepads = navigator.getGamepads(); ak sa (!gamepady) vrátia;
// Použite prvý pripojený gamepad const gp = gamepady[0];
if (gp) { // Aktualizujte stavy tlačidiel prepnutím triedy "active". btnA.classList.toggle("aktívne", gp.tlačidlá[0].stlačené); btnB.classList.toggle("aktívne", gp.tlačidlá[1].stlačené); btnX.classList.toggle("aktívne", gp.tlačidlá[2].stlačené);
// Ovládajte tlačidlo pozastavenia (index tlačidla 9 na väčšine ovládačov) const pauzaStlačená = gp.tlačidlá[9].stlačené; pause1.classList.toggle("active", pausePressed); pause2.classList.toggle("active", pausePressed);
// Vytvorte zoznam aktuálne stlačených tlačidiel pre zobrazenie stavu nechať stlačené = []; gp.buttons.forEach((btn, i) => { ak (btn.stlačený)stlačené.push("Tlačidlo " + i); });
// Aktualizácia textu stavu pri stlačení ľubovoľného tlačidla if (stlačená dĺžka > 0) { status.textContent = "Stlačené: " + stlačené.join(", "); } }
// Pokračujte v slučke, ak je spustený debugger if (beží) { rafId = requestAnimationFrame(updateGamepad); } }
Metóda classList.toggle() pridáva alebo odstraňuje aktívnu triedu podľa toho, či je tlačidlo stlačené, čím sa spúšťajú naše štýly vrstiev CSS. Krok 5: Spravujte udalosti klávesnice Pomocou týchto poslucháčov udalostí funguje záložná klávesnica: // ==================================== // OBSLUHA UDALOSTÍ NA KLÁVESNICE // ====================================
document.addEventListener("keydown", (e) => { if (keyMap[e.key]) { // Spracovanie jedného alebo viacerých prvkov if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.add("active")); } inak { keyMap[e.key].classList.add("active"); } status.textContent = "Stlačený kláves: " + e.key.toUpperCase(); } });
document.addEventListener("keyup", (e) => { if (keyMap[e.key]) { // Odstránenie aktívneho stavu po uvoľnení kľúča if (Array.isArray(keyMap[e.key])) { keyMap[e.key].forEach(el => el.classList.remove("active")); } inak { keyMap[e.key].classList.remove("active"); } status.textContent = "Kľúč uvoľnený: " + e.key.toUpperCase(); } });
Krok 6: Pridajte ovládanie Štart/Stop Nakoniec potrebujeme spôsob, ako zapnúť a vypnúť debugger: // ==================================== // ZAPNUTIE/VYPNUTIE DEBUGGERU // ====================================
document.getElementById("toggle").addEventListener("click", () => { beh = !beh; // Prevrátiť spustený stav
if (beží) { status.textContent = "Debugger beží..."; updateGamepad(); // Spustenie cyklu aktualizácie } inak { status.textContent = "Debugger neaktívny"; cancelAnimationFrame(rafId); // Zastavenie cyklu } });
Takže áno, stlačte tlačidlo a rozsvieti sa. Zatlačte na páčku a pohne sa. to je všetko. Ešte jedna vec: surové hodnoty. Niekedy chcete vidieť len čísla, nie svetlá.
V tejto fáze by ste mali vidieť:
Jednoduchý ovládač na obrazovke, Tlačidlá, ktoré reagujú pri interakcii s nimi a Voliteľný údaj ladenia zobrazujúci indexy stlačeného tlačidla.
Aby to nebolo tak abstraktné, tu je rýchla ukážka ovládača na obrazovke, ktorý reaguje v reálnom čase:
Teraz stlačením Spustiť nahrávanie zaznamenáte všetko, kým nestlačíte Zastaviť nahrávanie. 2. Export údajov do CSV/JSON Keď budeme mať denník, chceme ho uložiť.
Krok 1: Vytvorte pomocníka na stiahnutie Najprv potrebujeme pomocnú funkciu, ktorá spracuje sťahovanie súborov v prehliadači: // ==================================== // POMOCNÍK NA STIAHNUTIE SÚBORU // ====================================
function downloadFile(názov súboru, obsah, typ = "text/obyčajný") { // Vytvorenie objektu blob z obsahu const blob = new Blob([obsah], { typ }); const url = URL.createObjectURL(blob);
// Vytvorte dočasný odkaz na stiahnutie a kliknite naň const a = document.createElement("a"); a.href = url; a.download = názov súboru; a.click();
// Vyčistite adresu URL objektu po stiahnutí setTimeout(() => URL.revokeObjectURL(url), 100); }
Táto funkcia funguje tak, že z vašich údajov vytvoríte objekt Blob (binárny veľký objekt), vygenerujete preň dočasnú adresu URL a programovo kliknete na odkaz na stiahnutie. Čistenie zaisťuje, že neunikne pamäť. Krok 2: Spravte export JSON JSON je ideálny na zachovanie kompletnej dátovej štruktúry:
// ==================================== // EXPORTOVAŤ AKO JSON // ====================================
document.getElementById("export-json").addEventListener("click", () => { // Skontrolujte, či je niečo na export if (!frames.length) { console.warn("Žiadna nahrávka nie je k dispozícii na export."); návrat; }
// Vytvorenie užitočného zaťaženia s metadátami a rámcami const payload = { createdAt: new Date().toISOString(), rámy };
// Stiahnuť vo formáte JSON stiahnuť súbor( "gamepad-log.json", JSON.stringify(úžitkové zaťaženie, null, 2), "application/json" ); });
Formát JSON zachováva všetko štruktúrované a ľahko analyzovateľné, vďaka čomu je ideálny na načítanie späť do nástrojov pre vývojárov alebo zdieľanie so spoluhráčmi. Krok 3: Spravte export CSV Pre exporty CSV musíme hierarchické údaje zlúčiť do riadkov a stĺpcov:
//==================================== // EXPORTOVAŤ AKO CSV // ====================================
document.getElementById("export-csv").addEventListener("click", () => { // Skontrolujte, či je niečo na export if (!frames.length) { console.warn("Žiadna nahrávka nie je k dispozícii na export."); návrat; }
// Vytvorenie riadku hlavičky CSV (stĺpce pre časovú pečiatku, všetky tlačidlá, všetky osi) const headerButtons = frames[0].buttons.map((_, i) => btn${i}); const headerAxes = frames[0].axes.map((_, i) => axis${i}); const header = ["t", ...headerButtons, ...headerAxes].join(",") + "\n";
// Vytvorenie dátových riadkov CSV const rows = frames.map(f => { const btnVals = f.buttons.map(b => b.value); return [f.t, ...btnVals, ...f.axes].join(","); }).join("\n");
// Stiahnuť ako CSV downloadFile("gamepad-log.csv", hlavička + riadky, "text/csv"); });
CSV je skvelý na analýzu údajov, pretože sa otvára priamo v Exceli alebo Tabuľkách Google a umožňuje vám vizuálne vytvárať grafy, filtrovať údaje alebo rozpoznať vzory. Teraz, keď sú tlačidlá exportu zadané, na paneli uvidíte dve nové možnosti: Exportovať JSON a Exportovať CSV. JSON je fajn, ak chcete vrátiť surový protokol späť do svojich vývojárskych nástrojov alebo sa pohrabať v štruktúre. Na druhej strane CSV sa otvára priamo do Excelu alebo Tabuliek Google, takže môžete vytvárať grafy, filtrovať alebo porovnávať vstupy. Nasledujúci obrázok ukazuje, ako panel vyzerá s týmito dodatočnými ovládacími prvkami.
3. Snapshot System Niekedy nepotrebujete úplnú nahrávku, len rýchlu „snímku obrazovky“ stavov vstupu. Tu pomáha tlačidlo Urobiť snímku.
A JavaScript:
// ==================================== // ZOBRAZTE SNÍMKU // ====================================
document.getElementById("snapshot").addEventListener("click", () => { // Získajte všetky pripojené gamepady const pads = navigator.getGamepads(); const activePad = [];
// Prejdite a zaznamenajte stav každého pripojeného gamepadu for (const gp of pad) { ak (!gp) pokračovať; // Preskočiť prázdne miesta
activePads.push({ id: gp.id, // Názov/model ovládača časová pečiatka: performance.now(), tlačidlá: gp.buttons.map(b => ({ lisované: b.lisované, hodnota: b.hodnota })), osi: [...gp.axes] }); }
// Skontrolujte, či sa nenašli nejaké gamepady if (!activePads.length) { console.warn("Na vytvorenie snímky nie sú pripojené žiadne gamepady."); alert("Nebol zistený žiadny ovládač!"); návrat; }
// Zapíšte sa a upozornite používateľa console.log("Snapshot:", activePad); alert(Snímka bola urobená! Zachytené ovládače ${activePads.length}.); });
Snímky zmrazia presný stav vášho ovládača v jednom okamihu. 4. Opakované prehrávanie Ghost Input Teraz pre tú zábavu: prehratie vstupu duchov. Toto vezme denník a prehrá ho vizuálne, ako keby ovládač používal fantómový prehrávač.
JavaScript na prehratie: // ==================================== // PREHRAŤ DUCHA // ====================================
document.getElementById("replay").addEventListener("click", () => { // Uistite sa, že máme nahrávku na prehratie if (!frames.length) { alert("Žiadny záznam na prehratie!"); návrat; }
console.log("Spúšťa sa prehrávanie duchov...");
// Načasovanie stopy pre synchronizované prehrávanie nech startTime = performance.now(); nech frameIndex = 0;
// Opakované prehrávanie animačnej slučky function step() { const now = performance.now(); const elapsed = now - startTime;
// Spracovať všetky snímky, ktoré sa už mali vyskytnúť while (frameIndex < frames.length && frames[frameIndex].t <= elapsed) { const frame = frames[frameIndex];
// Aktualizácia používateľského rozhrania pomocou zaznamenaných stavov tlačidiel btnA.classList.toggle("aktívne", rám.tlačidlá[0].stlačené); btnB.classList.toggle("aktívne", rám.tlačidlá[1].stlačené); btnX.classList.toggle("aktívne", rám.tlačidlá[2].stlačené);
// Aktualizácia zobrazenia stavu nechať stlačené = []; frame.buttons.forEach((btn, i) => { if (btn.pressed) pressed.push("Button " + i); }); if (stlačená dĺžka > 0) { status.textContent = "Duch: " + pressed.join(", "); }
frameIndex++; }
// Pokračujte v slučke, ak existuje viac snímok if (frameIndex < frames.length) { requestAnimationFrame(krok); } inak { console.log("Prehraťdokončené."); status.textContent = "Prehrávanie dokončené"; } }
// Spustite prehrávanie krok (); });
Aby bolo ladenie trochu praktickejšie, pridal som prehrávanie duchov. Po nahraní relácie môžete stlačiť tlačidlo Replay a sledovať, ako to používateľské rozhranie prehráva, takmer ako fantómový hráč spúšťa podložku. Na tento účel sa na paneli zobrazí nové tlačidlo Replay Ghost.
Stlačte Record, trochu sa pomotajte s ovládačom, zastavte a potom znova prehrajte. Používateľské rozhranie iba odráža všetko, čo ste urobili, ako duch sledujúci vaše vstupy. Prečo sa obťažovať týmito doplnkami?
Nahrávanie/export uľahčuje testerom ukázať, čo sa presne stalo. Snímky na chvíľu zamrznú, čo je veľmi užitočné, keď naháňate neobvyklé chyby. Ghost replay je skvelý pre návody, kontroly dostupnosti alebo len porovnávanie nastavení ovládania vedľa seba.
V tomto bode to už nie je len úhľadná ukážka, ale niečo, čo by ste mohli skutočne zaviesť. Prípady použitia v skutočnom svete Teraz máme tento debugger, ktorý dokáže veľa. Zobrazuje živé vstupy, zaznamenáva denníky, exportuje ich a dokonca prehráva obsah. Ale skutočná otázka znie: koho to vlastne zaujíma? Pre koho je to užitočné? Vývojári hier Ovládače sú súčasťou práce, ale ich ladenie? Zvyčajne bolesť. Predstavte si, že testujete kombináciu bojovej hry, napríklad ↓ → + úder. Namiesto toho, aby ste sa modlili, ste to dvakrát stlačili rovnakým spôsobom, raz to nahrali a prehrali. Hotovo. Alebo si vymeníte protokoly JSON so spoluhráčom, aby ste skontrolovali, či váš kód pre viacerých hráčov na ich počítači reaguje rovnako. To je obrovské. Odborníci na prístupnosť Tento je môjmu srdcu blízky. Nie každý hrá so „štandardným“ ovládačom. Adaptívne ovládače niekedy vydávajú zvláštne signály. Pomocou tohto nástroja môžete presne vidieť, čo sa deje. Učitelia, výskumníci, ktokoľvek. Môžu zachytávať protokoly, porovnávať ich alebo prehrávať vstupy vedľa seba. Zrazu sa neviditeľné veci stanú zrejmými. Testovanie zabezpečenia kvality Testeri si zvyčajne píšu poznámky ako: „Stlačil som tlačidlá a rozbilo sa to“. Nie veľmi užitočné. Teraz? Môžu zachytiť presné lisy, exportovať protokol a odoslať ho. Žiadne hádanie. Pedagógovia Ak vytvárate návody alebo videá na YouTube, prehrávanie duchov je zlato. Môžete doslova povedať: „Tu je to, čo som urobil s ovládačom“, zatiaľ čo používateľské rozhranie ukazuje, že sa to deje. Robí vysvetlenia oveľa jasnejšie. Beyond Games A áno, nie je to len o hrách. Ľudia používali ovládače pre roboty, umelecké projekty a rozhrania dostupnosti. Zakaždým ten istý problém: čo vlastne prehliadač vidí? S týmto nemusíte hádať. Záver Ladenie vstupu ovládača bolo vždy ako lietanie naslepo. Na rozdiel od DOM alebo CSS tu nie je vstavaný inšpektor pre gamepady; sú to len surové čísla v konzole, ktoré sa ľahko stratia v hluku. S niekoľkými stovkami riadkov HTML, CSS a JavaScript sme vytvorili niečo iné:
Vizuálny debugger, ktorý zviditeľňuje neviditeľné vstupy. Vrstvený CSS systém, ktorý udržuje používateľské rozhranie čisté a laditeľné. Súbor vylepšení (nahrávanie, exportovanie, snímky, prehrávanie duchov), ktoré ho povyšujú z ukážky na vývojársky nástroj.
Tento projekt ukazuje, ako ďaleko môžete zájsť zmiešaním sily webovej platformy s trochou kreativity v kaskádových vrstvách CSS. Nástroj, ktorý som práve vysvetlil, je open-source. Môžete naklonovať úložisko GitHub a vyskúšať si to sami. Čo je však dôležitejšie, môžete si ho vyrobiť podľa seba. Pridajte svoje vlastné vrstvy. Vytvorte si vlastnú logiku prehrávania. Integrujte ho do svojho herného prototypu. Alebo ho dokonca použiť spôsobmi, ktoré som si nepredstavoval. Na výučbu, dostupnosť alebo analýzu údajov. Na konci dňa to nie je len o ladení gamepadov. Ide o to posvietiť si na skryté vstupy a poskytnúť vývojárom sebadôveru pri práci s hardvérom, ktorý web stále úplne nepozná. Takže zapojte ovládač, otvorte editor a začnite experimentovať. Možno budete prekvapení, čo váš prehliadač a váš CSS skutočne dokážu.
