Gratis-til-spil-spil

Som du kan se, har denne klasse tre tomme metoder. Disse leveres med phaseren.Sceneklasse.

Spiller du spil. ! Nogensinde tænkt på at bygge en selv. Hmm.. Spil synes medfødt vanskeligt at bygge. Med masser af bevægelige stykker involveret (bogstaveligt talt) virker spiludvikling som om det er begrænset til devs, der har nedsænket deres fødder dybt ned i de hellige vand i netværk, matematik, grafik og lignende. . I denne artikel ser vi på trin for trin implementering af et realtidsmultiplayer -spil med rumindtrængende (ah, nostalgien!) med phaser3 og dygtig realtid. Jeg har været vært for det sidste spil på https: // ruminvader-multiplayer.Herokuapp.com/ for dig at prøve det. Undervejs forstår vi arkitektur, systemdesign, netværksprotokoller bag dette, og ser også til de advarsler, der skal huskes, når vi bygger multiplayer-browserbaserede spil. Denne tutorial -serie er opdelt i fire dele:

• Del 1: Introduktion til spilkoncepter og Phaser -biblioteket
• Del 2: Evaluering af netværksprotokoller til apps i realtid
• Del 3: Implementering af server-side-koden for at holde alle spillere synkroniseret
• Del 4: Afslutning af klientsiden for at gengive spillet

En sidste ting, før vi kommer i gang. Denne artikel antager en grundlæggende forståelse af JavaScript og Express/Nodejs.

Lad os få spil!

Del 1 – Introduktion til spilkoncepter og Phaser

Lad os begynde med at se på reglerne for spillet, da det ikke nøjagtigt bliver det samme som den originale retro klassiker.

Spilregler for multiplayer -ruminvters

• Når en ny spiller tilslutter sig, får de tilfældigt tildelt en monster -avatar ud af de tre tilgængelige sorter.
• Hver spiller kan flytte deres avatar til venstre eller højre ved hjælp af piletasterne på deres tastatur
• Hver spiller vil se deres egen avatar i hvidt, men se alle andre vil i en tilfældig farve, der er forudindlæst for dem
• . Dette skib bevæger sig langs den horisontale akse i en tilfældigt valgt retning, der ændrer sig tilfældigt hvert 5. sekund. Sammen med dette vil skibets hastighed også ændre sig. Dette skib skyder også kugler med regelmæssige intervaller, som vi også kan forudindstille
• .
• Målet at vinde spillet er at komme til den nederste grænse af spilskærmen uden at blive dræbt af en eller flere kugler, der bliver skudt af skibet.

Komponenter i et realtids multiplayer -spil

Selvom det kan se ud som om der er en masse ting, der foregår bag et netværk i realtidsspil, kommer de virkelig ned på tre kernekomponenter:

Lad os se på hver af disse yderligere.

1. Aktiver

Aktiver er de kritiske elementer, der udgør spillet. Hvis du gerne vil have, at et objekt vises i dit spil, kan du enten tegne et på spilskærredet, eller endnu bedre bruge et billede eller et sprite ark og animere sammen. Tilsvarende ville enhver lyd, du gerne vil introducere og spille i spillet.

Hvis du er interesseret i at lave dit spils tema Super Arcade, kan du følge denne Pixel Art -tutorial af Glauber Kotaki for at lære hvordan.

. Fysik

Fysik er det, der lader os flytte aktiverne rundt og beslutter, hvordan forskellige genstande i vores spil interagerer med hinanden. I et simpelt pongspil sprang bolden for eksempel tilbage i en bestemt retning, med en bestemt hastighed afhængigt af hvilken del af padlen den kolliderede med. .

Alle disse ting er dybest set matematiske beregninger i overensstemmelse med begreber om fysik, under hætten. . .

3. Netværk

. Det kan være super vanskeligt at bevare synkroniseringen mellem alle spillerne, finde ud af, hvilken spiller der døde, og hvis alle andre er enige i dette krav.

Bare rolig, hvis alt dette begynder at lyde kompleks, behøver det ikke at være. Der er mange allerede eksisterende designmønstre, der kan hjælpe os med at komme i gang på den rigtige måde. Vi kan vælge, hvordan vi ønsker, at spilarkitekturen skal være, med hensyn til mekanikken i det pågældende spil. I hele denne artikel serier vi tale om de mønstre og arkitektoniske valg, jeg gik med for at bygge dette spil, og hvorfor.

