Gratis-spelspel

Som ni ser har denna klass tre tomma metoder. Dessa kommer med phaser.Scenklass.

Bygga ett realtidsmultiplayer -webbläsarspel på mindre än en dag – del 1/4

Spelar du spel. Duh! . .. Spel som är inneboende verkar svåra att bygga. Med massor av rörliga bitar involverade (helt bokstavligen) verkar spelutvecklingen som om det är begränsat till devs som har fördjupat sina fötter djupt i det heliga vattnet i nätverk, matematik, grafik och liknande. Men när webben utvecklas så snabbt och med alla de nya protokollen och biblioteken som har sträckt sig över de senaste åren är det nu superenkelt att komma igång med att bygga webbläsarbaserade multiplayer-spel. I den här artikeln kommer vi att titta på steg för steg implementering av ett realtidsmultiplayer -spel av Space Invaders (Ah, nostalgi!) med phaser3 och ably realtid. Jag har varit värd för det sista spelet på https: // rymd-invaders-multiplayer.herokuapp.com/ för att du ska prova det. Längs vägen kommer vi att förstå arkitektur, systemdesign, nätverksprotokoll bakom detta och också titta på varningar för att tänka på när du bygger multiplayer webbläsarbaserade spel. Denna handledningsserie delas upp i fyra delar:

• Del 1: Introduktion till spelkoncept och Phaser -biblioteket
• Del 2: Utvärdering av nätverksprotokoll för realtidsappar
• Del 3: Implementering av serversidan för att hålla alla spelare i synkronisering
• Del 4: Avsluta koden för klientsidan för att göra spelet

En sista sak innan vi börjar. Den här artikeln antar en grundläggande förståelse för JavaScript och Express/NodeJS. Jag ska försöka förklara allt annat så mycket som möjligt ����‍����

Låt oss få spel!

Del 1 – Introduktion till spelkoncept och phaser

Låt oss börja med att titta på reglerna för spelet eftersom det inte exakt kommer att bli detsamma som den ursprungliga Retro Classic.

Spelregler för multiplayer -rymdintrångare

• När en ny spelare går med kommer de slumpmässigt tilldelade en monsteravatar av de tre tillgängliga sorterna.
• Varje spelare kan flytta sin avatar åt vänster eller höger med pilknapparna på tangentbordet
• Varje spelare kommer att se sin egen avatar i vitt men se alla andra kommer att göra i en slumpmässig färg som förutses till dem
• När ett förinställt antal spelare går med i spelet lanseras ett fartyg. Detta fartyg rör sig längs den horisontella axeln i en slumpmässigt vald riktning som ändras slumpmässigt var femte sekund. Tillsammans med detta kommer fartygets hastighet också att förändras. Detta fartyg skjuter också kulor med regelbundna intervaller som vi också kan förinställa
• Alla avatarer rör sig automatiskt nedåt med ett förinställt steg under hela spelet.
• Målet att vinna spelet är att komma till den nedre gränsen på spelskärmen utan att dödas av en eller flera kulor som skjuts av fartyget.

Komponenter i ett realtidsmultiplayer -spel

Låt oss titta på var och en av dessa vidare.

1. Tillgångar

. Om du vill att ett objekt ska visas i ditt spel kan du antingen rita en på spelduken, eller ännu bättre använda en bild eller ett sprite -ark och animera längs. På samma sätt skulle alla ljud du vill introducera och spela i spelet falla under dess tillgångar.

Om du är intresserad av att göra ditt spels tema superarkad kan du följa denna pixelkonsthandledning av Glauber Kotaki för att lära dig hur.

2.

Fysik är det som låter oss flytta tillgångarna runt och bestämmer hur olika objekt i vårt spel interagerar med varandra. Till exempel, i ett enkelt spel med Pong, hoppas bollen tillbaka i en viss riktning, med en viss hastighet beroende på vilken del av paddelen den kolliderade med. På samma sätt kan detta i vårt spel inkludera datoranvändning vart fartyget behöver gå, med vilken hastighet, skytte av kulor, kollision av dessa kulobjekt med spelarnas avatarer osv.

