Et mobiltilpasset nettduellspill med serverstyrt kamp

Et duellspill laget med mobilen i sentrum

«Mace Duel Mobile» er et praktisk prosjektoppsett for et nettleserbasert 3D-duellspill som fungerer både på mobil og datamaskin. Teknologistakken er TypeScript, Vite og Three.js på klientsiden, og Node.js, TypeScript og ws på serversiden.

Spillerne kobler seg til fra hver sin enhet, oppretter eller blir med i et privat rom og spiller flere runder mot hverandre. Kampen har vanlige kølleslag, kraftigere fallangrep, vindprosjektiler, helse, poeng, omkamp og grunnleggende validering av meldinger.

Serveren avgjør hva som teller

Den viktigste designbeslutningen er at spillet bruker en autoritativ server. Klienten sender inndata – som bevegelse, blikkretning og angrepskommandoer – men sender ikke en pålitelig posisjon, skadeverdi eller helse.

Serveren oppdaterer i stedet bevegelse, prosjektiler, treff, knockback, helse og rundevinner med en fast takt på 30 Hz. Det gjør det langt vanskeligere å manipulere kampresultatet fra nettleseren.

Systemet inkluderer også enkel forsinkelseskompensasjon: Når et angrep vurderes, kan serveren kontrollere motstanderens nylige posisjonshistorikk innenfor et begrenset tidsvindu. Dermed blir nærkamp mindre urimelig for spillere med moderat nettverksforsinkelse.

Berøringskontroller for flere fingre

På mobil er kontrollene delt slik at spilleren kan gjøre flere ting samtidig:

• venstre virtuell styrespak for bevegelse
• dra på høyre side for kameraretning
• egne knapper for hopp og sprint
• egen knapp for kølleangrep
• egen knapp for vindladning

Dette passer godt med flerberøringsbaserte pekehendelser, der flere fingre kan registreres samtidig – nødvendig når spilleren for eksempel både løper, styrer kameraet og angriper. 1

Liggende skjermformat anbefales, men tastatur og mus er fortsatt støttet på PC.

Kampregler: fallangrep og vindladninger

Et vanlig kølleslag har kort rekkevidde og nedkjøling. Når en spiller angriper mens vedkommende faller fra tilstrekkelig høyde, blir angrepet et kraftigere fallangrep. Skaden øker med fallhøyden, men har en øvre grense.

Vindladninger fungerer som prosjektiler. De bruker en begrenset ressurs som lades opp over tid, og eksploderer når de treffer en spiller, bakken, arenaens grense eller når levetiden utløper. Eksplosjonen skyver spillere sideveis og oppover, og kan dermed skape muligheter for fallangrep.

En kamp vinnes ved å ta runder. I prosjektets regler kreves tre rundeseire for å vinne hele oppgjøret.

3D-grafikk med ytelse i tankene

På klientsiden står Three.js for 3D-scenen. For gjentatte elementer i arenaen kan InstancedMesh brukes, altså instansiert rendering av mange objekter som deler geometri og materiale. Det er en relevant teknikk for å holde antallet renderingskall nede. 2

Skygger kan slås av i innstillingene på enheter som trenger høyere bildefrekvens. Three.js har egen skyggekart-støtte, men skygger er ikke aktivert som standard og kan være en merkbar grafikkostnad. 4

Drift og tilkobling

For offentlig publisering bør spillet kjøre over HTTPS og sikre WebSocket-tilkoblinger. WebSocket-laget håndterer toveis kommunikasjon mellom spill og server, mens periodiske hjerteslag hjelper serveren å oppdage klienter som har koblet fra.

Rommet er begrenset til to spillere. Når begge markerer seg som klare, starter en kort nedtelling før runden begynner. Etter en avsluttet kamp kan begge velge omkamp; først når begge har godtatt, nullstilles kampen og rommet går tilbake til lobbyen.

Kort oppsummert

«Mace Duel Mobile» er et solid utgangspunkt for en liten nettbasert actionsatsing: mobilvennlige kontroller, 3D-grafikk, private rom og en server som har siste ord i kampen. Det viktigste tekniske prinsippet er enkelt: Klienten skal føles rask, men serveren skal avgjøre hva som faktisk skjedde.