Lavorare ad un videogioco significa avere a che fare con il codice: le API per l'intrazione con l'utente, quelle per la grafica e gestione delle animazioni, le temporizzazioni etc. Oltre a questo abbiamo da gestire assets (o risorse) di vari generi: sprite, background, suoni, file esterni (nei quali memorizzare dati come salvataggi, mappe). Pensando al 3D abbiamo anche modelli, materiali, shaders.
Per gestire tutto in modo armonioso e non riscivere ogni volta le routine di uso frequente abbiamo quindi bisogno di creare un Game engine, ovvero un framework orientato allo sviluppo di videogiochi. In questa guida impareremo come crearne uno partendo dalle basi, così da avere un maggiore controllo e possibilità di ottimizzare al massimo il codice.
Consideriamo però, che utilizzando un framework preconfezionato, si potrà passare subito alla progettazione e sviluppo della propria idea, risparmiando molto tempo che si dovrà invece dedicare alla creazione del Game engine. In appendice alla guida esamieremo un elenco dei i framework più validi esistenti in rete.
Canvas e Context 2d
Grazie all'elemento canvas di HTML5, è possibile sfruttare le API dedicate al rendering di forme e immagini, senza la necessità di utilizzare plugin esterni al browser (come Flash).
Creiamo quindi una semplice pagina HTML (index.html), che faccia da contenitore:
<!doctype html>
<html>
<head>
<title>Guida HTML5</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
</head>
<body>
<div id="GameDiv" >
<canvas id="GameCanvas" >
Il tuo browser non supporta l'elemento Canvas Html5
</canvas>
</div>
</body>
</html>Vedremo che ci tornerà comodo inserire il <canvas> all'interno di un <div>, naturalmente impostiamo gli id, per poter fare facilemente riferimento ai relativi elementi nel codice JavaScript.
Nei browser che non supportano il tag <canvas>, sarà visualizzato il testo al suo interno e non potremmo sfruttare le funzioni ad esso collegate.
Creiamo quindi un file javascript (main.js), che si occuperà di gestire le diverse parti del framework, e lo agganciamo al nostro contenitore HTML come codice esterno richiamato all'interno del tag <head>:
<script language="javascript" src="main.js" ></script>Nel file main.js creiamo finalmente l'oggetto principale del game engine, grazie alla funzione costruttore Game:
function Game() {
//il <div> che contiene l'elemento canvas
this.div = document.getElementById("GameDiv");
this.div.style.width = "768px";
this.div.style.height = "512px"
//l'elemento <canvas>
this.canvas = document.getElementById("GameCanvas");
this.canvas.setAttribute("width","768");
this.canvas.setAttribute("height","512");
this.canvas.defaultWidth = this.canvas.width;
this.canvas.defaultHeight = this.canvas.height;
//nasconde il cursore
this.canvas.style.cursor = "none";
//context 2d
this.ctx = this.canvas.getContext("2d");
if(!this.ctx){
alert("Il tuo browser non supporta HTML5, aggiornalo!");
}
}
function StartGame(){
//crea un istanza di Game
game = new Game();
}
window.addEventListener('load', function() {
StartGame();
}, true);Come possiamo vedere, l'oggetto Game, salva l'id del nostro elemento canvas in una variabile pubblica locale "this.canvas": in questo modo potremo accedere all'elemento canvas da qualsiasi oggetto riferendoci a un instanza di Game (vedremo in seguito come fare).
Modifichiamone quindi le dimensioni secondo le nostre preferenze e salviamo queste informazioni in due variabili (defaultWidth e defaultHeight) nell'oggetto/elemento canvas, che utilizzeremo in seguito per implementare il fullscreen.
Per utilizzare le funzioni di rendering, dobbiamo poi ottenere l'oggetto Context 2d dell'elemento canvas.
Nota: Possiamo controllare se HTML5 è supportato del browser in uso, verificando la variabile this.ctx ed eventualmente mostrare un messaggio in cui diciamo all'utente di aggiornare il proprio browser, o reindirizzarlo in un'altra pagina.
Infine creiamo una funzione StartGame eseguita al termine del loading del documento, che si occuperà di creare un istanza della nostra function Game (usiamo la prima lettera minuscola per distinguerla dalla funzione/oggetto).
Fatto questo avremo messo le basi per iniziare a lavorare con la piattaforma 2D di HTML5, possiamo verificare che tutto funzioni utilizzando gli strumenti di sviluppo del browser.
L'esempio è scaricabile in allegato.