Nella sua accezione di 'Flash Killer' il canvas è da sempre oggetto di esperimenti sulle sue possibili implementazioni come piattaforma di gaming. Seppure, come abbiamo visto, le API native risultino molto tediose per garantire un buon utilizzo dello strumento in questo senso, sono nati nel tempo tutta una serie di librerie orientate allo sviluppo di videogiochi.
In questo capitolo scopriremo easel.js e lo utilizzeremo per costruire un piccolo sparatutto simile, nell'interazione, a mostri sacri del genere come Aero Fighters.
Easel.js
La libreria che stiamo per utilizzare, easel.js, presenta alcune interessanti e peculiari caratteristiche:
- una gestione automatica delle animazioni tramite sprite;
- una gestione ottimizzata del ciclo di disegno a video.
Oltre a questi due tratti distintivi sono inoltre disponibili un set di funzioni 'a contorno' per aiutarci nel disegno di forme bidimensionali e di testo e nell'applicazione di semplici effetti quali l'ombreggiatura.
La libreria mette a disposizione queste caratteristiche attraverso alcuni 'oggetti' dei quali possiamo beneficiare, in particolare:
| Oggetto | Descrizione |
|---|---|
| Stage | tutto quanto aggiunto allo stage verrà disegnato, secondo le sue proprietà, durante ogni ciclo di disegno |
| DisplayObject | tutto quanto può essere aggiunto ad uno Stage rientra all'interno di una istanza di questa classe che contiene le proprietà essenziali al disegno, quali x, y, etc. Molte altre classi che utilizzeremo estendono DisplayObject |
| SpriteSheet | è la rappresentazione all'interno di easel.js di una immagine PNG contenente i vari frame che compongono una o più animazioni (come ad esempio questa) |
| BitmapAnimation | (ex BitmapSequence)incapsula una singola animazione e ne gestisce la logica. Eredita da DisplayObject |
| Ticker | questa 'classe', non istanziabile, espone dei metodi per il controllo sul ciclo di disegno, come ad esempio il numero di frame per secondo che desideriamo ottenere |
Dopo questa panoramica sul framework possiamo cominciare con lo sviluppo didattico del nostro videogioco: "1945: Fight For Freedom!"
Figura 1. 1945: Fight For Freedom!
(clic per ingrandire)
L'ambiente di sviluppo per Easel.js
Per prima cosa costruiamo la struttura del progetto Easel.js su filesystem. Nella cartella del progetto (ad esempio 1945) creiamo due cartelle sprites e scripts. Cominciamo subito con lo scaricare easel.js e a posizionarne i file nella cartella scripts insieme ad alcune 'librerie di supporto' che torneranno molto utili nello sviluppo del progetto, stiamo parlando di:
- underscore.js, che offre una serie di funzioni per la manipolazione delle collezioni
- Kibo, una semplice libreria per la gestione degli eventi da tastiera
Completiamo la cartella scripts creando un documento vuoto 1945.js che sarà oggetto delle nostre attenzioni nei prossimi capitoli e rivolgiamo la nostra attenzione alla cartella sprites all'interno della quale andremo a posizionare le immagini necessarie a gestire le animazioni del gioco.
Partendo da una immagine contenente molte animazioni, creata da Ari Feldman, e disponibile per il libero utilizzo, ho predisposto due png con quanto ci servirà per animare la scena del nostro videogioco.
Ogni immagine contiene un certo numero di fotogrammi accumunati dalle stesse dimensioni (66x66 px per plane.png e 33x33px per other_sprites.png).
Nell'utilizzo di easel.js questa condizione è assolutamente necessaria in quanto la libreria non riesce ancora a gestire bene frame di dimensioni diverse sulla stessa immagine.
Figura 2. Gli sprite del gioco
(clic per ingrandire)
Ecco le due immagini, da scaricare e posizionare nella cartella sprites: plane.png e other_sprites.png. Completiamo il contenuto della cartella con il file background.png utile per colorare lo sfondo del videogioco.
Per concludere questa lezione non ci resta che creare un file index.html nella root del progetto, in cui richiamare le librerie javascript, gli sprite e, ovviamente, l'elemento canvas sul quale si concentrerà tutta l'azione:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>1945: fight for freedom</title>
<script src="scripts/easel.js"></script>
<script src="scripts/kibo.js"></script>
<script src="scripts/underscore.js"></script>
<script src="scripts/1945.js"></script>
<style>
canvas { display: block;
margin: 0px auto;
border: 5px solid rgb(0,53,85);
}
img { visibility: hidden; }
</style>
</head>
<body onload="inizioGioco()">
<canvas width="800" height="600" id="game_canvas"></canvas>
<img id="aereo_sprite" src="sprites/plane.png">
<img id="altri_sprite" src="sprites/other_sprites.png">
</body>
</html>Il poco CSS utilizzato assolve l'importante funzione di posizionare il canvas esattamente al centro della pagina.
La preparazione è conclusa, verifichiamo che struttura creata sia identica a quanto mostra la figura seguente:
