Muovere gli sprite con Easel.js e Kibo

Un progetto che utilizzi easel.js si compone almeno di due funzioni, la prima serve all'inizializzazione del gioco e viene invocata solo una volta al lancio dell'applicazione (nel nostro caso si chiama inizioGioco); la seconda serve ad gestire l'avanzamento di stato del gioco e per questo viene chiamata dall'oggetto Ticker con una frequenza stabilita, ad esempio 30 frame per secondo, e gestisce tutto quanto riguarda il disegno sulla nostra scena (di solito questa funzione si chiama tick).

SpriteSheet

La prima parte del nostro progetto consiste nel creare l'aereo e fare in modo che venga pilotato dal giocatore con la pressione dei tasti cursore. Per adempiere a questo compito dobbiamo prendere confidenza con l'oggetto SpriteSheet, che ci consente di descrivere al motore di easel.js le animazioni contenute all'interno di una immagine. Guardiamo questo codice:

var aereo_sprite_sheet = new SpriteSheet({
  images: ["sprites/plane.png"],
  frames: { width:66, height:66},
  animations: { fly:[0, 2, 'fly'], boom:[3, 10, false] }
});

In queste poche righe creiamo un nuovo oggetto SpriteSheet che recuperi l’immagine dall’URL specificata e la suddivida in animazioni di dimensione 66x66 px. L'ultimo parametro del costruttore descrive e nomina i singoli sprite. in questo caso la png contiene due animazioni, una che chiamiamo 'fly', descritta dei primi due blocchi, e una 'boom' dai restanti 7. Il false alla fine del secondo descrittore segnala a easel.js che questa animazione non deve ripetersi indefinitamente (loop) ma concludersi dopo un solo ciclo completo; viceversa 'fly' deve comportarsi esattamente all'opposto e quindi l’ultimo descrittore contiene il nome stesso dell’animazione.

BitmapAnimation

Ora che abbiamo aereo_sprite_sheet possiamo utilizzare la classe BitmapAnimation per costruire il primo oggetto della nostra scena:

var aereo = new BitmapAnimation(aereo_sprite_sheet);
aereo.x = Math.round(w/2); // dove w è la larghezza del canvas
aereo.y = h-100;           // dove h è l'altezza del canvas
aereo.direction = 0;
aereo.speed = 5;
aereo.vX = 0;
aereo.gotoAndPlay('fly');

Nelle prime righe di codice creiamo l'oggetto aereo a partire dallo SpriteSheet e ne impostiamo alcune proprietà come la posizione all'interno della scena, la velocità di movimento generale e la sua velocità sull'asse delle x.

Con l'ultima istruzione chiediamo infine che all'interno del ciclo di animazione di easel.js venga inserita la riproduzione dell'animazione fly alle coordinate x e y che abbiamo impostate all'interno della variabile aereo.

Grazie a queste poche istruzioni abbiamo visto come recuperare gli sprite da una PNG e come creare e lanciare le relative animazioni. Uniamo questo insegnamento al precedente e scriviamo la prima versione del file 1945.js:

// SEZIONE DELLE VARIABILI GLOBALI
var canvas;
var stage;
var aereo;
function inizioGioco() {
  // SEZIONE DI SETUP DELLA SCENA
  canvas = document.getElementById("game_canvas");
  stage = new Stage(canvas);
  w = canvas.width;
  h = canvas.height;
  // SEZIONE DI CARICAMENTO DEGLI SPRITE
  var aereo_sprite_sheet = new SpriteSheet({
      images: ["sprites/plane.png"],
      frames: { width:66, height:66},
      animations: { fly:[0, 2, 'fly'], boom:[3, 10, false] }
  });
  // SEZIONE DI CREAZIONE DELLE ANIMAZIONI
  var aereo = new BitmapAnimation(aereo_sprite_sheet);
  aereo.x = Math.round(w/2);
  aereo.y = h-100;
  aereo.speed = 5;
  aereo.direction = 0;
  aereo.vX = 0;
  aereo.gotoAndPlay('fly');
  // SEZIONE DI AGGIUNTA ALLO STAGE
  stage.addChild(aereo);
  Ticker.addListener(window);
}
function tick() {
  stage.update();
}

In aggiunta a quanto già visto in precedenza possiamo osservare:

• la creazione dell'oggetto stage a partire dall'elemento canvas, nella 'sezione di setup della scena'
• come aggiungere elementi allo stage e visualizzarli sullo schermo grazie al metodo addChild (in questo caso aereo), nella 'sezione di aggiunta allo stage'
• come lanciare il loop con il comando Ticker.addListener(window) che fa partire l'esecuzione continua della funzione tick (che al momento chiede allo stage solo di aggiornare lo stato di tutte le animazioni che contiene)

Eseguiamo il tutto in un browser con supporto canvas per ammirare il risultato:

Kibo: introdurre il controllo da tastiera

Per aggiungere la gestione del controllo tramite tastiera facciamo entrare in gioco Kibo; quello che ci serve è fondamentalmente che alla pressione dei tasti destra e sinistra la direzione e la velocità sull'asse delle x si adattino di conseguenza, così come al rilascio degli stessi tasti. Aggiungiamo la 'sezione controllo tastiera' appena sotto la 'sezione di creazione delle animazioni':

// SEZIONE CONTROLLO TASTIERA
var tastiera = new Kibo();
tastiera.down(['left','right'],function() {
    aereo.direction = (tastiera.lastKey() == 'left' ? -1 : 1);
	aereo.vX = aereo.speed;
  }).up(['left','right'],function() {
    aereo.direction = 0;
	aereo.vX = 0;
  });

Il codice è abbastanza semplice, la libreria ci consente di definire a cascata una serie di funzioni da lanciare al presentarsi degli eventi descritti dal nome dei metodo e dai parametri ad esso passati.

Quindi ad esempio alla pressione (down) del tasto 'left' o 'right' la direzione dell'aereo viene impostata rispettivamente a -1 o 1 a seconda del tasto premuto e la velocità orizzontale valorizzata alla proprietà speed dell'aereo. In caso di rilascio del tasto (up) invece entrambe le variabili sono riportate a 0.

Ora modifichiamo la funzione tick() per ricalcolare la posizione dell'aereo sulla base dei parametri di velocità e direzione:

function tick() {
  // SEZIONE AGGIORNAMENTO OGGETTI
  aereo.x += aereo.vX * aereo.direction;
  // SEZIONE AGGIORNAMENTO ANIMAZIONI
  stage.update();
}

Et voilà! Ricarichiamo il progetto nel browser e proviamo a far rispondere ai comandi il nostro aereo.