Il pedone non riesce a raggiungere l’ottava traversa per la promozione? Risolvono HTML5, JS e Phaser!

Se Frodo uscendo di casa avesse buttato l’anello del dolore e del piacere o del potere nel giardino, la storia sarebbe finita subito senza costringere il lettore/spettatore a tuffarci in tutte le traversie del regno di Murdor per arrivare al monte Fato. E se il pedone arrivasse alla sua fatidica GIOIA, fino all’ ottava traversa avversaria dopo aver vissuto mille traversie , gli scacchi perderebbero il loro fascino, vedi game indirizzo: https://www.farwebdesign.com/projectgame/ . Quali tecnologie sono coinvolte in questo progetto? HTML5, Javascript, e il framework https://phaser.io/ per quanto riguarda gli strumenti servono un SERVER perchè la libreria lavora dinamicamente cpm il protocollo REST, ossia appoggiandosi al protocollo HTTP, un editor come Brackets, http://brackets.io/ , che simula in locale un server e un browser. Integrare il framework da scaricare in https://phaser.io/ nella pagina è molto semplice:

http://js/phaser.js
http://js/game.js

il game vivisezionato di una semplicità sconcertante come grafica è sviluppato all’ interno del file game.js e richiamerà i metodi inscritti in phaser.js, il framework nato per dare sviluppo alla dimensione dei giochi da browser. Vediamo quindi i fondamenti di tutta l’architettura del progetto. Il framework si appoggia in rete all’ oggetto WebGL che fornisce le risorse per un corretto funzionamento ma se non è disponibile HTML5 dispone dell’ oggetto Canvas al suo interno che consente comunque di far funzionare l’accrocchio, un pò come fa un gruppo di continuità quando un fulmine fa saltare la rete elettrica. Per far funzionare il tutto in locale bisognerà anche installare Node JS ma la cosa migliore è disporre direttamente di un FTP per il trasferimento file direttamente su server se ciò dovesse procurare problemi. Per chi volesse cimentarsi con Node in sintesi le cose da fare sono:

