Tutorial Phaser – Parte 3: L’interazione con l’utente

Nel precedente articolo abbiamo creato con Phaser una schermata statica con l’immagine di un astronave. In questo articolo vedremo come far muovere l’astronave.

Spesso in questi framework per spostare uno sprite (un oggetto di gioco) è necessario accedere direttamente alle proprietà relative alle coordinate x e y. Phaser propone invece di selezionare un tipo di “fisica” che permetta di comandare l’oggetto con comandi più ad alto livello. In questo caso selezioneremo la fisica “arcade” che ci consentirà di gestire il movimento degli oggetti definendone le velocità di spostamento (sempre relativa agli assi) e di rotazione.

Altri tipi di fisica possono essere adatti a particolari categorie di gioco, ad esempio la fisica p2 per quelli in stile Angry Birds.

Attiviamo inoltre la tastiera ed in particolare le freccette per spostare l’astronave, questo significa che per il momento il gioco non sarà utilizzabile da smartphone o tablet.
Apriamo quindi game.js ed all’interno della funzione create aggiungiamo questo codice:

// attiviamo la fisica "arcade" sullo sprite
game.physics.arcade.enable(sprite);
// attiviamo le "freccette" in modo da poterne poi leggere il valore
cursors = this.input.keyboard.createCursorKeys();

Andiamo infine nel ciclo di gioco per gestire il movimento: leggendo lo stato dei pulsanti imposteremo o meno le velocità.

function update() {
// la velocità sugli assi  x  y inizialmente sarà 0
sprite.body.velocity.x = 0;
sprite.body.velocity.y = 0;

// se l'utente ha premuto il pulsante "sinistra" la velocità sull'asse y sarà -200
if (cursors.left.isDown)
{
sprite.body.velocity.x = -200;
}
// altrimenti se ha premuto il pulsante "destra" la velocità sull'asse x sarà 200
else if (cursors.right.isDown)
{
sprite.body.velocity.x = 200;
}
// se l'utente ha premuto il pulsante "sinistra" la velocità sull'asse y sarà -200
if (cursors.up.isDown)
{
sprite.body.velocity.y = -200;
}
// altrimenti se ha premuto il pulsante "destra" la velocità sull'asse x sarà 200
else if (cursors.down.isDown)
{
sprite.body.velocity.y = 200;
}

L’astronave si muoverà sullo schermo seguendo i comandi della tastiera (freccette).

Potete vedere il risultato seguendo questo link o potete scaricare il progetto
Scarica

Nel prossimo articolo vedremo come sparare col cannone laser dell’astronave

Precedente IndiceSuccessivo