Giochi gratuiti

Come puoi vedere, questa classe ha tre metodi vuoti. Questi sono forniti con il phaser.Classe di scena. Ognuno di questi metodi ha una funzione diversa come spiegato di seguito

Costruire un gioco browser multiplayer in tempo reale in meno di un giorno – parte 1/4

Giochi. Duh! Hai mai pensato di costruirne uno da solo. Hmm.. I giochi innatamente sembrano difficili da costruire. Con molti pezzi in movimento coinvolti (letteralmente), lo sviluppo del gioco sembra limitato agli sviluppatori che hanno immerso i piedi in profondità nelle acque sante di networking, matematica, grafica e simili. Tuttavia, con il Web che si evolve così rapidamente e con tutti i nuovi protocolli e biblioteche che si sono espressi negli ultimi anni, è ora super semplice iniziare con la costruzione di giochi multiplayer basati su browser. In questo articolo, esamineremo l’implementazione passo -passo di un gioco multiplayer in tempo reale invasori dello spazio (AH, la nostalgia!) con Phaser3 e Ably Realtime. Ho ospitato il gioco finale su https: // Space-Invaders-Multiplayer.Herokuapp.com/ per te provarlo. Lungo la strada, comprenderemo l’architettura, la progettazione del sistema, i protocolli di networking dietro questo, e guarderemo anche gli avvertimenti da tenere a mente quando si costruiscono giochi basati su browser multiplayer. Questa serie di tutorial è suddivisa in quattro parti:

• Parte 1: Introduzione ai concetti di gioco e alla Biblioteca Phaser
• Parte 2: valutazione dei protocolli di networking per le app in tempo reale
• Parte 3: implementazione del codice lato server per mantenere in sintonia tutti i giocatori
• Parte 4: finire il codice lato client per rendere il gioco

Un’ultima cosa prima di iniziare. Questo articolo assume una comprensione di base di JavaScript ed Express/Nodejs. Cercherò di spiegare tutto il resto il più possibile ����‍����

Facciamo il gioco!

Parte 1 – Introduzione a concetti di gioco e phaser

Cominciamo guardando le regole per il gioco in quanto non sarà esattamente lo stesso del classico retrò originale.

Regole di gioco per gli invasori dello spazio multiplayer

• Quando un nuovo giocatore si unisce, verrà assegnato in modo casuale un avatar mostro tra le tre varietà disponibili.
• Ogni giocatore può spostare il proprio avatar a sinistra o a destra usando i tasti freccia sulla tastiera
• Ogni giocatore vedrà il proprio avatar in bianco ma vedrà tutti gli altri in un colore casuale che è pre-assegnato a loro
• Quando un numero preimpostato di giocatori si unisce al gioco, viene lanciata una nave. Questa nave si muove lungo l’asse orizzonale in una direzione scelta casualmente che cambia casualmente ogni 5 secondi. Insieme a questo, la velocità della nave cambierà anche. Questa nave spara anche a proiettili a intervalli regolari che possiamo preimpostare anche
• Tutti gli avatar si muovono automaticamente verso il basso con un incremento preimpostato durante il gioco.
• L’obiettivo di vincere il gioco è arrivare al bordo inferiore dello schermo del gioco senza essere ucciso da uno o più proiettili colpiti dalla nave.

Componenti di un gioco multiplayer in tempo reale

Anche se può sembrare che ci siano un sacco di cose che stanno accadendo dietro un gioco in tempo reale in rete, si riducono davvero a tre componenti principali:

Diamo un’occhiata a ciascuno di questi ulteriormente.

1. Risorse

Le risorse sono gli elementi critici che compongono il gioco. Se desideri che un oggetto appaia nel tuo gioco, puoi disegnarne uno sulla tela del gioco, o meglio ancora usare un’immagine o un foglio sprite e animare. Allo stesso modo, qualsiasi audio che desideri introdurre e giocare nel gioco cadrebbe sotto le sue risorse.

Se sei interessato a creare il tema del tuo gioco Super Arcade, puoi seguire questo tutorial di Pixel Art di Glauber Kotaki per imparare come.

2. Fisica

La fisica è ciò che ci consente di spostare le risorse e decide come diversi oggetti nel nostro gioco interagiscono tra loro. Ad esempio, in un semplice gioco di pong, la palla viene rimbalzata in una certa direzione, con una certa velocità a seconda della parte della paletta con cui si è scontrata. Allo stesso modo, nel nostro gioco, questo potrebbe includere il calcolo in cui la nave deve andare, con quale velocità, sparatoria di proiettili, collisione di questi oggetti proiettili con avatar dei giocatori, ecc.

