Gratis te spelen spellen

Zoals u kunt zien, heeft deze klasse drie lege methoden. .Scènes. Elk van deze methoden heeft een andere functie zoals hieronder uitgelegd

Bouw een realtime multiplayer -browserspel in minder dan een dag – deel 1/4

Speel jij spelletjes. Duh! Ooit gedacht om er zelf een te bouwen. Hm.. Games lijken van nature moeilijk te bouwen. Met veel bewegende stukken (vrij letterlijk), lijkt het spelontwikkeling te zijn beperkt tot ontwikkelaars die hun voeten diep in het heilige wateren van netwerken, wiskunde, graphics en dergelijke hebben ondergedompeld. Nu het web zich zo snel evolueert en met alle nieuwe protocollen en bibliotheken die de afgelopen jaren zijn uitgesproken, is het nu super eenvoudig om aan de slag te gaan met het bouwen van browsersgebaseerde multiplayer-games. In dit artikel kijken we naar stapsgewijze implementatie van een realtime multiplayer -spel van ruimtevaartinvallers (ah, de nostalgie!) met phaser3 en bekwaam realtime. Ik heb de laatste wedstrijd georganiseerd op https: // Space-Invaders-Multiplayer.Herokuapp.com/ voor jou om het uit te proberen. Onderweg zullen we de architectuur, systeemontwerp, netwerkprotocollen erachter begrijpen en ook kijken naar de voorbehouden om in gedachten te houden bij het bouwen van multiplayer-browser-gebaseerde games.

• Deel 1: Inleiding tot gamingconcepten en de Phaser Library
• Deel 2: Netwerkprotocollen evalueren voor realtime apps
• Deel 4: het afronden van de client-side code om het spel weer te geven

Nog een laatste ding voordat we aan de slag gaan. Dit artikel veronderstelt een basiskennis van JavaScript en Express/Nodejs. Ik zal proberen al het andere zoveel mogelijk uit te leggen ����‍����

Laten we gamen!

Deel 1 – Inleiding tot gamingconcepten en phaser

Laten we beginnen met het kijken naar de regels voor het spel, omdat het niet bepaald hetzelfde zal zijn als de originele retro -klassieker.

Spelregels voor indringers van multiplayer -ruimte

• Wanneer een nieuwe speler lid wordt, krijgen ze willekeurig een monster -avatar toegewezen uit de drie beschikbare variëteiten.
• Elke speler kan zijn avatar links of rechts verplaatsen met de pijltoetsen op hun toetsenbord
• Elke speler zal zijn eigen avatar in het wit zien, maar ziet dat iedereen het zal doen in een willekeurige kleur die voor hen vooraf is toegewezen
• Wanneer een preset -aantal spelers deelnemen aan het spel, wordt een schip gelanceerd. Dit schip beweegt langs de horizonale as in een willekeurig gekozen richting die om de 5 seconden willekeurig verandert. Samen met dit zal de snelheid van het schip ook veranderen. Dit schip schiet ook kogels met regelmatige tussenpozen die we ook kunnen instellen
• Alle avatars bewegen automatisch naar beneden met een vooraf ingestelde toename gedurende het spel.
• Het doel om het spel te winnen is om de onderste rand van het spelscherm te bereiken zonder te worden gedood door een of meer kogels die door het schip worden neergeschoten.

Componenten van een realtime multiplayer -spel

Hoewel het misschien lijkt alsof er een heleboel dingen gaande zijn achter een netwerk Realtime -game, komen ze echt neer op drie kerncomponenten:

Laten we elk van deze verder eens kijken.

1. Activa

Activa zijn de kritieke elementen die het spel vormen. Als je een object wilt dat in je spel verschijnt, kun je er een op het spelcanvas tekenen, of beter nog een afbeelding of een sprite -blad gebruiken en mee animeren. Evenzo zou elke audio die je wilt introduceren en spelen in de game onder zijn activa vallen.

Als je geïnteresseerd bent om het thema van je game super arcade te maken, kun je deze pixelkunst -tutorial van Glauber Kotaki volgen om te leren hoe.

2. Natuurkunde

Natuurkunde is wat ons de activa laat verplaatsen en beslist hoe verschillende objecten in ons spel met elkaar omgaan. In een eenvoudig spel van Pong bijvoorbeeld wordt de bal terug in een bepaalde richting teruggestuurd, met een bepaalde snelheid, afhankelijk van welk deel van de peddel waarmee hij botste. Evenzo kan dit in onze game computers omvatten waar het schip moet gaan, met welke snelheid, schieten van kogels, botsing van deze kogelobjecten met spelers avatars, enz.

