Crea un videogioco in JavaScript – parte 1

wow-signori-della-guerra-di-draenor-screenshot_1920
Dall'avvento di JavaScript grazie a HTML 5 ed ES6, JavaScript è ora utilizzato per progettare server, gestire intere applicazioni web. Creare un videogioco in JavaScript è già ora possibile, ma è davvero possibile progettarne uno con questo linguaggio?

In questa serie di articoli dedicati alla progettazione di videogiochi in JavaScript, vedremo insieme tutto ciò che è possibile fare e tutti gli strumenti a nostra disposizione per progettare giochi completi. Per ora, faremo il punto sui framework JavaScript per crearli e poi discuteremo dei loro vantaggi e svantaggi.

SOMMARIO

 

Come funziona?

Com'è possibile che oggi sia possibile creare un videogioco in JavaScript mentre qualche anno fa i videogiochi per browser web erano riservati solo a Flash?
Tutto è iniziato con l'arrivo di HTML5 e di un solo tag: . Questo tag, a prima vista classico, in realtà incorpora un'intera API JavaScript nativa che ti consente di utilizzare questo tag per disegnare forme. Infatti, recuperando il contesto della tela dal DOM in questo modo:

const ctx = document.getElementById("canvas").getContext("2d");

Questo oggetto "contesto" viene quindi utilizzato per disegnare linee, quadrati, cerchi, visualizzare immagini e persino visualizzare il contenuto di un'altra tela come immagine. Ecco alcuni esempi di cosa è possibile fare in modo nativo

// Dessiner une simple ligne
ctx.lineWidth = 20; // Epaisseur des formes
ctx.strokeStyle = "red"; // Couleur du contour
ctx.fillStyle = "rgba(50, 230, 100, 0.5)"; // Couleur du contenu
// On démarre un nouveau chemin
ctx.beginPath();
 ctx.moveTo(0, 0); // On déplace le curseur à la position x à 0 et y à 0
 ctx.lineTo(150, 0); // On dessine une ligne qui part du curseur jusqu'à la position x à 10 et y à 0
 ctx.stroke(); // On dessine le contour du chemin que nous avons créé (ici, une ligne)
ctx.closePath();
// Dessiner un rectangle
ctx.strokeRect(50, 50, 100, 100) // on dessine un rectangle partant de la position x à 50 et y à 50, d'une largeur de 100px et une hauteur de 100px
ctx.lineWidth = 2;
ctx.beginPath();
 ctx.rect(20, 20, 150, 150);
 ctx.fill();
 ctx.stroke();
ctx.closePath();

Puoi vedere il rendering in Facendo clic su questo collegamento (jsfiddle).
Ok, va tutto bene, ma come possiamo creare videogiochi da quadrati e rettangoli?
La magia funziona grazie a due concetti in particolare:

  • Gestione delle immagini. In effetti, in un gioco 2D, quasi tutto ciò che vedi sullo schermo non sarà né più né meno di sovrapposizioni di immagini parziali o complete.
  • Il ciclo globale. Il ciclo globale rappresenta la frequenza di aggiornamento del gioco perché, affinché il gioco sia fluido, il ciclo richiamerà le funzioni di aggiornamento e visualizzazione delle immagini per simulare, ad esempio, un movimento. È inoltre grazie alla velocità che il loop impiega a terminare che determiniamo il FPS (Frame Per Seconds / Images Per Seconds): per raggiungere 60 FPS, il loop non deve durare più di 16ms.

Naturalmente, questi due concetti non sono gli unici e non sono facili da implementare. Fortunatamente esistono già molti Framework JavaScript che si occupano di tutti questi concetti, permettendoci di concentrarci sul gameplay.
 

Framework per giochi 2D

crosscode_shizuka___a_new_perspective_by_bostl-d8tfvmw
Quello che segue è un elenco dei framework JavaScript più popolari. I vantaggi e gli svantaggi di cui parleremo derivano dal mio feedback su di essi. Vi invito quindi a formarvi una vostra opinione su questi quadri 🙂
 

Phaser.io

TL; DR: Il framework più famoso in JavaScript. Gratuito, potente, una moltitudine di funzionalità e altrettanti plug-in, una community vastissima. Questo ha tutto il necessario per progettare qualsiasi tipo di gioco, ma per i miei gusti lascia una strana sensazione di una struttura "catch-all".

Descrizione: Phaser.io si è affermato come il framework di gioco JavaScript più grande e famoso. Con la sua vasta comunità e il suo elenco infinito di plugin, ha tutto ciò di cui uno sviluppatore ha bisogno per progettare il suo gioco in buone condizioni. D'altra parte, se c'è una cosa per cui posso criticare questo framework, è il suo lato "catch-all": per la gestione complessiva della tela, Phaser ha il suo algoritmo, ma ha anche una versione leggera di PIXI; per la fisica, Phaser ha 3 tipi di fisica da tre diverse librerie. Ovviamente, è meglio fare la tua scelta ed evitare di integrare tutta la fisica o l'algoritmo di loop fornito dall'API.
Il +

  • La sua community e i suoi plug-in
  • performance