Tutte queste cose sono sostanzialmente calcoli matematici in linea con i concetti di fisica, sotto il cofano. Ma così tanta matematica può essere schiacciante scrivere da zero anche per un semplice gioco. Quindi, invece di scrivere ogni da zero, possiamo usare un motore di fisica che può fare la maggior parte della magia matematica per noi.

3. Networking

Il componente principale finale che è particolarmente importante per un gioco online in diretta multiplayer è il networking. Può essere super difficile mantenere la sincronizzazione tra tutti i giocatori, capire quale giocatore è morto e se tutti gli altri sono d’accordo con tale affermazione.

Non preoccuparti se tutto ciò inizia a sembrare complesso, non deve esserlo. Ci sono molti modelli di progettazione preesistenti che possono aiutarci a iniziare nel modo corretto. Possiamo scegliere come vogliamo che sia l’architettura del gioco, rispetto ai meccanici del gioco particolare in questione. Durante questa serie di articoli, parleremo degli schemi e delle scelte architettoniche con cui sono andato a costruire questo gioco e perché.

Ora che abbiamo una migliore comprensione dei componenti principali, esploriamo come possiamo farli funzionare nel nostro gioco.

Utilizzo di Phaser 3 per aggiungere risorse e abilitare la fisica

Phaser è un framework JavaScript che rende il framework JavaScript che resa WebGL per HTML5. Useremo Phaser 3 per costruire il gioco. Il motivo per cui menziono specificamente la versione è che ci sono molti cambiamenti di rottura tra Phaser 2 e 3, inclusa la sintassi. Inoltre, nel caso in cui stai cercando di aggiungere alcune nuove fantastiche funzionalità al gioco da solo in futuro, dovresti sapere cosa/dove cercare.

Phaser non solo ci consente di visualizzare le risorse su una tela, riprodurre animazioni e suoni, ecc. Su una pagina web, ma viene fornito anche con un motore di fisica integrata (multiplo in realtà). Ciò significa che possiamo solo dire che cose come ciò che deve essere fatto quando due oggetti si scontrano e manterranno automaticamente un occhio per la collisione ed eseguirà un pezzo di codice se succede.

C’è davvero una buona serie di tutorial video per Phaser che consiglierei se è la prima volta che lavori con Phaser 3.

Nella versione TL; DR di esso, con Phaser3, possiamo specificare un oggetto di configurazione che avrebbe le informazioni sulla tela e sul gioco stesso, comprese le dimensioni della tela, i suoi attributi di stile, le varie scene incluse nel nostro gameplay (discusso a breve), tipo di motore fisico (come Phaser ha molti), ecc.

Passiamo quindi l’oggetto di configurazione per avviare un nuovo gioco.

Questo potrebbe sembrare un po ‘confuso perché non hai ancora visto alcun codice. Facciamolo dopo.

Iniziare con il gioco

Per ora arriviamo direttamente alla schermata del gioco. Ci preoccuperemo delle pagine di lancio e classifica, più tardi. Il nostro gioco sarebbe una pagina HTML con una tela resa sopra. Questa tela manterrà e eseguirà il gioco reale. Quindi, creiamo un file, chiamiamolo indice.html . Per mantenere le cose organizzate, memorizzeremo tutti i nostri file HTML in una cartella chiamata Views e tutti i file JavaScript sul lato client in una cartella chiamata Public . Iniziamo le viste/indice.File HTML con uno scheletro di base:

Come puoi vedere, tutto ciò che stiamo facendo qui è il collegamento ai file CSS e JS che aggiungeremo a breve, ma soprattutto il collegamento al Phaser JS CDN. È possibile copiare il CSS direttamente dal progetto GitHub

A parte questo, all’interno del corpo HTML, abbiamo un div con un ID di container di gioco . Qui è dove aggiungeremo la nostra tela di gioco tramite JavaScript.

Creiamo un file nella cartella pubblica, chiamalo script.JS e inizia definendo l’oggetto di configurazione del gioco di cui abbiamo parlato prima.

Come puoi vedere, oltre a specificare le dimensioni della tela e del suo colore di sfondo, abbiamo anche specificato dove deve andare questa tela (identificata dal genitore) e una serie di scene che vorremmo far parte di questo gioco.