Download and install Node.js (https://nodejs.org)
Open terminal, install http-server: npm install http-server -g
Navigate to the project folder, run the server: http-server

A questo punto la fase introduttiva per lo sviluppo è completata, nonc i resta che sviluppare! Prima di fare ciò però occorre una fase di documentazione e definizione di obiettivi: dove vogliamo andare, che cosa ci proponiamo di fare, dove deve funzionare il tutto, quale è il target, quali sono le dinamiche del gioco, quali i suoi meccanismi??? Sappiamo che deve funzionare in rete in modalità cross browser per tutti i browser quindi senza limitazione, sappiamo che ci rivolgiamo a dei giovanissimi perchè certamente il gioco non offre una grafica elaborata, sappiamo che sulla sinistra abbiamo il nostro pedone che scacchisticamente deve avanzare, evitare degli ostacoli e arrivare al suo meritato premio in fondo alla via, la fatidica ottava traversa. Sappiamo che le funzionalità sono limitate ossia ci saranno due eventi importanti legati al movimento, ossia il mouseover e il mouseout in modo da consentire e bloccare lo scorrimento orizzontale del nostro eroe simile a Frodo che deve arrivare al monte Fato mentre verticalmente viene attaccato dalle incombenze della trama. Poi ci saranno tutte le domande legate agli effetti visivi che saranno primordiali, come per esempio che cosa succede quando il pedone tocca le sfighe cosmiche piovute dal cielo (in questo caso espresse graficamente con dei draghetti mostruosi) , cosa succede quando arrivo al tesoro e al premio alla fine del viaggio, cosa succede se sbaglio sempre e non vinco mai etc etc. I draghetti si muoveranno quindi verticalmente con una certa velocità e il nostro obiettivo di giocatori sarà quello di evitarli. Abbiamo già detto che si tratta di una creazione software minimalista che ha al suo interno il minimo indispensabile. Ci sarà nel gioco un EROE (il pedone) , ci saranno dei NEMICI, ci sarà uno sfondo che definirà il campo di gioco (la scacchiera dove tenta di camminare ed evitare ostacoli il pedone) ci sarà un simbolico premio finale o TREASURE e finisce qua. Quello che ci serve è il motore vero e proprio che fa muvere il tutto. Ora la domanda è cosa ci serve dal punto di vista operativo:

A – dobbiamo creare una NUOVA scena
B – dobbiamo configurare la GAME in modo da impostare i settaggi
C – dobbiamo creare una nuova partita:

// create a new scene
let gameScene = new Phaser.Scene(‘Game’);

// set the configuration of the game
let config = {
type: Phaser.AUTO, // Phaser will use WebGL if available, if not it will use Canvas
width: 640,
height: 360,
scene: gameScene
};

// create a new game, pass the configuration
let game = new Phaser.Game(config);

fatto tutto ciò il game punterà al service di phaser.io WebGl o in alternativa se non lo troverà disponibile si appoggerà al CANVAS dell’ HTML.

A questo punto iniziano i dolori: quale è il ciclo di vita di una scena?

Esistono sostanzialmente quattro fasi e nel nostro script di sviluppo dobbiamo scrivere delle funzioni specifiche che prima inizializzano poi precaricano e infine creano e aggiornano:

-inizializzazione
-preload()
-create()
-update()

// create a new scene
let gameScene = new Phaser.Scene(‘Game’);

// load assets
gameScene.preload = function(){
// load images
this.load.image(‘background’, ‘assets/background.png’);
this.load.image(‘player’, ‘assets/player.png’);
};

// called once after the preload ends
gameScene.create = function() {
// create bg sprite
let bg = this.add.sprite(0, 0, ‘background’);
// change the origin to the top-left corner
//bg.setOrigin(0,0);
// place sprite in the center
bg.setPosition(640/2, 360/2);
let gameW = this.sys.game.config.width;
let gameH = this.sys.game.config.height;
console.log(gameW, gameH);
console.log(bg);
console.log(this);
};
// set the configuration of the game
let config = {
type: Phaser.AUTO, // Phaser will use WebGL if available, else Canvas
width: 640,
height: 360,
scene: gameScene
};

// create a new game, pass the configuration
let game = new Phaser.Game(config);

Questo è solo l’inizio. In realtà le problematiche legate al movimento del player a quello dell’ ENEMY i settaggi su tutte le proprietà di scalabilità grafica e di velocità degli elementi, persino gli effetti speciali presenti nel gioco che si ottengono richiamando il metodo CAMERAS ci terrebbero impegnati in questo tutorial introduttivo per molto molto tempo. L’articolo vuole incuriosire e rimandare a numerosi esempi presenti in https://phaser.io/download in modo da liberare il vostro potenziale creativo e consentire a Frodo e al suo pedone da portare in ottava traversa di ritrovare la felicità perduta (almeno nella simulazione virtuale). Soprattuto si capisce l’importanza di studiare javascript ultime versioni, perchè JS adesso è usato anche sugli spaghetti! Un gioco come https://www.farwebdesign.com/projectgame/ richiede prima di familiarizzare con numerosi elementi presi singolarmente e fasi di test prolungate, le domande sono tante, quali sono i settaggi e le prorprietà coinvolte? Come si muove il personaggio nello spazio? Può ruotare nello spazio? Come posso creare effetti di collisione? Posso anche inserire i suoni? Fortunatamente il framework PHASER ci mette a disposizione tutte le informazioni necessarie per poter iniziare.

Rispondi

Inserisci i tuoi dati qui sotto o clicca su un'icona per effettuare l'accesso:

Logo di WordPress.com

Stai commentando usando il tuo account WordPress.com. Chiudi sessione /  Modifica )

Google photo

Stai commentando usando il tuo account Google. Chiudi sessione /  Modifica )

Foto Twitter

Stai commentando usando il tuo account Twitter. Chiudi sessione /  Modifica )

Foto di Facebook

Stai commentando usando il tuo account Facebook. Chiudi sessione /  Modifica )

Connessione a %s...