Al deze dingen zijn in feite wiskundige berekeningen in overeenstemming met concepten van fysica, onder de motorkap. Maar zoveel wiskunde kan overweldigend zijn om helemaal opnieuw te schrijven, zelfs voor een eenvoudig spel. Dus in plaats van helemaal opnieuw te schrijven, kunnen we een fysica -engine gebruiken die het grootste deel van de wiskundemagie voor ons kan doen.

3. Netwerk

. Het kan super lastig zijn om de synchronisatie tussen alle spelers te handhaven, erachter te komen welke speler stierf en of iedereen het met die claim eens is.

Maak je geen zorgen als dit allemaal complex begint te klinken, het hoeft niet te zijn. . We kunnen kiezen hoe we willen dat de game -architectuur is, met betrekking tot de mechanica van het specifieke spel in kwestie. In deze artikelreeks hebben we het over de patronen en architecturale keuzes die ik heb gedaan om deze game te bouwen en waarom.

Nu we een beter begrip hebben van de kerncomponenten, laten we onderzoeken hoe we deze in ons spel kunnen werken.

PHASER 3 gebruiken om activa toe te voegen en natuurkunde in te schakelen

Phaser is een open canvas en WebGL-weergave JavaScript Framework voor HTML5. We gebruiken Phaser 3 om het spel te bouwen. De reden dat ik specifiek de versie vermeld, is dat er veel brekende veranderingen zijn tussen Phaser 2 en 3, waaronder de syntaxis. Ook als u in de toekomst zelf een aantal coole nieuwe functies aan de game wilt toevoegen, moet u weten wat/waar u moet kijken.

Met Phaser staat ons niet alleen toe om de activa op een canvas weer te geven, de animaties en geluiden, enz. Op een webpagina te spelen, maar het wordt ook geleverd met een ingebouwde fysica-engine (meerdere eigenlijk). Dit betekent dat we het gewoon kunnen vertellen, zoals wat er moet worden gedaan als twee objecten botsen en het automatisch in de gaten houdt voor botsing en een stuk code uitvoert als het gebeurt.

Er is echt een goede video -tutorial -serie voor Phaser die ik zou aanbevelen als het je eerste keer is dat het met Phaser 3 werkt.

In de TL; DR -versie ervan, met Phaser3, kunnen we een configuratieobject opgeven dat de informatie over het canvas en de game zelf zou hebben, inclusief de grootte van het canvas, zijn stijlkenmerken, verschillende scènes die in onze gameplay zijn opgenomen (binnenkort besproken), type fysica -engine (zoals Phaser heeft er veel), enz.

Vervolgens geven we het configuratieobject door om een ​​nieuw spel te starten.

Dit klinkt misschien een beetje verwarrend omdat je nog geen code hebt gezien. Laten we dat vervolgens doen.

Aan de slag met het spel

Laten we voorlopig meteen naar het spelscherm gaan. We zullen zich later zorgen maken over de lancerings- en leaderboardpagina’s. Onze game zou een HTML -pagina zijn met een canvas die erop is weergegeven. Dit canvas zal het daadwerkelijke spel vasthouden en uitvoeren. Laten we dus een bestand maken, het index noemen.HTML . Om dingen georganiseerd te houden, slaan we al onze HTML-bestanden op in een map met de naam weergave en alle JavaScript-bestanden aan de client-side in een map die Public wordt genoemd . Laten we de weergaven/index starten.HTML -bestand met een basisskelet:

Zoals u kunt zien, is het enige dat we hier doen een link naar de CSS- en JS -bestanden die we binnenkort zullen toevoegen, maar ook nog belangrijker de link naar de Phaser JS CDN.

Anders dan dat, binnen de HTML-body, hebben we een div met een ID van gamecontainer . Dit is waar we onze gamecanvas via JavaScript zullen toevoegen.

.JS en begin met het definiëren van het spelconfiguratieobject waarover we eerder hebben gesproken.

Zoals u ziet, hebben we, afgezien van het opgeven van de grootte van het canvas en de achtergrondkleur, ook gespecificeerd waar dit canvas naartoe moet (geïdentificeerd door ouder) en een reeks scènes die we hier graag van zouden willen maken spel.

