Mace Duel Mobile: webbaserad 3D-duell med mobilkontroller och privat multiplayer

Ett upplägg för snabba dueller i webbläsaren

Mace Duel Mobile är ett projektupplägg för ett 3D-duellspel som kan köras i webbläsaren på både mobil och dator. Tanken är två spelare i ett privat rum, med fokus på korta matcher, närstrid med en mace-klubba, luftburna fallattacker och vindladdningar som kan kasta motståndaren ur position.

Klienten använder TypeScript, Vite och Three.js. På serversidan används Node.js, TypeScript och ws för WebSocket-kommunikation. Arkitekturen är byggd för att servern ska vara den auktoritativa parten: klienten skickar inmatning och kommandon, men inte en betrodd position, skada eller hälsopoäng.

Det innebär att servern avgör bland annat:

• spelarens rörelse och fysik
• om en attack träffar
• skada från vanliga slag och fallattacker
• projektiler och vindexplosioner
• rundor, poäng och matchvinnare

Mobilstyrning utan att ge upp datorstöd

För mobilspelaren är gränssnittet tänkt att fungera i liggande läge med en virtuell styrspak till vänster och kamerakontroll genom att dra på höger sida av skärmen. Därutöver finns separata knappar för hopp, sprint, mace-attack och vindladdning.

Stödet för flera samtidiga pekare är centralt: spelaren ska exempelvis kunna röra sig med vänster tumme, vrida kameran med höger och ändå trycka på en attackknapp. Pointer Events är avsedda för denna typ av flerpekarsinteraktion på pekskärmar. 1

Mus och tangentbord finns kvar som alternativ för spel på dator.

Matchreglerna i korthet

Varje spelare startar med 100 hälsopoäng. En vanlig träff med mace-klubban skadar motståndaren, medan en attack under ett tillräckligt långt fall får högre skada och kraftigare knuff. Det skapar ett tydligt risk–belöningsmoment: en spelare kan använda höjd och rörelse för en hård attack, men måste också tajma landning och räckvidd.

Vindladdningar fungerar som projektiler. De har begränsat antal laddningar, laddas upp över tid och exploderar vid träff eller när de når marken. Explosionen orsakar ingen direkt hälsoskada i upplägget, men skjuter spelare i sidled och uppåt – vilket kan öppna för fallattacker.

Matchen spelas i rundor. En runda har en tidsgräns på 120 sekunder, och den spelare som först tar tre rundor vinner matchen. Om tiden går ut jämförs återstående hälsa.

Varför servern ska räkna spelet

I ett spel mellan två nätanslutna klienter räcker det inte att låta varje webbläsare rapportera sin egen position och sina egna träffar. I det här upplägget skickar klienten i stället styrdata, kamerariktning och kommandon som attack eller vindladdning. Servern simulerar sedan spelet med en fast takt på 30 uppdateringar per sekund.

För att göra närstrid mer rättvis vid nätverksfördröjning sparar servern en kort positionshistorik för spelarna. När en attack kontrolleras kan motståndarens position bedömas mot ett nyligt läge, upp till 150 millisekunder tillbaka. Det är en begränsad form av laggkompensation, avsedd att minska känslan av att tydliga träffar missar på grund av fördröjning.

Projektet innehåller även grundläggande skydd för inkommande meddelanden: storleksgränser, typkontroll, begränsning av värden och kontroll av inmatningssekvenser.

Grafik som tar hänsyn till mobilprestanda

På grafiksidan är Three.js ett naturligt val för en lättare 3D-scen i webbläsaren. För upprepade objekt, exempelvis delar av marken eller dekorativa block, kan InstancedMesh användas. Det är Three.js särskilda mesh-variant för instansrendering. 2

Skuggor bör vara en inställning snarare än ett krav. Three.js har ett separat shadowMap-gränssnitt i renderaren, och skuggor är avstängda som standard. 4 För en mobilanpassad version är det därför rimligt att kunna slå av dynamiska skuggor för att prioritera stabilare bildfrekvens.

Drift: WebSocket, privata rum och säker anslutning

Varje match får ett privat rum med en kort kod. När båda spelarna markerar sig som redo startar en nedräkning och därefter rundan. Om en spelare lämnar under en aktiv match kan den kvarvarande spelaren utses till vinnare.

Vid publik driftsättning bör spelet köras över HTTPS och använda säkra WebSocket-anslutningar, WSS. En omvänd proxy behöver också vara korrekt inställd för WebSocket-uppgraderingen och anslutningen bör hållas vid liv med exempelvis heartbeat-logik.

Sammanfattat är Mace Duel Mobile ett avgränsat men komplett spelupplägg: snabb tvåspelarmultiplayer, mobilanpassad styrning, serverstyrd matchlogik och grafik som kan skalas efter enhetens kapacitet.