Come realizzare un videogioco in HTML5.
Prima Lezione - a cura di Fabrizio Radica
Questa pagina e soggetta a modifiche e/o aggiornamenti in qualsiasi momento.
Che esso venga sviluppato in Flash o in Html5 o qualsiasi altro linguaggio / piattaforma, necessita prima di tutto di tanta fantasia e voglia di fare. Ricordiamoci che non esiste solo una strada percorribile per la realizzazione di un videogioco.
Quella che mostrerò sarà una tra mille possibili.
Non è così scontato che molte persone mollino un progetto o si avviliscano per le mille possibili complicazioni che possono insorgere in fase di sviluppo.
Premetto che gli esempi non saranno ottimizzati e saranno scritti in modo da risultare il più comprensibili possibile per la logica. L'unica cosa che darò per scontato è che sappiate almeno le basi di programmazione.
Per semplicità userò strutture procedurali piuttosto che ad oggetti per semplificarne al massimo la lettura.
Detto questo, iniziamo.
Un videogioco o un qualsiasi altro applicativo, ha un'area visibile (la scena), dove avviene il gioco vero e proprio ed una invisibile (Buffer), dove avvengono elaborazioni di vario genere.
In questa prima lezione ci soffermeremo sulla scena.
La scena è un'area bidimensionale composta da X pixel orizzontali e Y pixel verticali.
All'interno, possiamo disegnare qualsiasi oggetto e muoverlo a piacimento lungo queste coordinate.
Se avessimo una scena di 640x480 e volessimo muovere un oggetto dovremmo:
- Creare l'oggetto
- Assegnare all'oggetto l'immagine che desideriamo.
- Dargli una posizione di partenza in X e Y.
- Dire al all'oggetto che si può muovere con tasti da noi predefiniti
- Muoverlo.
Lo sviluppo di un gioco in html5 non si discosta molto dalle normali procedure per realizzare un sito in html.
Andreamo a creare un foglio di stile (CSS) con dentro, in questo caso, la definizione della SCENA (dimensione in x e y) che potremmo includere direttamente nella pagine HTML.
Successivamente, andremo a creare un file .js con il nostro programma vero e proprio.
In sostanza avremo una struttura file simile a questa:
- style.css
- index.html
- mioscript.js
Una delle cose più importanti in assoluto nello sviluppo di un videogioco è la pulizia e l'ordine del codice.
Un codice sporco o poco commentato, credetemi, con l'evoluzione e modifiche del caso risulta quasi illegibile a distanza di tempo anche a noi stessi.
Quindi, prima regola: Ordine nel codice sorgente.
Settiamo le varibili necessarie al nostro programma.
Alcuni compilatori, come ad esempio Flash, permettono anche di non settare le variabili ma è buona norma inizializzarle sempre per avere un metodo di programmazione serio.
Quindi, seconda regola: inizializzare sempre le variabili.
//SEZIONE DEDICATA ALLE VARIABILI var canvas, ctx, sprites, blur, imageSprite, screenWidth = 500, screenHeight = 400, spriteX=50, spriteY=50, scaleX=100, scaleY=100, xvel=100, yvel=100, rightKey = false, leftKey = false, upKey = false, downKey = false; var lastFrameTime = 0;
Una volta inizializzate tutte le variabili, possiamo cominciare a stendere il nostro programma.
E' chiaro che nel corso del nostro sviluppo potremmo avere l'esigenza di inizializzarne altre. Raggruppatele in testa al codice dando loro dei nomi comprensibili e magari commentando come abbiamo visto sopra.
Potete fare copia incolla di tutto il codice COMMENTATO in un file vuoto, eseguite su un browser e muovete l'oggetto con i tasti cursore.
//SEZIONE DEDICATA ALLE VARIABILI
var canvas,
ctx,
sprites,
blur,
imageSprite,
screenWidth = 500,
screenHeight = 400,
spriteX=50,
spriteY=50,
scaleX=100,
scaleY=100,
xvel=100,
yvel=100,
rightKey = false,
leftKey = false,
upKey = false,
downKey = false;
var lastFrameTime = 0;
// Inizializza il CANVAS 2D
// In poche parole è la SCENA
canvas = document.getElementById('game');
//Contesto 2D (c'è anche il 3D ma in Opera)
ctx = canvas.getContext('2d');
//Carico la mia immagine
imageSprite=new Image();
imageSprite.src='images/sprites.png';
//Esegue il Mainloop ogni n millisecondi
setInterval(mainloop, 16);
//Creo gli eventi ed associo una funzione se il tasto è premuto o rilasciato.
document.addEventListener('keydown', keyDown, false);
document.addEventListener('keyup', keyUp, false);
//SEZIONE DEDICATA ALLE FUNZIONI / ROUTINES
//----------- Controllo Tastiera ---------------------
function keyDown(e) {
if (e.keyCode == 39) rightKey = true;
else if (e.keyCode == 37) leftKey = true;
if (e.keyCode == 38) upKey = true;
else if (e.keyCode == 40) downKey = true;
}
function keyUp(e) {
if (e.keyCode == 39) rightKey = false;
else if (e.keyCode == 37) leftKey = false;
if (e.keyCode == 38) upKey = false;
else if (e.keyCode == 40) downKey = false;
}
//Ridisegna lo schermo ogni n milliscondi definiti in setInterval
function redraw() {
ctx.clearRect(0,0,screenWidth,screenHeight);
}
// Funzione importante per i videogiochi.
// Un videogioco utilizza la tecnica TimeBased e non FrameBased.
// il TimeBased, non è dipendente dalla velocità del computer ma si basa sull'unità di tempo.
// Fondamentale per sincronizzare un multiplayer.
// Questa parte verrà approfondita nei prossimi tutorial.
function drawTimeBased(){
var now = new Date().getTime();
delta = (now - lastFrameTime) / 1000;
lastFrameTime = now;
}
//SEZIONE MAIN LOOP
function mainloop() {
redraw();
drawTimeBased();
//Controllo se i tasti vengono premuti
if (rightKey) {
// moltiplico la velocità per il delta del tempo (TimeBased);
spriteX +=xvel*delta
} else if (leftKey) {
spriteX -=xvel*delta;
}
if (upKey) {
spriteY -=yvel*delta;
} else if (downKey) {
spriteY +=yvel*delta;
}
//disegno il nostro sprite
ctx.drawImage(imageSprite,1,0,1,1,spriteX,spriteY,scaleX,scaleY);
}
Abbiamo visto che essenzialmente un codice si divide in tre sezioni.
- Sezione dedicata all'inizializzazione delle variabili.
- Sezione dedicata alla costruzione delle funzioni
- Main
Infine ma non per ultimo, abbiamo visto un approcio al TimeBased, ovvero la tecnica di sicronizzazione dell'animazione… ma la approfondiremo più avanti.
Risultato:
Muovi con le freccette il rettangolo
Download lezione