Phaser gebruikt het concept van ‘scènes’ om de inhoud van het spel te organiseren. Je kunt een scène bedenken als wat je op elk moment visueel kunt zien. Tijdens het spelen van een spel, als het spel overstaat naar een andere achtergrond met verschillende interacties tussen de game -objecten, dan is het waarschijnlijk een aparte scène dan wat je eerder bekeken.

Voor onze game hebben we één scène (geïdentificeerd door GamesCene). Een scène in Phaser is een klasse die de phaser uitbreidt.Scènes. Laten we dit definiëren voor ons spel. Voeg de volgende code boven het configuratieobject toe, aangezien het verwijst naar de klasse GamesCene.

Zoals u kunt zien, heeft deze klasse drie lege methoden. Deze komen met de phaser.Scènes. Elk van deze methoden heeft een andere functie zoals hieronder uitgelegd

1. De methode voor het laden () krijgt alle bronnen die we nodig hebben, waar ze ook zijn, laadt ze in en houdt ze klaar voor wanneer we ze aan ons spel willen toevoegen.
2. De methode maken () wordt eenmaal uitgevoerd wanneer de game voor het eerst loopt. We kunnen alle variabele initialisaties, animatiedefinities, enz. In deze methode toevoegen.
3. De methode update () wordt continu uitgevoerd in een lus zolang het spel is ingeschakeld en is daarom in staat om de game -objecten constant bij te werken volgens de spellogica. We zullen de avatars updaten, kogels schieten, het schip verplaatsen, allemaal in deze methode..

Activa laden en animaties maken

Laten we doorgaan en nu wat activa laden. Definieer de methode voor het laden () als volgt

Ik heb deze game oorspronkelijk georganiseerd op Glitch, die alle activa in zijn emmer opslaat, opgericht door een CDN -link. U kunt hetzelfde gebruiken, anders is Amazon S3 een andere populaire optie.

We hebben drie soorten avatars toegevoegd, allemaal in het wit en drie andere kleuren. Afgezien van die, hebben we ook activa toegevoegd voor het schip, de kogel en natuurlijk de explosie om te spelen wanneer een speler sterft.

Zoals u kunt zien, hebben we hiermee een SpriteSheet -activa in Phaser geladen.laden.SpriteSheet () en stuurde het drie parameters:

• de identificatie
• pad naar het werkelijke bestand
• De afmetingen van het bestand (in pixels).

We kunnen het ook gewoon een afbeelding noemen, maar dan kunnen we de coole animaties er niet mee doen, zoals je binnenkort zult zien.

P.S. Er is een betere manier om de avatarkleuren te implementeren. We kunnen eenvoudig een kleurentint toevoegen aan een bestaande sprite in plaats van hetzelfde object in meerdere kleuren te laden als afzonderlijke activa. Ik weet nog niet hoe, maar ik zal dit bijwerken als ik het ontdekte 🙂

Als u het “explosie” sprite -blad inspecteert, ziet u dat het een aantal verschillende afbeeldingen naast elkaar is. .

In de methode Maken () definiëren we de animatie voor deze explosie:

We hebben Phaser’s gebruikt.animaties.Create () -methode om de animatie te maken. Deze methode neemt op:

• de sleutel die we later zullen gebruiken om deze animatie te spelen
• frames die frames genereert met behulp van de identificatie van de activa waarop we deze animatie willen toepassen
• Framerate dat specificeert de snelheid waarmee we deze animatie willen spelen
• Herhaal dat specificeert hoe vaak de animatie zal worden uitgevoerd
• HideonComplete geeft aan of het geanimeerde activum al dan niet moet verdwijnen nadat de animatie is voltooid

We zullen voorlopig niets toevoegen in de methode Update (). Als je het merkt, we hebben de game ook niet echt geïnstalleerd, dat doen we in een later deel van deze artikelreeks.

Dat is het voor nu. We zullen leren over netwerken voor realtime -apps in deel 2 – het evalueren van netwerkprotocollen voor realtime apps

Alle artikelen in deze serie:

• Deel 1: Inleiding tot gamingconcepten en de Phaser Library
• Deel 2: Netwerkprotocollen evalueren voor realtime apps
• Deel 3: de server-side code implementeren om alle spelers synchroon te houden
• Deel 4: het afronden van de client-side code om het spel weer te geven

Een afzonderlijke release die relevant is voor deze tutorial is beschikbaar op GitHub als je het wilt bekijken.

U kunt ook het GitHub -project volgen voor de nieuwste ontwikkelingen op dit project.