.

Phaser er et open sourced lærred og WebGL-gengivelse af JavaScript-rammer for HTML5. Vi bruger Phaser 3 til at opbygge spillet. . .

Faser tillader os ikke kun at vise aktiverne på et lærred, spille animationer og lyde osv. På en webside, men det leveres også med en indbygget fysikmotor (flere) faktisk). .

Der er en rigtig god videotutorial -serie til Phaser, som jeg vil anbefale, hvis det er din første gang at arbejde med Phaser 3.

.

Vi passerer derefter konfigurationsobjektet for at starte et nyt spil.

Dette lyder måske lidt forvirrende, da du ikke har set nogen kode endnu. Lad os gøre det næste.

Kom godt i gang med spillet

Lad os komme direkte til spilskærmen for nu. . Vores spil ville være en HTML -side med et lærred gengivet. . . . For at holde tingene organiserede, gemmer vi alle vores HTML-filer i en mappe kaldet visninger og alle JavaScript-filer på klientsiden i en mappe, . .HTML -fil med et grundlæggende skelet:

Som du kan se, er alt det, vi laver her, link til CSS- og JS -filer, som vi snart tilføjer, men også endnu vigtigere er linket til Phaser JS CDN. Du kan kopiere CSS direkte fra GitHub -projektet

. .

Lad os oprette en fil i den offentlige mappe, kalde det script..

Som du kan se, bortset fra at specificere størrelsen på lærredet og dets baggrundsfarve, har vi også specificeret, hvor dette lærred skal gå (identificeret af forælder) og en række scener, som vi gerne vil være en del af dette spil.

. Du kan tænke på en scene som det, du visuelt kan se. Mens det spiller et spil, hvis spillet skifter til en anden baggrund med forskellige interaktioner mellem spilobjekterne, er det sandsynligvis en separat scene fra det, du så før.

Til vores spil har vi en enkelt scene (identificeret af Gamescene). En scene i Phaser er en klasse, der udvider Phaser.. Lad os definere dette til vores spil. .

Som du kan se, har denne klasse tre tomme metoder. Disse leveres med phaseren..

1. Preload () -metoden får alle de ressourcer, vi muligvis har brug for, uanset hvor de er, indlæser dem ind og holder dem klar til, når vi gerne vil tilføje dem til vores spil.
2. . Vi kan tilføje alle de variable initialiseringer, animationsdefinitioner osv. I denne metode.
3. Metoden til opdateringen () udføres kontinuerligt i en løkke, så længe spillet er på, og er derfor i stand til konstant at opdatere spilobjekterne i henhold til spillogikken. ..

Indlæser aktiver og oprettelse af animationer

Lad os gå videre og indlæse nogle aktiver nu. Definer metoden Prepoad () som følger

Jeg var oprindeligt vært for dette spil på Glitch, der gemmer alle aktiverne i sin spand, der hentes med et CDN -link. Du kan bruge det samme, ellers er Amazon S3 en anden populær mulighed.

Vi tilføjede tre typer avatarer, alle i hvide og tre andre farver. Bortset fra dem tilføjede vi også aktiver til skibet, kuglen og selvfølgelig eksplosionen til at spille, når en spiller dør.

Som du kan se, indlæste vi et Spritesheet -aktiv i Phaser ved hjælp af dette.belastning.

• identifikatoren
• sti til den faktiske fil
• .

Vi kan også bare kalde det et billede, men så kan vi ikke gøre de seje animationer med det, som du snart ser.

S.. . . Jeg ved ikke hvordan endnu, men jeg opdaterer dette, når jeg har fundet ud af det 🙂

Hvis du inspicerer “eksplosion” sprite ark, vil du se, at det er en masse forskellige billeder placeret ved siden af ​​hinanden. Den måde, vi forårsager en “animation” på, er ved at gå gennem disse forskellige billeder med en bestemt hastighed, der får det til at virke som om det faktisk er en gennemsigtig video af en eksplosion, der sker.

I metoden Create () definerer vi animationen til denne eksplosion:

Vi har brugt Phaser’s dette.Anims.Opret () metode til at oprette animationen. Denne metode tager ind:

