Lezioni su Phaser
Link alle lezioni
Lezione 1: Preload
Preload carica gli asset del gioco. Ad esempio, include l'impostazione del colore di sfondo, la posizione degli asset e il caricamento delle immagini. In JavaScript, abbiamo la funzione keyboard (cioè ciò che viene scritto all'interno è una funzione che viene eseguita più volte quando serve). La funzione prende due parametri in ingresso: l'immagine ha il nome dell'etichetta e l'indirizzo dell'immagine.
Preload non prende più parametri d'ingresso; le parentesi graffe servono per delimitare il corpo della funzione, come fosse un blocco unico. All'interno del gruppo abbiamo qualche funzione:
- Settare colore background con modifica RGB
- game.load.baseURL imposta URL da cui verranno pescate le nostre immagini
- game.load.image - diciamo al gioco di caricare due immagini, diamo un’etichetta e un indirizzo da unire all’URL per trovare l’immagine online: player e platform
Preload carica gli asset. La funzione Preload, all'interno del gioco, viene eseguita all'inizio e solo una volta per caricare le immagini, poi basta.
Create
Create confeziona il nostro gioco, prende gli asset, li posiziona, dice quanti sono e li configura (es. gravità). Viene eseguita all'inizio; quando muoio, viene eseguita perché va a ricreare il mondo da zero. Le prime quattro righe determinano delle variabili, sono dei nomi che utilizziamo per differenziare gli oggetti.
Funzione create () { blocco funzione }
Nella funzione:
- player = game.add.sprite(100, 200, 'player'); -> funzione che aggiunge un’immagine al nostro gioco mettendo dei parametri. 100 e 200 sono la posizione iniziale del player. Player è l’etichetta dell’immagine. Creo oggetto player
- game.physics.arcade.enable(player); -> all’interno del gioco è possibile definire la nostra fisica, che è arcade ma ne esistono anche altre, e all’interno della fisica arcade stiamo prendendo il player e lo aggiungiamo alla nostra fisica che definiamo dopo, es. player.body.gravity.y = -500; possiamo specificare del player del suo body delle proprietà: una è la fisica e l’altra è collideWorldBounds
- player.body.collideWorldBounds = true; -> dice che c’è collisione con i bordi della scheda; se metto false al posto di true, il player va verso l’infinito quando esce dallo schermo
- platforms = game.add.physicsGroup(); -> crea gruppo fisico e lo aggiunge al mio gioco platforms.create(500, 150, 'platform'); se cambio etichetta, cambio immagine; es. metto player platforms.create(-700, 300, 'platform'); platforms.create(400, 450, 'platform'); platforms.setAll('body.immovable', true); -> prende tutte le piattaforme e per ciascuna imposta un certo valore 'body.immovable' (= dice se la piattaforma è movibile o inamovibile); con true non si può spostare, mentre false se le tocco le sposto. setAll le imposta tutte in quel modo; altrimenti ciascuna può essere o true o false
- cursors = game.input.keyboard.createCursorKeys(); -> prende tasti su, giù, dx, sx e li assegna a variabile cursors
- jumpButton = game.input.keyboard.addKey(Phaser.Keyboard.SPACEBAR); -> prende un tasto della tastiera e lo associa al jumpButton
Update
Gestisce la dinamica del gioco, che sono regole fisiche e d’interazione, e rappresentano la dinamica del gioco. Viene eseguita questa funzione sempre, di continuo, 30, 60, 100 volte al secondo, determinando il numero di frame che vengono calcolati, funzione che occupa il nostro processore.
Cosa fa la funzione:
- game.physics.arcade.collide(player, platforms); -> fa in modo che piattaforme e giocatore collidano, non possono passarsi attraverso
- player.body.velocity.x = 0; if (cursors.left.isDown) { player.body.velocity.x = -250; -> se cursore di sx è premuto allora velocità del giocatore è 250 } else if (cursors.right.isDown) { player.body.velocity.x = 250; -> se cursore di dx è premuto allora velocità del giocatore è 250 }
- if (jumpButton.isDown) { player.body.velocity.y = 400; -> se premo il salto velocità è 400 }
Se lascio tasto sx o dx, quando lo lascio velocità torna a zero.