Als je vragen hebt, aarzel dan niet om contact met me op Twitter @srushtika te bereiken.

Categorie: multiplayer -gebouw

Chimeraland is een gratis te spelen open wereld Sandbox Survival MMORPG (Massive Multiplayer Online Role Playing Game) voor pc (Windows) en Mobile (Android/IOS) ontwikkeld door Pixel Soft en gepubliceerd door Level Infinite. De game speelt zich af in een prehistorische, mythische wereld […]

Muck is een gratis* single-player en multiplayer survival Roguelike Game voor pc (Windows) van de populaire Noorse ontwikkelaar, kunstenaar en YouTuber Dani (die ook Crab Game en Karlson maakte). Muck is een lage poly, casual maar (zeer) uitdagende mix van overleving (E.G. […]

De Sandbox is een gratis te spelen en play-to-earn, gedecentraliseerd en gemeenschapsgestuurde gaming-ecosysteem en virtuele wereld voor pc (Windows en Mac) in actieve ontwikkeling (open alfa) en gebouwd op de Ethereum blockchain (vergelijkbaar met deCentraland). Spelers kunnen bouwen, bezitten, delen en […]

Core is een gratis te spelen gamecollectie en spelpresteerplatform vergelijkbaar met Crayta en Roblox. Core is met andere woorden een multiversum gratis games om te spelen en werelden om te verkennen ontworpen door een wereldwijde gemeenschap van ontwikkelaars die je gemakkelijk kunt […]

Crayta is een gratis te spelen samenwerkingsplatform voor het maken van games en multiplayer arcade-gamecollectie gebouwd op Unreal Engine 4 voor pc, vergelijkbaar met Core en Roblox. Spelers kunnen erin springen en games samen in de cloud maken, ongeacht hun programmeerervaring. Van […]

Wild Terra Online is een gratis te spelen MMORPG met sandbox en overlevingsfuncties, ingesteld in een volledig door spelers gecontroleerde middeleeuwse fantasiewereld. U hoeft geen takenketen te voltooien en duizend wolven te doden om apparatuur te maken. Alles is veel […]

ARK: Survival Evolved (Mobile) is een gratis te spelen* mobiele actie-avontuur overlevingsgame door Studio Wildcard voor Mobile (Android, iOS), die zich afspeelt in een prehistorische wereld waar spelers, die op een eiland zijn gestrand, moeten overleven Dinosaurussen en andere prehistorische dieren, natuurlijke gevaren, […]

Onbesneden is een gratis om Sandbox Survival Melee en Shooter-game met zombie-thema te spelen voor pc (Windows, Mac en Linux) in het opkomende MMO/multiplayer Apocalyps-overlevingsgenre (hoewel je ook alleen of in Coop in PVE kunt spelen). In plaats van zich te concentreren op […]

Totemori is een leuk en innovatief gratis te spelen multiplayer-brawler-game met gedeelde screen waar je torens bouwt terwijl je probeert om te vallen. Totemori beschikt over lokale versus en co-op multiplayer voor maximaal 4 spelers. Speel tegen je vrienden of oefen tegen bots, […]

Galactic Junk League is een concurrentie-vrij te spelen crafter arena-een schutter gemengd met bijna oneindige scheepsbouwmogelijkheden. Bouw alles. Vecht tegen iedereen. In de ruimte. Bouw je junk -schepen op letterlijk eventuele soorten en maten en vecht tegen de creaties van […]

Creativerse is een heerlijke gratis MMO Sandbox-game van de volgende generatie over avontuur, verkenning en creativiteit met je vrienden. En het is nu gratis om te spelen. Je bent gestrand in een grote en mysterieuze wereld die is omgeven door woeste beesten en […]

Gunscape is een FPS -constructiekit. ! Gunscape doet dit door gebruiksvriendelijke tools te bieden op basis van een blokvergunderinterface waar iedereen al bekend mee is om een ​​single-player te maken […]

Trove is een gratis te spelen, open actie-avontuur voxel mmorpg by Trion Worlds voor pc (Windows, Mac), Xbox One, PS4 en Nintendo Switch. Trove heeft talloze rijken gevuld met quests, kisten en vijanden geweldig en klein. Verken en maak je weg […]

Roblox is een gratis te spelen massaal multiplayer online videogame en game creation platform (vergelijkbaar met Core en Crayta) waarmee gebruikers hun eigen games en niveaus kunnen ontwerpen en delen, en alle soorten games kunnen spelen die door andere gebruikers zijn gemaakt, van [ …]