Primi passi per lo sviluppo di giochi con Phaser

L'arrivo di HTML5 Ha cambiato il modo in cui vediamo il web, non solo ci ha fornito strumenti migliori per il loro sviluppo, ma ci ha anche aperto la possibilità di sviluppare applicazioni che vanno oltre, come nel caso dei videogiochi.
Il vantaggio di realizzare un videogioco in HTML5 è che è compatibile praticamente con qualsiasi dispositivo dotato di browser e ciò che è ancora meglio senza la necessità di scaricare o eseguire installazioni aggiuntive.
Grazie a questa nuova popolarità, sono proliferati i framework per lo sviluppo di videogiochi, ognuno con le sue caratteristiche e vantaggi, questa volta ci concentreremo su Phaser, i motivi sono diversi e li possiamo vedere nel seguente elenco:

• Ha una grande comunità ed è attivo.
• Viene aggiornato periodicamente.
• È gratuito.
• Ha strumenti di fisica che ci semplificano la vita.

Quindi, poiché vediamo che ha alcuni vantaggi interessanti, lo installeremo, ma prima vediamo alcuni requisiti che il framework richiede.
1- Abbiamo bisogno dell'accesso a Internet per poter scaricare tutte le risorse che sorgono durante l'installazione del framework, incluso questo.
2- Dobbiamo aver installato o essere in grado di installare un server web dello stile LAMPADA o WAMP o MAMP a seconda del nostro sistema operativo, questo perché Phaser usa HTML5 e anche JavaScript Pertanto, per motivi di sicurezza, il nostro browser non accetterà esecuzioni locali.
3- Abbiamo bisogno delle autorizzazioni per accedere alle cartelle e ai servizi necessari che vengono impostati durante l'installazione del framework.
4- Abbiamo bisogno di un browser compatibile con HTML5 e che ha strumenti di debug, nel caso di questo tutorial useremo Firefox Developer Edition nella sua ultima versione al momento, tuttavia sono liberi di scegliere quella che sembra loro migliore.
5- Infine abbiamo bisogno di un editor di testo per poter scrivere il codice per gli esempi, poiché può sempre essere quello che abbiamo, anche se consigliamo Testo sublime o NotePad ++ a causa del gran numero di plugin che entrambi hanno che semplificano la nostra vita come sviluppatori.
La prima cosa che faremo per essere in grado di installare Phaser è quello di andare sul suo sito ufficiale e qui troveremo diverse risorse, tuttavia per ora andremo alla sezione che dice Scarica:

INGRANDIRE

Abbiamo diverse opzioni per il download, le due che possiamo usare sono per scaricare il file .zip o .tar.gz compresso, possiamo anche creare un clone da Github del progetto, nel nostro caso scaricheremo il progetto in .zip per velocizzare il processo. Una volta scaricato o clonato il progetto, le directory più importanti sono le seguenti:
docs / index.htmlQui abbiamo la voce alla documentazione offline e ufficiale della versione che abbiamo appena scaricato, può aiutarci a rivedere alcuni dettagli, anche se se abbiamo la possibilità di andare su Internet e documentarci, avremo sempre opzioni migliori.
build / phaser.min.jsQuesto è il nostro framework in quanto tale, è la libreria minimizzata e compressa che contiene tutti gli strumenti di cui avremo bisogno per iniziare i nostri primi progetti.
Dato che abbiamo scaricato il progetto, per verificare che tutto sia corretto dobbiamo semplicemente copiare la cartella decompressa dove possiamo accedervi con il nostro server web, generalmente è la directory www o public_html, tutto dipende davvero dal nostro ambiente.
Una volta lì, dobbiamo andare al nostro browser ed eseguire il nostro localhost / phaser o il nome che abbiamo inserito e vedremo l'elenco dei file, qui dobbiamo navigare nella seguente cartella: risorse / tutorial / 01 Guida introduttiva / hellophaser / index.html e possiamo apprezzare ciò che vediamo nello screenshot seguente:

INGRANDIRE