• den nøgle, som vi senere vil bruge til at spille denne animation
• rammer, der genererer rammer ved hjælp af identifikatoren for det aktiv, som vi gerne vil anvende denne animation
• Framerate, der specificerer den hastighed, hvorpå vi gerne vil spille denne animation
• Gentag, der specificerer, hvor mange gange animationen vil køre
• HideonComplete specificerer, om det aktiv, der blev animeret, skal forsvinde, efter at animationen er færdig

Vi tilføjer ikke noget i opdateringen () -metoden for nu. .

Det er det for nu. Vi lærer om netværk til realtidsapps i del 2 – Evaluering af netværksprotokoller til apps i realtid

Alle artikler i denne serie:

• Del 1: Introduktion til spilkoncepter og Phaser -biblioteket
• Del 2: Evaluering af netværksprotokoller til apps i realtid

En separat udgivelse, der er relevant for denne tutorial, er tilgængelig på GitHub, hvis du gerne vil tjekke den ud.

Du kan også følge GitHub -projektet for den seneste udvikling på dette projekt.

Hvis du har spørgsmål, er du velkommen til at kontakte mig på Twitter @srushtika. Mine DM’er er åbne 🙂

Kategori: Multiplayer Building

Chimeraland er en gratis at spille Open World Sandbox Survival MMORPG (massivt multiplayer online rollespil) til pc (Windows) og mobil (Android/iOS) udviklet af Pixel Soft og udgivet af Level Infinite. Spillet ligger i en forhistorisk, mytisk verden […]

Muck er en gratis* single-player og multiplayer Survival Roguelike-spil til pc (Windows) af den populære norske udvikler, kunstner og YouTuber Dani (som også lavede Crab Game og Karlson). .g. […]

Sandkassen er et frit-til-spil og play-to-earn, decentraliseret og samfundsdrevet spiløkosystem og virtuel verden til pc (Windows og Mac) i aktiv udvikling (åben alfa) og bygget på Ethereum blockchain (svarende til Decentraland). Spillere kan bygge, eje, dele og […]

Core er en gratis-til-play-spilsamling og spilfremstillingsplatform svarende til Crayta og Roblox. Core er med andre ord en multivers af gratis spil at spille og verdener at udforske designet af et globalt samfund af udviklere, som du nemt kan […]

Crayta er en gratis-til-play-samarbejdsspilsplatform og multiplayer Arcade Game Collection bygget på Unreal Engine 4 til pc, svarende til Core og Roblox. Spillere kan hoppe ind og skabe spil sammen i skyen, uanset deres programmeringsoplevelse. Fra […]

Wild Terra Online er en fri-til-play MMORPG med sandkasse og overlevelsesfunktioner, der er sat i en fuldstændig spillerstyret middelalderlig fantasiverden. Du behøver ikke at udføre en kæde af opgaver og dræbe tusind ulve for at skabe udstyr.

ARK: Survival Evolution (Mobile) er et gratis-til-spil* mobil action-eventyr overlevelsespil af Studio Wildcard for Mobile (Android, iOS), der er sat i en forhistorisk verden, hvor spillere, der er strandet på en ø, skal overleve roaming Dinosaurer og andre forhistoriske dyr, naturlige farer, […]

. Snarere end at fokusere på […]

Totemori er et sjovt og innovativt frit-til-spil delt-screen multiplayer brawler-spil, hvor du bygger tårne, mens du prøver at vælte alle andres. .

Galactic Junk League er en konkurrencemæssig fri-til-play crafter Arena-en skydespil blandet med næsten uendelige skibsbygningsmuligheder. Bygge noget. Bekæmp nogen. . Byg dine uønskede skibe til bogstaveligt talt alle former og størrelser og kæmp mod kreationer af […]

Creativerse er en dejlig gratis-til-play og næste generation af MMO Sandbox-spil om eventyr, udforskning og kreativitet med dine venner. Og det er nu gratis at spille.

Gunscape er et FPS -konstruktionssæt. ! Gunscape gør dette ved at levere brugervenlige værktøjer baseret på en blokplaceringsgrænseflade, som alle allerede er bekendt med for at oprette en-spiller […]

. Trove har utallige riger fyldt med opgaver, kister og fjender store og små.

Roblox er en gratis-til-play massivt multiplayer online videospil og spiloprettelsesplatform (svarende til Core og Crayta), der giver brugerne mulighed for at designe og dele deres egne spil og niveauer og spille alle typer spil oprettet af andre brugere fra [ …]