Alla dessa saker är i princip matematiska beräkningar i linje med fysikbegrepp, under huven. Men så mycket matematik kan vara överväldigande att skriva från grunden även för ett enkelt spel. Så istället för att skriva varje från början, kan vi använda en fysikmotor som kan göra det mesta av matematik för oss.

3. Nätverk

. Det kan vara super knepigt att behålla synkroniseringen mellan alla spelare, ta reda på vilken spelare som dog och om alla andra håller med om det påståendet.

Oroa dig inte om allt detta börjar låta komplex, det behöver inte vara. Det finns många befintliga designmönster som kan hjälpa oss att komma igång på rätt sätt. Vi kan välja hur vi vill att spelarkitekturen ska vara, med avseende på mekaniken i det aktuella spelet. Under hela denna artikel -serie pratar vi om de mönster och arkitektoniska val jag gick med för att bygga detta spel och varför.

Nu när vi har en bättre förståelse för kärnkomponenterna, låt oss utforska hur vi kan få dessa att fungera i vårt spel.

Använda Phaser 3 för att lägga till tillgångar och möjliggöra fysik

Phaser är ett öppet canvas och WebGL Rendering JavaScript-ramverk för HTML5. Vi använder Phaser 3 för att bygga spelet. Anledningen till att jag specifikt nämner versionen är att det finns många förändringar mellan Phaser 2 och 3 inklusive syntaxen. Om du också vill lägga till några coola nya funktioner i spelet själv i framtiden, bör du veta vad/var du ska titta.

Phaser tillåter inte bara oss att visa tillgångarna på en duk, spela animationer och ljud osv på en webbsida, utan den kommer också med en inbyggd fysikmotor (flera faktiskt). Detta innebär att vi bara kan berätta för det som vad som måste göras när två objekt kolliderar och det kommer automatiskt att hålla ett öga för kollision och utföra en kod.

Det finns en riktigt bra videotutorialserie för Phaser som jag rekommenderar om det är din första gång att arbeta med Phaser 3.

I tl; dr -versionen av den, med Phaser3, kan vi ange ett konfigureringsobjekt som skulle ha informationen om duken och själva spelet, inklusive storleken på duken, dess stilattribut, olika scener som ingår i vårt spelspel (diskuteras inom kort), typ av fysikmotor (som Phaser har många), etc.

Vi passerar sedan konfigurationsobjektet för att starta ett nytt spel.

Det här låter kanske lite förvirrande eftersom du inte har sett någon kod än. .

Komma igång med spelet

. Vi kommer att oroa oss för lanserings- och toppsidorna, senare. Vårt spel skulle vara en HTML -sida med en duk som görs på den. Denna duk kommer att hålla och köra själva spelet. Så låt oss skapa en fil, kalla det index.html . För att hålla saker organiserade lagrar vi alla våra HTML-filer i en mapp som heter VISHER och alla klientsidan JavaScript-filer i en mapp som heter Public . Låt oss starta vyer/index.HTML -fil med ett grundläggande skelett:

Som ni ser är allt vi gör här länk till CSS- och JS -filerna som vi lägger till inom kort, men också ännu viktigare länken till Phaser JS CDN. Du kan kopiera CSS direkt från GitHub -projektet

Annat än det, inom HTML-kroppen, har vi en div med ett ID för spel-container . Det är här vi lägger till vår spelduk via JavaScript.

Låt oss skapa en fil i den offentliga mappen, kalla det skript.JS och börja med att definiera spelkonfigurationsobjektet som vi pratade om tidigare.

Som ni kan se, förutom att specificera storleken på duken och dess bakgrundsfärg, har vi också angett vart denna duk måste gå (identifierad av förälder) och en rad scener som vi vill vara en del av detta spel.