Phaser usa il concetto di “scene” per organizzare il contenuto del gioco. Puoi pensare a una scena come a ciò che sei visivamente in grado di vedere in qualsiasi momento. Durante il gioco, se il gioco passa su un background diverso con interazioni diverse tra gli oggetti del gioco, allora è probabilmente una scena separata da quello che stavi visualizzando prima.

Per il nostro gioco, avremo una singola scena (identificata da GamesCene). Una scena in phaser è una classe che estende il phaser.Classe di scena. Definiamo questo per il nostro gioco. Aggiungi il seguente codice sopra l’oggetto Config mentre fa riferimento alla classe GamesCene.

Come puoi vedere, questa classe ha tre metodi vuoti. Questi sono forniti con il phaser.Classe di scena. Ognuno di questi metodi ha una funzione diversa come spiegato di seguito

1. Il metodo Preload () ottiene tutte le risorse di cui potremmo aver bisogno, da dove si trovano, le carica e li tiene pronti per quando vorremmo aggiungerle al nostro gioco.
2. Il metodo create () viene eseguito una volta quando il gioco funziona per la prima volta. Possiamo aggiungere tutte le inizializzazioni variabili, le definizioni di animazione, ecc.
3. Il metodo update () viene eseguito continuamente in un ciclo finché il gioco è acceso e quindi è in grado di aggiornare costantemente gli oggetti del gioco secondo la logica del gioco. Aggiorneremo gli avatar, tireremo i proiettili, sposteremo la nave, tutto in questo metodo..

Caricamento delle risorse e creazione di animazioni

Andiamo avanti e cariciamo alcune risorse ora. Definire il metodo preload () come segue

Inizialmente ho ospitato questo gioco su glitch che memorizza tutte le risorse nel suo secchio, recuperabili da un collegamento CDN. Puoi usare lo stesso, altrimenti Amazon S3 è un’altra opzione popolare.

Abbiamo aggiunto tre tipi di avatar, tutti in bianco e altri tre colori. Oltre a quelli, abbiamo anche aggiunto risorse per la nave, il proiettile e, naturalmente, l’esplosione da giocare quando un giocatore muore.

Come puoi vedere, abbiamo caricato una risorsa di fuoristrada in Phaser usando questo.carico.spritesheet () e gli ha inviato tre parametri:

• l’identificatore
• Percorso al file effettivo
• Le dimensioni del file (in pixel).

Possiamo anche chiamarla un’immagine ma poi non saremo in grado di fare le fantastiche animazioni con essa come vedrai a breve.

P.S. C’è un modo migliore per implementare i colori avatar. Potremmo semplicemente aggiungere una tinta a colori a uno sprite esistente invece di caricare lo stesso oggetto in più colori come risorse separate. Non so ancora come, ma lo aggiornerò quando l’ho capito 🙂

Se ispezionate il foglio sprite “esplosione”, vedrai che è un mucchio di immagini diverse posizionate l’una accanto all’altra. Il modo in cui causiamo una “animazione” è passare attraverso queste diverse immagini a una velocità particolare che fa sembrare che in realtà sia un video trasparente di un’esplosione che sta accadendo.

Nel metodo Create (), definiremo l’animazione per questa esplosione:

Abbiamo usato Phaser questo.Anims.Metodo create () per creare l’animazione. Questo metodo assume:

• La chiave che useremo più tardi per riprodurre questa animazione
• frame che generano frame usando l’identificatore dell’asset a cui vorremmo applicare questa animazione
• Framera che specifica la velocità con cui vorremmo suonare questa animazione
• Ripeti che specifica quante volte l’animazione verrà eseguita
• HideonComplete specifica se l’asset che veniva animata dovrebbe scomparire dopo che l’animazione è stata fatta

Per ora non aggiungeremo nulla nel metodo update (). Se noti, non abbiamo effettivamente istanziato il gioco, lo faremo in una parte successiva di questa serie di articoli.

Per ora è tutto. Impareremo a conoscere il networking per le app in tempo reale nella parte 2 – Valutazione dei protocolli di networking per le app in tempo reale

Tutti gli articoli di questa serie:

• Parte 1: Introduzione ai concetti di gioco e alla Biblioteca Phaser
• Parte 2: valutazione dei protocolli di networking per le app in tempo reale
• Parte 3: implementazione del codice lato server per mantenere in sintonia tutti i giocatori
• Parte 4: finire il codice lato client per rendere il gioco

Una versione separata rilevante per questo tutorial è disponibile su GitHub se desideri verificarlo.

Puoi anche seguire il progetto GitHub per gli ultimi sviluppi di questo progetto.

