Come realizzare un videogioco.

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 flash.
Per semplicità userò ActionScript AS3 con 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 (MovieClip) e muoverlo a piacimento lungo queste coordinate.
Se avessimo una scena di 640x480 e volessimo muovere un MovieClip dovremmo:

• Creare il MovieClip
• Assegnare al MovieClip l'immagine che desideriamo.
• Dargli una posizione di partenza in X e Y.
• Dire al MovieClip che si può muovere con tasti da noi predefiniti
• Muoverlo.

Per prima cosa apriamo un documento in formato actionscript 3.0 e ci posizioniamo sul primo fotogramma nella nostra timeline. Con il tasto destro clicchiamo su ACTIONS e scriviamo:

stop();

Questo comando dice al player flash di fermare la Timeline e di eseguire lo script nel frame selezionato.

Una delle cose più importanti in assoluto nello sviluppo di un videogioco è assolutamente 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.

//variabili globali
var xvel=2; //setto variabile velocità per l'asse x
var yvel=2; //setto variabile velocità per l'asse y
var movx=0; 
var movy=0;

//Inizio gestione Tastiera
//Assegno dei valori ASCII corrispondenti ai tasti che andrò a gestire.

var _right:int = 39;
var _left:int = 37;
var _up:int = 38;
var _down:int = 40;

Una volta inizializzate tutte le variabili, possiamo cominciare a stendere il 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 sul primo fotogramma del vostro applicativo Flash, compilate e muovete l'oggetto con i tasti cursore.

stop();
//SEZIONE DEDICATA ALLE VARIABILI
var xvel=2; //setto variabile velocità per l'asse x
var yvel=2; //setto variabile velocità per l'asse y
var movx=0; 
var movy=0;
//Inizio gestione Tastiera
//
// Questa parte, potete copiare ed incollare tranquillamente se non 
// avete voglia di comprenderla.
// L'importante è creare le varibili con i tasti che vi servono.
//Assegno dei valori ASCII corrispondenti ai tasti che andrò a gestire.
var _right:int = 39;
var _left:int = 37;
var _up:int = 38;
var _down:int = 40;
//Mi bufferizzo tutti i valori della tastiera per recuperarli in seguito.
var keyArray:Array = new Array();
for (var i:int=0; i<222; i++){
	keyArray.push([i,false]);
}
//Creo gli eventi ed associo una funzione se il tasto è premuto o rilasciato.
stage.addEventListener(KeyboardEvent.KEY_DOWN,checkKeysDown);
stage.addEventListener(KeyboardEvent.KEY_UP,checkKeysUp);
//SEZIONE DEDICATA ALLE FUNZIONI / ROUTINES
function checkKeysDown(event:KeyboardEvent):void{
	keyArray[event.keyCode][1] = true;
}
function checkKeysUp(event:KeyboardEvent):void{
	keyArray[event.keyCode][1] = false;
}
function isKeyDown(X){
	return keyArray[X][1];
}
//Fine Gestione Tastiera
//Creo un oggetto sullo schermo
var mc:MovieClip = new MovieClip();   // Creo un MovieClip chiamato mc
	mc.graphics.beginFill(0xFF0000);      // Assegno un colore
	mc.graphics.drawRect(0, 0, 100, 80);  // Delineo il la sagoma: x1,y1,x2,y2
	mc.graphics.endFill();				  // Riempio il nostro MovieClip
	mc.x = 0;		// lo posiziono a 80 pixel sull'asse X
	mc.y = 0;		// lo posizioni a 60 pixel sull'asse y
	addChild(mc);	//  l'oggetto appena creato lo mostro sullo stage
// Creo il loop dove andare a girare tutto il mio programma/gioco.
// Questa riga è importante perche' esegue il codice scritto dentro il main ad ogni ciclo.
addEventListener(Event.ENTER_FRAME,main);
//SEZIONE MAIN LOOP
function main(e):void{
	
	if (isKeyDown(_up)){ //E' stato premuto il tasto freccia alto?
		//muovi il nostro Movie clip del valore specificato nella variabile yvel.
		movy -=  yvel; 
	}
		
	if (isKeyDown(_down)){ //E' stato premuto il tasto freccia basso?
		//muovi il nostro Movie clip del valore specificato nella variabile yvel.
		movy +=  yvel;  
	}
		
	if (isKeyDown(_left)){ //E' stato premuto il tasto freccia sinistra?
		//muovi il nostro Movie clip del valore specificato nella variabile xvel.
		movx -=  xvel;
	}
		
	if (isKeyDown(_right)){ //E' stato premuto il tasto freccia destra?
		//muovi il nostro Movie clip del valore specificato nella variabile xvel.
		movx +=  xvel;
	}
		
		
	mc.x = movx;  //assegna il valore in movx alla coordinata X del nostro movieclip
	mc.y = movy;  //assegna il valore in movy alla coordinata Y del nostro movieclip
		
}

Abbiamo visto che essenzialmente un codice si divide in tre sezioni.

• Sezione dedicata all'inizializzazione delle variabili.
• Sezione dedicata alla costruzione delle funzioni
• Main

Nella prossima lezione tratteremo una prima dimostrazione di collisione con altri oggetti e video.
Arrivederci alla prossima Lezione.