◉ VR-kurser
▶ Spela webbversionen

9. Desktopspelare, XR-kontroller och HUD

Målet

Ha en spelstatus men två inmatningssätt. Du behöver inte ha ett headset för att börja. På desktop används WASD, mus, Shift, Space, E och C/Ctrl för att huka. I Quest styr vänster spak förflyttning, höger spak stegvis svängning, vänster spak nedtryckt sprint, trigger skott och grip interaktion. Huka fysiskt i headsetet; WebXR följer huvudets höjd. Öppna main.js.

Från tangent till förflyttning

bindInputs() registrerar tangenttryck. keysDown minns vilka rörelsetangenter som fortfarande hålls nere. I varje bildruta räknar updateMovement(dt) fram riktning, normaliserar diagonal rörelse och multiplicerar med hastighet och förfluten tid. movePlayer() stoppar sedan förflyttning genom väggar. Läs funktionerna i den ordningen; börja inte med alla 700 rader på en gång.

Kameran är barn till spelarens rig. Att vrida rig kring Y ger horisontell svängning. På desktop ändras kamerans X-rotation när musen rör sig upp och ned. I Quest ger headsetet kamerans riktning, så musen används inte där. Kapitel 8 går igenom desktopkoden rad för rad och kapitel 10 gör samma sak för WebXR.

rig är spelarens rot. Kameran sitter i riggen. När ett XR-headset tar över ger WebXR kamerans huvudposition och riktning, medan riggen fortfarande används för förflyttning i världen. De fysiska kontrollerna kopplas via renderer.xr.getController() och identifieras med inputSource.handedness. Denna gemensamma scen betyder att en hittad nyckel är hittad oavsett om användaren spelar på desktop eller i Quest.

HUD

Desktop-HUD visar hälsa, nycklar, dödade monster, ammunition, magasin och tid. I VR ritas samma data på en canvas-textur som fästs vid vänster kontroll — ett enkelt handledsverktyg. Startinformationen visas på en 3D-panel i VR, eftersom HTML-startmenyn inte syns inne i en immersive WebXR-session. updateHud() läser från state; det är inte HUD:en som bestämmer hur mycket hälsa spelaren har.

En trygg övning

Ändra bara text i en HUD-etikett i din kopia och kontrollera att hälsa fortfarande minskar när ett monster träffar dig. Återställ sedan texten och leta upp raden som ändrar själva state.health. Det hjälper dig skilja på data och presentation.

Testa