Se hai domande, non esitate a contattarmi su Twitter @srushtika. I miei DM sono aperti 🙂

Categoria: edificio multiplayer

Chimeraland è un MMORPG di Survival Sandbox Open to World gratuito (gioco di ruolo online in modo massiccio) per PC (Windows) e Mobile (Android/iOS) sviluppato da Pixel Soft e pubblicato da Level Infinite. Il gioco è ambientato in un mondo preistorico e mitico […]

Muck è un gioco RogueLike di sopravvivenza a single-giocatore e multiplayer gratuito per PC (Windows) del famoso sviluppatore norvegese, artista e YouTuber Dani (che ha anche realizzato il gioco Crab e Karlson). Il fango è una miscela di sopravvivenza (e molto) più casuale (molto) impegnativa (E.G. […]

Il sandbox è un ecosistema di gioco e il mondo virtuale e il mondo virtuale di gioco free-to-play, decentralizzati e guidati dalla comunità per PC (Windows e Mac) nello sviluppo attivo (Open Alpha) e basato sulla blockchain Ethereum (simile a Decentraland). I giocatori possono costruire, possedere, condividere e […]

Core è una piattaforma di raccolta di giochi e giochi di giochi gratuiti simili a Crayta e Roblox. Core è in altre parole un multiverso di giochi gratuiti da giocare e mondi da esplorare progettati da una comunità globale di sviluppatori che puoi facilmente […]

Crayta è una piattaforma di gioco collaborativa gratuita e collezione di giochi arcade multiplayer costruita su Unreal Engine 4 per PC, simile a Core e Roblox. I giocatori possono saltare e creare giochi insieme nel cloud, indipendentemente dalla loro esperienza di programmazione. Da […]

Wild Terra Online è un mmorpg gratuito con sandbox e funzionalità di sopravvivenza, ambientato in un mondo fantasy completamente controllato da giocatore. Non avrai bisogno di completare una catena di compiti e uccidere mille lupi per creare attrezzature. Tutto è molto […]

Ark: Survival Evolved (Mobile) è un gioco di sopravvivenza a azione-avventura mobile* free-to-play di Studio Wildcard per mobile (Android, iOS), ambientato in un mondo preistorico in cui i giocatori, che sono bloccati su un’isola, devono sopravvivere a roaming roaming dinosauri e altri animali preistorici, pericoli naturali, […]

Intuito è un gioco di sopravvivenza a tema sandbox a tema zombi e gioco sparatutto per PC (Windows, Mac e Linux) nel genere Emerging MMO/Multiplayer Apocalypse Survival (anche se puoi anche giocare da solo o in Coop in PVE). Piuttosto che concentrarsi su […]

Totemori è un gioco di brawler multiplayer con schermo condiviso con schermo condiviso divertente e divertente e innovativo in cui costruisci torri mentre si cerca di rovesciare tutti gli altri. Totemori presenta un multiplayer locale contro e cooperativo per un massimo di 4 giocatori. Gioca contro i tuoi amici o pratica contro i robot, […]

Galactic Junk League è un’arena Crafter Free to-Play competitiva-uno sparatutto mescolato con possibilità di costruzione di navi quasi infinite. Costruisci qualcosa. Combattere chiunque. Nello spazio. Costruisci le tue navi spazzatura per letteralmente eventuali forme e dimensioni e combattere contro le creazioni di […]

Creativeverse è un delizioso gioco MMO Sandbox MMO gratuito e di prossima generazione su avventura, esplorazione e creatività con i tuoi amici. Ed è ora libero di giocare. Sei bloccato in un mondo vasto e misterioso che è circondato da bestie feroci e […]

Gunscape è un kit di costruzione FPS. È un gioco che ti consente di andare selvaggio con la tua creatività in una sandbox di azione di pompaggio! Gunscape lo fa fornendo strumenti di facile utilizzo basati su un’interfaccia di posizionamento a blocchi che tutti hanno già familiarità per creare un singolo giocatore […]

Trove è un voxel mmorpg di Action-Action-Adventure Mmorpg di Trion Worlds per PC (Windows, Mac), Xbox One, PS4 e Nintendo Switch. Trove presenta innumerevoli regni pieni di missioni, casse e nemici grandi e piccoli. Esplora e crea la tua strada […]

Roblox è una piattaforma di creazione di videogiochi online e di gioco in più multiplayer gratuita (simile a Core e Crayta) che consente agli utenti di progettare e condividere i propri giochi e livelli e giocare a tutti i tipi di giochi creati da altri utenti, da [da [[ …]