Mace Duel Mobile combineert mobiele besturing met servergestuurde online duels

Een duelgame die niet op vertrouwen in de browser leunt

Mace Duel Mobile is opgezet als een online 3D-duelgame voor telefoon én desktop. Twee spelers kunnen vanuit verschillende apparaten een besloten kamer betreden, elkaar bevechten met een knots en windladingen afvuren. De opzet bevat rondes, een score, een herkansing en controles op binnenkomende netwerkberichten.

De belangrijkste technische keuze: de browser bepaalt niet zelf wie geraakt is of hoeveel schade een aanval doet. De client stuurt alleen invoer door, zoals beweging, kijkrichting en het verzoek om een aanval uit te voeren. De server berekent vervolgens de beweging, botsingen, projectielen, gezondheid en winnaar. Dat beperkt de ruimte voor manipulatie door aangepaste clients.

Opzet: client, server en gedeelde spelregels

De client is gebouwd rond TypeScript, Vite en Three.js. Daar zitten de 3D-scène, interface, geluid, invoer voor touch, muis en toetsenbord, lokale voorspelling en het vloeiend weergeven van de andere speler.

De server gebruikt Node.js, TypeScript en WebSockets. Die beheert afzonderlijke rooms, draait een vaste simulatie op 30 Hz en is verantwoordelijk voor gevechtsregels, projectielen, scores en wedstrijdresultaten.

Gedeelde code bevat onder meer de netwerktypes, limieten en spelregels. Zo hanteren client en server dezelfde definities voor bijvoorbeeld aanvalskracht, spronghoogte en maximale gezondheid, terwijl alleen de server de definitieve uitkomst vaststelt.

Besturing voor mobiel én desktop

Voor telefoons is de besturing afgestemd op liggende weergave. De geplande bediening bestaat uit:

• een virtuele joystick links voor bewegen;
• slepen aan de rechterkant om rond te kijken;
• knoppen voor springen en sprinten;
• een knop voor de knotsaanval;
• een knop voor een windlading.

Dat vraagt om ondersteuning voor meerdere gelijktijdige aanrakingen: een speler moet bijvoorbeeld kunnen lopen, de camera draaien en een aanval starten zonder eerst een vinger los te laten. Pointer- en touchinvoer zijn juist voor zulke afzonderlijke aanrakingen geschikt. 1

Op desktop blijven toetsenbord en muis beschikbaar, zodat dezelfde game niet uitsluitend van touchbediening afhankelijk is.

Gevechten: normale klappen, valaanvallen en windladingen

De knotsaanval werkt alleen binnen een bepaald bereik en in een kijkhoek vóór de aanvaller. Een gewone treffer richt basisschade aan en geeft de tegenstander een duw. Wie tijdens een daling aanvalt, kan een sterkere valaanval uitvoeren: de extra schade hangt daarbij af van de valafstand, tot aan een ingestelde bovengrens.

Daarnaast hebben spelers een beperkte voorraad windladingen. Zo'n lading wordt als projectiel afgevuurd en veroorzaakt bij impact een explosie die spelers weg- en omhoogduwt. Ladingen laden na verloop van tijd opnieuw op.

De combinatie van verticale beweging, terugslag en valaanvallen maakt positie belangrijker dan alleen snel op een aanvalsknop drukken.

Netwerkmodel en eerlijkheid

De server werkt met private rooms voor maximaal twee spelers. Invoerberichten krijgen een volgnummer, zodat oude of onwaarschijnlijke berichten kunnen worden genegeerd. Berichten worden bovendien gevalideerd op structuur, type en bereik voordat ze in de simulatie terechtkomen.

Voor aanvallen kan de server een beperkte compensatie voor vertraging toepassen door de positie van een tegenstander kort terug te rekenen. Daarmee hoeft een treffer bij een kleine netwerkvertraging niet onterecht te missen, zonder dat de server onbeperkt terugspoelt.

WebSockets vormen hierbij de tweerichtingsverbinding tussen browser en gameserver. Bij een publieke uitrol hoort deze verbinding via beveiligde HTTPS- en WSS-verbindingen te lopen.

3D-prestaties: rekening houden met mobiele hardware

Een browsergame voor mobiel moet zuinig omgaan met renderwerk. Voor grote aantallen objecten met dezelfde geometrie en hetzelfde materiaal kan Three.js InstancedMesh gebruiken: een speciale meshvorm met ondersteuning voor instanced rendering. 2

Ook schaduwen vragen aandacht. In Three.js zijn shadow maps standaard niet ingeschakeld; ze kunnen dus als kwaliteitsoptie worden aangeboden of op minder krachtige apparaten worden uitgezet. 4

Dat is een praktische afweging voor een duelgame: een stabiele framerate en goed reagerende besturing zijn tijdens een online gevecht doorgaans waardevoller dan zware visuele effecten.

Samengevat

Mace Duel Mobile is geen model waarbij de browser zelf de wedstrijd beslist. Het concept kiest voor een servergestuurde simulatie, met mobiele multitouchbediening, twee spelers per room en gevechtsmechanieken rond knockback, hoogte en timing. Daarmee is het een bruikbare basis voor een competitieve 3D-browsergame die zowel op een telefoon als op een computer speelbaar moet zijn.