17. HUD, startmeny och ljud

Målet

Ge spelaren rätt information vid rätt tidpunkt utan att samma text hårdkodas överallt. Läs HTML-strukturen i webbversionens index.html och updateHud(), paintPanel() samt updateAudio() i main.js.

Spelstatus är källan

HUD visar state.health, antal nycklar, kills, ammunition, reservmagasin och tid. Den räknar inte själv ut spelreglerna; den läser dem från state. När ett medkit plockas upp ändras hälsan först, därefter anropas updateHud(). Den ordningen förhindrar att text och spelstatus visar olika värden.

Desktop använder HTML-element som #health-label och #health-fill. VR kan inte förlita sig på samma HTML-lager i en immersive session. Därför ritas motsvarande information på en canvas som blir en CanvasTexture på vänster kontroll. Startinformation visas också på en 3D-panel i VR.

En läsbar hälsomätare

Hälsobalkens bredd sätts till ett procenttal mellan 0 och 100. Vid låg hälsa bör både färg och text visa förändringen; färg ensam kan vara svår att uppfatta. Testa i en mörk del av banan och på ett ljusstarkt golv, inte bara i kodredigeraren.

Ljud börjar efter en handling

Webbläsare stoppar normalt ljud som spelas utan användarhandling. Därför har spelet en startknapp och SFX/Music är på som standard men börjar först när spelaren startar. Skottljudet är en inspelning; bakgrundsmusiken är en separat loop. Monster, steg och hopp använder enklare Web Audio-toner. SFX-knappen ska tysta effekterna medan Music-knappen stoppar musikslingan.

playTone(..., worldPosition) skapar en stereopanering av monsterljud efter ungefärlig riktning. Den är en enkel tvåkanalseffekt, inte full HRTF-baserad rumslig ljudsimulering. Ljud ska hjälpa spelaren att lokalisera hot utan att göra VR-situationen förvirrande.

Gör själv

1. Starta med SFX på och Music på. Stäng av en i taget och kontrollera vad som tystnar.
2. Ta skada och ett medkit: kontrollera att både siffra och balk ändras.
3. I din kopia: ändra texten i en HUD-etikett och se att spelets regler fortfarande fungerar. Återställ texten.
4. Läs updateHud() och rita en pil från state.health till både desktopbalken och VR-panelens text.

Klart när: du kan beskriva varför HUD är en vy över spelstatus och varför ljudvalen måste göras innan eller under en spelomgång.