Mace Duel Mobile tuo nuijataistelun selaimeen kahdelle pelaajalle

Selainareena kahdelle pelaajalle

Mace Duel Mobile on selainpeliprojekti, jossa kaksi pelaajaa kohtaa yksityisessä huoneessa nuija-aseilla. Toteutus käyttää asiakkaassa TypeScriptiä, Viteä ja Three.js:ää sekä palvelimella Node.js:ää, TypeScriptiä ja ws-WebSocket-kirjastoa.

Peli on suunniteltu toimimaan sekä puhelimessa että tietokoneella. Pelaajat voivat liittyä samaan kuusimerkkiseen huonekoodiin, valmistautua otteluun ja pelata useita eriä. Ottelu päättyy, kun toinen saavuttaa kolme erävoittoa.

Mitä pelissä tapahtuu?

Taistelu perustuu tavallisiin nuijaiskuihin, ilmasta tehtäviin voimakkaampiin pudotusiskuihin ja tuulipanoksiin. Tuulipanokset ammutaan ammuksina, jotka räjähtäessään nostavat ja työntävät lähellä olevia pelaajia. Tämä voi avata mahdollisuuden pudotusiskuun.

Järjestelmässä on myös:

• terveys, osumat ja takaisintyöntö
• hyppy ja juoksu
• kolmen tuulipanoksen varasto, joka latautuu ajan kuluessa
• aloitussuojus syntymisen jälkeen
• eräkohtainen aikaraja
• uusintaottelutoiminto ottelun päätyttyä

Miksi palvelin ratkaisee osumat?

Tärkein tekninen ratkaisu on palvelinvaltainen pelilogiikka. Selain ei lähetä palvelimelle luotettavaksi tarkoitettuja terveys-, vahinko- tai sijaintiarvoja. Sen sijaan se lähettää vain pelaajan syötteet, katsesuunnan ja hyökkäyskomennot.

Palvelin simuloi liikettä ja taistelua 30 kertaa sekunnissa, laskee osumat, vahingon, ammukset ja ottelun tuloksen. Näin asiakkaan muokkaaminen ei suoraan mahdollista esimerkiksi oman terveyden tai vahingon muuttamista.

Osumien tuntumaa pyritään parantamaan rajoitetulla viivekompensaatiolla: palvelin voi tarkastella vastustajan lyhyttä sijaintihistoriaa hyökkääjän yhteysviiveen perusteella. Tämä auttaa pitämään lähitaistelun reilumpana eri yhteyksillä, mutta aikasiirrolle on asetettu enimmäisraja.

Ohjaus on tehty myös puhelimelle

Mobiilikäytössä vasemman reunan virtuaaliohjain liikuttaa hahmoa ja oikean puolen vetoliike kääntää kameraa. Erilliset painikkeet ovat hypylle, juoksulle, nuijaiskulle ja tuulipanokselle. Vaakasuuntainen käyttö on suositeltu.

Monikosketus on tässä tärkeää, koska pelaajan täytyy pystyä esimerkiksi liikkumaan, kääntämään näkymää ja painamaan hyökkäystä samanaikaisesti. Kosketusohjausten toteutuksessa hyödynnetään Pointer Events -mallia, joka sopii useiden samanaikaisten kosketuspisteiden käsittelyyn 1. Näppäimistö- ja hiiriohjaus säilyvät vaihtoehtona työpöytäkäytössä.

Kevyempi 3D-näkymä pienemmille laitteille

Three.js vastaa pelin 3D-esityksestä. Ympäristön toistuvia kohteita voidaan piirtää InstancedMesh-tekniikalla, joka on tarkoitettu instanssipohjaiseen renderöintiin 2. Ratkaisu voi vähentää piirto-operaatioiden määrää verrattuna siihen, että jokainen samanlainen kohde olisi erillinen mesh.

Varjot ovat usein yksi mobiiliselaimen raskaimmista grafiikkaominaisuuksista. Three.js:n WebGLRenderer tarjoaa varjokarttojen hallintaan oman shadowMap-asetuksen, ja varjojen käyttö voidaan myös poistaa käytöstä suorituskyvyn säästämiseksi 4.

Verkkoyhteys, huoneet ja perussuojaukset

Yhteys pelaajien ja palvelimen välillä on kaksisuuntainen WebSocket-yhteys. Palvelin erottaa ottelut omiin huoneisiinsa, rajoittaa huoneen kahteen pelaajaan ja poistaa tyhjät huoneet.

Viestiprotokolla tarkistaa muun muassa viestien koon, viestityypit, numerokenttien kelvollisuuden ja huonekoodin muodon. Syöteviestien järjestysnumeroita käytetään vanhojen tai epäuskottavan suurten järjestysnumeroiden hylkäämiseen. Mukana on myös heartbeat-mekanismi, jolla voidaan havaita katkenneita yhteyksiä.

Julkisessa tuotantokäytössä WebSocket-yhteys kannattaa tarjota salattuna WSS-yhteytenä HTTPS:n kautta. Käänteisen välityspalvelimen asetuksissa on huomioitava WebSocketin yhteyspäivitysotsakkeet sekä riittävät aikakatkaisuasetukset.

Projektin ydinajatus

Mace Duel Mobile ei yritä olla täysimittainen verkkopeli-infrastruktuuri, vaan selkeä tekninen lähtökohta pienelle selainpohjaiselle kaksinpelille. Sen vahvuus on yhdistelmä, jossa kosketusohjaus, nopeatempoiset kyvyt ja palvelimen ratkaisema taistelulogiikka ovat jo samassa perusratkaisussa.

Seuraavat luontevat kehitysaskeleet olisivat esimerkiksi paremmat animaatiot, äänitehosteet, tarkempi törmäysten käsittely, useammat areenat, katsojatila sekä kattavampi väärinkäytösten torjunta.