Tým Mozilla MozVR před několika týdny na GDC demonstroval otevřený standard WebVR a také A-Frame a lidi to zaujalo. někteří byli překvapeni, že web zvládá VR, někteří pravděpodobně si mysleli, že naše řada VR je menší (bylo to na míle daleko), a jiní viděli ovladač Xbox vedle náhlavních souprav pro VR a chtěli vědět, jak vůbec Microsoft Xbox ovladač + VR + Mac + prohlížeč pracoval. Z toho všeho jsem byl tak nadšený, že jsem na to skočil hned po návratu z GDC. Pojďme se podívat, jak to všechno funguje!
Krok 1: Ovladač ovladače Xbox (360Controller)
Projekt 360Controller poskytuje seznam vydaných ovladačů pro Mac pro Xbox, Xbox 360 a Xbox One. Pro podporu Xbox One je vyžadována nejnovější verze (0.15.0). Stáhněte a nainstalujte dodaný balíček a v aplikaci System Preferences uvidíte štítek a ikonu „Ovladače Xbox 360“. Tento panel předvoleb poskytuje informace o vybraném ovladači Xbox a také ovládací prvky pro přepsání nastavení:
Aby počítač Mac detekoval ovladač, musíte ovladač Xbox připojit přes USB – bezdrátové připojení nebude fungovat. Stiskněte tlačítka a sledujte, jak se každé tlačítko v aplikaci rozsvítí. Můžete dokonce stisknout levé a pravé tlačítko spouště a ovladač Xbox se zatřese. Pevné!
Krok 2: Gamepad API
JavaScript GamePad API poskytuje přístup k ovladačům v prohlížeči. Začněte voláním `navigator.getGamepads()`, abyste získali seznam připojených gamepadů:
var gpads = navigator.getGamepads(); // Array[Gamepad]
Uživatel může připojit zařízení během hry (nebo kdykoli v tomto případě), takže můžete ke zjištění připojení a odpojení použít dva praktické posluchače událostí:
// Listen for the connection
window.addEventListener('gamepadconnected', function(e) {
var gpad = navigator.getGamepads()[e.gamepad.index];
// Start the game / animation
});
// Oh nooooo, disconnected
window.addEventListener('gamepaddisconnected', function(e) {
// Pause the game
});
A GamePad objekt poskytuje následující informace:
Gamepad {
axes: Array[6],
buttons: Array[15],
connected: true,
id: "45e-2d1-Xbox One Wired Controller",
index: 0,
mapping: "",
timestamp: 5142195.495
}
Zajímavá je vlastnost buttons:pole GamepadButton objektů, z nichž každý má logickou hodnotu pressed hodnoty popisující, zda je tlačítko právě stisknuto. Pravděpodobně jste doufali (stejně jako já), že bude existovat posluchač událostí pro stisknutí tlačítek, ale není – musíte provést kontrolu stisknutí tlačítka ve smyčce vaší hry (requestAnimationFrame ). Pravděpodobně se to dělá tak, aby zpoždění, latence atd. nezpůsobily zmatek mezi posluchačem a stavem hry. Zde je rychlý příklad:
GamepadButton {
pressed: false,
value: 0
}
Další příklady stisknutí tlačítka a reakce můžete vidět na MDN. Můžete si také vyzkoušet HTML5 Gamepad Tester a experimentovat se stiskem tlačítka a stavem osy pro jakýkoli daný ovladač.
Krok 3: Hra:Tanx
Hra představená s VR + Xbox ovladačem + Gamepad API byla speciální 3D sestavení Tanx od PlayCanvas. Vizuál byl úžasný a lidé milovali hru ve vylepšeném 3D stavu. Omlouvám se, v tuto chvíli nemám odkaz na veřejnou verzi!
Tady to máte – svůj ovladač Xbox můžete připojit k Macu a hrát hry HTML5, které podporují rozhraní Gamepad API, se speciálním ovladačem a trochou magie JavaScriptu!