Phaser använder begreppet “scener” för att organisera innehållet i spelet. Du kan tänka på en scen som vad du visuellt kan se när som helst. När du spelar ett spel, om spelet växlar till en annan bakgrund med olika interaktioner mellan spelobjekten, är det förmodligen en separat scen från vad du tittade på innan.

För vårt spel har vi en enda scen (identifierad av Gamescene). En scen i Phaser är en klass som utökar phaser.Scenklass. Låt oss definiera detta för vårt spel. Lägg till följande kod ovanför konfigureringsobjektet eftersom det hänvisar till GameScene -klassen.

Som ni ser har denna klass tre tomma metoder. Dessa kommer med phaser.Scenklass. Var och en av dessa metoder har en annan funktion som förklaras nedan

1. PreLoad () -metoden får alla resurser som vi kan behöva, var som helst, laddar dem in och håller dem redo för när vi vill lägga till dem i vårt spel.
2. Metoden Skapa () körs en gång när spelet först körs. Vi kan lägga till alla variabla initialiseringar, animationsdefinitioner osv. I den här metoden.
3. Metoden Uppdatering () körs kontinuerligt i en slinga så länge spelet är på och kan därför ständigt uppdatera spelobjekten enligt spellogiken. Vi uppdaterar avatarerna, skjuter kulor, flyttar fartyget, allt i den här metoden..

Låt oss gå vidare och ladda några tillgångar nu. Definiera metoden förbelastning () enligt följande

Jag var ursprungligen värd för det här spelet på Glitch som lagrar alla tillgångar i sin hink, som kan återvinnas med en CDN -länk. Du kan använda samma, annars är Amazon S3 ett annat populärt alternativ.

Vi har lagt till tre typer av avatarer, alla i vitt och tre andra färger. Bortsett från dessa har vi också lagt till tillgångar för fartyget, kulan och naturligtvis explosionen att spela när en spelare dör.

Som ni ser laddade vi en Spritesheet -tillgång i Phaser med detta..spritesheet () och skickade det tre parametrar:

• identifieraren
• Sökväg till själva filen
• Filens dimensioner (i pixlar).

Vi kan också bara kalla det en bild men då kommer vi inte att kunna göra de coola animationerna med det eftersom du kommer att se inom kort.

P.S. Det finns ett bättre sätt att implementera avatarfärgerna. Vi kan helt enkelt lägga till en färgfärg till en befintlig sprite istället för att ladda samma objekt i flera färger som separata tillgångar. Jag vet inte hur ännu, men jag kommer att uppdatera det när jag har räknat ut det 🙂

Om du inspekterar “explosion” sprite -arket ser du att det är ett gäng olika bilder placerade bredvid varandra. Hur vi orsakar en “animation” är genom att gå igenom dessa olika bilder med en viss hastighet som gör att det verkar som om det faktiskt är en transparent video av en explosion som händer.

I metoden Create () definierar vi animationen för denna explosion:

Vi har använt Phaser detta.anims.skapa () -metoden för att skapa animationen. Den här metoden tar in:

• ramar som genererar ramar med hjälp av identifieraren för den tillgång som vi vill tillämpa denna animation
• Framerat som anger hastigheten som vi vill spela den här animationen
• HideOnComplete anger huruvida den tillgång som animerades bör försvinna efter att animationen är klar

Vi kommer inte att lägga till något i metoden uppdatering () för tillfället. Om du märker, har vi inte heller instanserat spelet, vi gör det i en senare del av den här artikelserien.

Det är det för nu. Vi lär oss om nätverk för realtidsappar i del 2 – Utvärdering av nätverksprotokoll för realtidsappar

Alla artiklar i den här serien:

• Del 1: Introduktion till spelkoncept och Phaser -biblioteket
• Del 2: Utvärdering av nätverksprotokoll för realtidsappar
• Del 3: Implementering av serversidan för att hålla alla spelare i synkronisering
• Del 4: Avsluta koden för klientsidan för att göra spelet

En separat utgåva som är relevant för denna handledning är tillgänglig på GitHub om du vill kolla in den.

Du kan också följa Github -projektet för senaste utvecklingen av detta projekt.