Il -

  • Il suo lato "catch-all".
  • Il gioco, una volta minimizzato, rimane piuttosto pesante

Il sito: http://phaser.io/

Impatto JS

TL; DR: Impatto JS è per me il miglior quadro Giochi JavaScript. In effetti, tutto è estremamente semplice ed efficace. Purtroppo, non essendo aggiornato da quasi due anni, non ha più peso nei confronti dei leader di mercato.

Descrizione: Oh caro, che dire di questo quadro? Che sia stato realizzato da una sola persona durante la sua tesi in Informatica o che sia estremamente facile da imparare e ti permetta di scoprire le gioie delle meccaniche dei videogiochi? Con il proprio editor di livelli in WYSIWYG (What You See Is What You Get) e la sua comunità attiva molto ampia con plugin molto interessanti, questa libreria era perfetta sia per gli sviluppatori principianti che per gli esperti. Certo, non tutto è così roseo. Quando vediamo che costa 100$ anche se ormai da qualche anno non è aggiornato, che la community non esiste più e che i plug-in non sono più disponibili su Internet, non possiamo che essere tristi. Nonostante tutto, grazie a questo framework sono stati rilasciati giochi molto molto buoni, che vedremo alla fine di questo articolo.
Il +

  • Il quadro più semplice da imparare
  • Un editor di livelli molto efficace
  • Plug-in molto interessanti e buoni tutorial

Il -

  • Il suo prezzo (100 $)
  • Non aggiornato da 2 anni
  • Community scomparsa e plug-in quasi introvabili (il sito che li ospitava è stato chiuso)
  • In termini di prestazioni, questo framework è adatto per i minigiochi

Il sito: http://impactjs.com/
 

PandaJS

TL; DR: PandaJS è un framework fortemente ispirato, inizialmente, aImpactJS, poi varie funzionalità offerte da Phaser.io. Potremmo quasi qualificarci PandaJS della continuazione diImpattoJS in versione gratuita ma, come quest'ultima, non è più aggiornato dal 2015.

Descrizione: Avrebbe potuto essere il degno successore di ImpactJS. Infatti, fortemente ispirato da ImpactJS, PandaJS è stato dotato di funzionalità molto interessanti che mancavano a ImpactJS come la gestione del WebGL e gestione delle particelle e, soprattutto, è gratis! Purtroppo, a causa della sua scarsa visibilità, la comunità ha faticato a costruirsi da sola e oggi il progetto sembra morto.
Il +

  • Più efficiente diImpattoJS
  • Gestione avanzata delle particelle

Il -

  • Progetto morto
  • Piccola comunità, nessun plugin

Il sito: http://www.pandajs.net/
 

Pixi

TL; DR: PIXI, a differenza degli altri framework sopra menzionati, non è realmente un framework di gioco.Questa libreria è in realtà un Motore di tela HTML5. È il framework più ottimizzato e veloce per la gestione della tela HTML5 e consente di creare giochi oltre a grafica, animazioni, ecc. Tutti i framework di gioco JavaScript lo usano.

Descrizione: PIXI è IL motore tela per eccellenza. Ultra veloce, facile da imparare, è pensato anche per essere neutrale in termini di architettura, consentendo agli sviluppatori di progettare giochi ma anche grafica, animazioni e molti altri. PandaJS et Phaser.io uso PIXI per gestire la gestione degli oggetti visualizzati sul canvas. Il suo vero valore aggiunto è che non dobbiamo più preoccuparci di prestazioni e frequenza di aggiornamento perché questa libreria è la più avanzata in termini di prestazioni.
Il +

  • Architettura neutra, che ti consente di fare qualcosa di diverso dai videogiochi
  • Ultra veloce e facile da usare
  • Ha una funzione per gestire l'intero ciclo principale di un gioco, il che è un ottimo punto

Il -

  • Essendo la sua architettura neutra, non ci sono funzionalità specifiche per i videogiochi (come la gestione dei livelli, dei menu, ecc.)

Il sito: http://www.pixijs.com/
 

Creatore di giochi di ruolo MV

TL; DR: Non è proprio un framework per videogiochi in JavaScript ma più un software chiavi in ​​mano. Ti permette di creare solo giochi di ruolo. La sua interfaccia grafica facilita la maggior parte degli sviluppi (come la creazione di animazioni, livelli, database di gioco, ecc.). Inoltre, se questo software si trova in questo articolo, è perché è possibile modificare e aggiungere nuove funzionalità in JavaScript.

Descrizione: Creatore di giochi di ruolo è un software chiavi in ​​mano per lo sviluppo di giochi di ruolo top-down. Per molto tempo, software Creatore di giochi di ruolo usato il rubino come linguaggio di progettazione ma l'ultima versione, Creatore di giochi di ruolo MV, sono passato a JavaScript ed è una buona cosa! Il software dispone di un'interfaccia grafica completa e ottimizzata per ridurre i tempi di sviluppo: la creazione di livelli, animazioni, eventi presenti nei livelli. Inoltre, è estremamente facile convertire il gioco in diversi formati (Android/iOs mobile, web e desktop Windows).
Il +

  • L'editor di livelli, l'animazione e il database (personaggi, oggetti, mostri, combattimenti, ecc.)
  • La possibilità di modificare tutte le funzionalità predefinite del gioco con JavaScript
  • Esporta rapidamente in diversi formati