Il nostro primo giocoPoiché abbiamo verificato che il nostro ambiente funziona perfettamente, è tempo di realizzare il nostro primo gioco, per questo stabiliremo un obiettivo raggiungibile per il nostro livello in questo momento, dove alla fine dell'esempio dobbiamo essere in grado di mostrare un Sprite sullo schermo.
Nella cartella in cui abbiamo il framework sul nostro server web creeremo una nuova cartella, in questo caso la chiameremo phaser-esempio, dentro andremo a posizionare il file phaser.min.js alla radice di esso, creeremo un file chiamato index.html e un altro file chiamato main.js, dobbiamo anche posizionare un'immagine chiamata logo.png.webp quale sarà lo sprite che mostreremo, che può essere trovato nelle risorse del framework e questa può essere una dimensione consigliata di 180 per 64 pixel. Alla fine, la nostra directory dovrebbe assomigliare a questa:

Dato che ora abbiamo la nostra struttura stabilita dobbiamo iniziare a scrivere il codice per il nostro primo progetto, per questo quello che dobbiamo fare è aprire il nostro file index.html e lì includeremo i file .js che abbiamo creato, oltre a creare un che avrà come identificatore la parola giocoDiv. Vediamo come si presenta il nostro codice:

 Il nostro primo gioco su Phaser
Il nostro primo gioco =)

Questa sarà la base su cui verrà supportato il nostro gioco in modo che l'utente possa visualizzare il contenuto. Il prossimo passo nella creazione del nostro primo gioco è scrivere il codice per main.js, che gestirà tutta la logica del nostro gioco e contiene tre metodi chiave, vediamo:
precaricoQuesto metodo è responsabile del precarico di tutte le risorse di cui il nostro gioco ha bisogno, che si tratti di immagini, audio, video, ecc. Funziona sempre all'avvio.
creareQuesto metodo viene eseguito dopo che è terminato precarico e la sua funzione è quella di incorporare le risorse caricate nel nostro gioco, oltre a darci la possibilità di stabilirne l'assetto iniziale.
aggiornareInfine, questo metodo viene eseguito 60 volte al secondo e contiene la vera logica del nostro gioco, è ciò che ci dà il movimento per così dire.
Come si vede, ognuno di questi metodi è responsabile di uno stato del gioco, i primi due sono precedenti all'inizio del gioco, mentre il aggiornare si verifica durante l'esecuzione. Una volta definito cosa fa ogni metodo, dobbiamo solo vedere il codice di cui abbiamo bisogno:

 var mainState = {preload: function () {// Carichiamo l'immagine game.load.image ('logo', 'logo.png.webp'); }, create: function () {// Mostriamo la nostra immagine nel gioco this.sprite = game.add.sprite (200, 150, 'logo'); }, update: function () {// cambiamo l'angolo di un'unità 60 volte al secondo // questo ci darà un effetto di rotazione dell'immagine this.sprite.angle + = 1; }}; // qui iniziamo il nostro gioco e lo impostiamo // per usare il div gameDiv che abbiamo inserito nel nostro HTMLvar game = new Phaser.Game (400, 300, Phaser.AUTO, 'gameDiv'); game.state. add('main', mainState);game.state.start ('main');

Come possiamo vedere alla fine dei metodi creiamo una variabile chiamata gioco e in questo eseguiamo un'istanza di Phaser.Gioco dove passiamo alcuni parametri, al momento non è necessario conoscerli molto, li copiamo semplicemente come li vediamo. Ma più o meno questa è la parte in cui diciamo alla nostra applicazione di cercare Phaser in modo che ti dica cosa fare con i metodi che abbiamo creato sopra e alla fine con game.state.start è dove diciamo al framework di iniziare il nostro gioco.
Ora, se tutto è andato bene, eseguiremo il nostro progetto nel browser e dovremmo vedere l'immagine selezionata ruotare sullo schermo:

Nel caso di questo esempio abbiamo utilizzato un'immagine che rientra nelle risorse di PhaserTuttavia, non è proprio un requisito, con qualsiasi immagine potremmo ottenere gli stessi risultati. Un'altra cosa che possiamo notare nel nostro esempio è che sotto abbiamo la console di debug del browser aperta, questo strumento è il migliore amico che avremo poiché è lì che possiamo eseguire il debug dei diversi errori che potremmo trovare durante lo sviluppo dei nostri giochi.
Con questo abbiamo finito questo tutorial, l'abbiamo installato con successo Phaser, abbiamo conosciuto alcune delle caratteristiche iniziali di questo grande framework e con questo abbiamo creato una piccola applicazione o gioco. È importante prendere questo tutorial come punto di partenza per fare una ricerca un po' più approfondita su Phaser, poiché questo non è nemmeno l'1% di tutto ciò che ci offre, tuttavia è un primo passo che così spesso ci costa da fare.