Om du har några frågor, vänligen kontakta mig på Twitter @Srushtika. Mina DM: er är öppna 🙂

Kategori: Multiplayer Building

Chimeraland är gratis att spela Open World Sandbox Survival MMorpg (Massively Multiplayer Online Roll Spel) för PC (Windows) och Mobile (Android/iOS) utvecklat av Pixel Soft och publicerad av Level Infinite Infinite. Spelet ligger i en förhistorisk, mytisk värld […]

. Muck är en låg poly, avslappnad men ändå (mycket) utmanande blandning av överlevnad (E.g.

Sandlådan är en fritt att spela och spela-till-earn, decentraliserad och samhällsdriven spelekosystem och virtuell värld för PC (Windows och Mac) i aktiv utveckling (öppen alfa) och byggd på Ethereum blockchain (liknande Decentraland) för PC (Windows och Mac) i aktiv utveckling (öppen alfa) och byggd på Ethereum Blockchain (liknande Decentraland). Spelare kan bygga, äga, dela och […]

Core är en gratis-till-spel-spelkollektion och spelframställningsplattform som liknar Craya och Roblox. Core är med andra ord en multivers av gratis spel att spela och världar för att utforska designade av en global gemenskap av utvecklare som du enkelt kan […]

Craya är en gratis att spela samarbetsspelplattform och multiplayer arkadspelkollektion byggd på Unreal Engine 4 för PC, liknande Core och Roblox. Spelare kan hoppa in och skapa spel tillsammans i molnet, oavsett deras programmeringsupplevelse. Från […]

Wild Terra Online är en gratis att spela mmorpg med sandlådan och överlevnadsfunktioner, som ligger i en helt spelarkontrollerad medeltida fantasivärld. Du behöver inte slutföra en kedja av uppgifter och döda tusen vargar för att skapa utrustning. Allt är mycket […]

ARK: Survival Evolution (Mobile) är ett fritt att spela* mobil action-äventyr överlevnadsspel av studio wildcard för mobil (Android, iOS), som ligger i en förhistorisk värld där spelare, som är strandade på en ö, måste överleva roaming Dinosaurier och andra förhistoriska djur, naturrisker, […]

Oturned är ett gratis att spela Zombie-tema Sandbox Survival Melee och Shooter Game för PC (Windows, Mac och Linux) i den nya MMO/Multiplayer Apocalypse Survival Genre (även om du också kan spela ensam eller i Coop i Pve). Snarare än att fokusera på […]

Totemori är ett roligt och innovativt gratis att spela delad skärm i multiplayer-brawler-spel där du bygger torn medan du försöker tippa alla andra. Totemori har lokala kontra och co-op multiplayer för upp till 4 spelare. Spela mot dina vänner eller öva mot bots, […]

Galactic Junk League är en konkurrerande capt-arenan med gratis att spela-en skytt blandad med nästan oändliga fartygsbyggnadsmöjligheter. Bygg vadsomhelst. Slåss mot någon. I rymden. Bygg dina skräpfartyg till bokstavligen alla former och storlekar och slåss mot skapelserna av […]

Createiverse är ett härligt fritt-till-spel och nästa generations MMO Sandbox-spel om äventyr, utforskning och kreativitet med dina vänner. Och det är nu gratis att spela. Du är strandad i en enorm och mystisk värld som är omgiven av våldsamma djur och […]

Gunscape är ett FPS -konstruktionssats. ! Gunscape gör detta genom att tillhandahålla enkla att använda verktyg baserat på ett blockplaceringsgränssnitt Alla är redan bekanta med för att skapa enspelare […]

. Trove har otaliga områden fyllda med uppdrag, kistor och fiender stora och små. Utforska och skapa din väg […]

Roblox är en gratis att spela massivt multiplayer online videospel och spelskapande plattform (liknande Core och Craya) som gör det möjligt för användare att designa och dela sina egna spel och nivåer och spela alla typer av spel skapade av andra användare, från [[[ …]