Il -

  • pagare (80 $)
  • Può essere utilizzato solo per giochi di ruolo
  • Documentazione molto debole
  • Comunità limitata sull'ultima versione

Il sito: http://www.rpgmakerweb.com/
 

E i giochi 3D?

Ci sono ancora molti altri framework JavaScript per la creazione di giochi 2D che non ho menzionato, ma per quanto riguarda i giochi 3D? È anche possibile? Bene per risponderti: oui. Questo è possibile grazie all'API WebGL che ti consente di attingere alle risorse della scheda grafica del tuo computer. Essendo questa tecnologia recente, è preferibile avere il browser aggiornato.
Attualmente, esistono due principali framework per la creazione 3D tra cui BabylonJS che è posizionato come punto di riferimento per lo sviluppo di giochi 3D. Tre JS, nel frattempo, è equivalente a PIXI per il 3D, vale a dire che è neutro e permette di fare qualcosa di diverso dai videogiochi.
 

Esporta il tuo gioco su dispositivo mobile

piccioni muratori
Abbiamo visto i diversi framework per lo sviluppo di giochi in JavaScript, ma oggi la maggior parte dei giochi non si gioca su un browser... È possibile esportarli ad esempio su dispositivi mobili?
 

Eseguito

Ejecta, sviluppato dal creatore diImpatto JS è una piccola pepita. Riservato solo alle applicazioni iOs, consente di visualizzare la tela a schermo intero sul terminale mobile. Possiamo ovviamente usare alcuni tag HTML consentendo, ad esempio, di visualizzare menu e pop-up sullo schermo. Ejecta incorpora anche un'API aggiuntiva che consente di gestire la memoria locale del telefono, l'accelerometro, ecc. La prestazione è alla pari con quella diImpatto JS.
Il +

  • potente
  • Abbastanza leggero
  • Gratuito, a differenza Impatto JS
  • Consente di utilizzare facilmente le varie funzioni del telefono

Il -

  • Riservato solo per iOS

Il sito: http://impactjs.com/ejecta
 

Intel XDK

Non molto conosciuto, eppure estremamente efficiente, Intel XDK permette di costruire un gioco JavaScript sviluppato da qualsiasi framework JS (Phaser, Impact JS, ecc.) su tutti i media esistenti (Android, iPhone, Windows App/Desktop, Mac, XBOX ONE, PS4 e molti altri)
Il +

  • Non molto goloso e molto leggero
  • Tiene conto delle funzionalità del supporto desiderato
  • Prendi i tag HTML
  • Consente di costruire su tutti i supporti esistenti

Il -

  • La gestione del suono e della musica non sembra ancora essere sviluppata (drop in performance, sound bug)

Il sito: https://software.intel.com/en-us/intel-xdk
 

TelefonoGAP

Volutamente non l'ho menzionato TelefonoGAP, che è il software più noto per creare la tua applicazione su dispositivi mobili. Non sono un grande fan per il semplice e buon motivo che oltre a creare App abbastanza pesanti, non sono efficienti e non ottimizzate per i videogiochi.
Il sito: http://phonegap.com/
 

Conclusione

Ora sappiamo che i giochi in JavaScript non hanno nulla da invidiare ad altri concorrenti. Con la sua panoplia di framework, gli sviluppatori JavaScript possono trovare solo quello che stanno cercando.
Inoltre, e per concludere, propongo un gioco sviluppato con Impatto JS che ha attirato la mia attenzione: Codice incrociato. Un'enorme quantità di lavoro è stata fornita dal team di sviluppo e il risultato è davvero impressionante! Non ha nulla da invidiare ad altri giochi indipendenti della sua categoria. Divertiti 🙂
 

Cosa sarà nel prossimo articolo

Nel prossimo articolo ci concentreremo un po' di più sullo sviluppo di un videogioco in 2D attraverso due librerie:

  • PIXI. Insieme vedremo come funziona PIXI sviluppando un minigioco dalla A alla Z
  • Siderale JS. Questa libreria, ancora in fase di sviluppo all'interno JS Repubblica, consentirà di sviluppare videogiochi utilizzando un approccio simile a Impatto JS et Creatore di giochi di ruolo: offre agli sviluppatori un pannello di funzionalità semplici e configurabili per facilitare il sviluppo di giochi completo/complesso.

 
Christophe, JS-repubblicano @JSRepublic
[actionbox color=”default” title=”” description=”JS-REPUBLIC è una società di servizi specializzata nello sviluppo di JavaScript. Siamo un centro di formazione riconosciuto. Trova tutta la nostra formazione tecnica sul nostro sito partner dedicato alla Formazione” btn_label=”La nostra formazione” btn_link=”http://training.ux-republic.com” btn_color=”primary” btn_size=”big” btn_icon=”star” btn_external =”1″]