Break Out Con GML di Game Maker

Break Out Con GML di Game Maker
In questo tutorial impareremo a costruire un gioco stile break out utilizzando il linguaggio GML di Game
Maker. Facciamo Partire il programma e salviamo subito il gioco con il nome break Out.
Creare un nuova sprite e nella finestra proprietà dello sprite assegnamo il nome spr_mattone poi dalla
cartella risorse break out carichiamo l’mmagine mattone normale.png
Cliccare su apri e il mattone appare nella finestra. Nella sezione Origine dello sprite cliccare su center come
nella seguente immagine:
Ripetere l’operazione per costruire lo sprite per il mattone danneggiato caricando dalla stessa cartella
l’immagine mattone_danneggiato.png, e assegniamo il nome spr_mattone_danneggiato.
Adesso carichiamo un terzo sprite dal file strip mattone_rotto_sprip5.png. questo è un file che contiene al
suo interno una striscia di 5 sotto immagini come si vede dal nome e semplicemente caricandolo come un
semplice sprite Game maker è in grado di riconoscere le sotto immagini e di generare l’animazione di
rottura del mattone. Assegniamo il nome spr_mattone_rotto e provate a clliccare su Edit Sprite per vedere
l’effetto di animazione:
Prof. Francesco Accarino
Pagina 1
Adesso carichiamo lo sprite per la racchetta dal file racchetta.png dandogli il nome spr_racchetta e lo sprite
per il muro dal file muro.png dandogli il nome spr_muro. Per il muro non dobbiamo settare l’origine.
Ora carichiamo lo sprite per la palla dal file palla.png e gli assegniamo il nome spr_palla. Clicchiamo su
center per l’origine e modifichiamo la maschera di collisione scegliendo la forma disck in maniera tale da
avere una collisione precisa:
Salviamo lo sprite. Se tutto è andato bene dovremmo avere gli sprite caricati come nella finstra:
Prof. Francesco Accarino
Pagina 2
Creazione degli Oggetti
oggetto muro: cliccare su nuovo oggetto gli diamo il nome obj_muro e gli assegniamo lo sprite spr_muro.
Settiamo le proprietà visibile e solido e salviamo
oggetto mattone: cliccare su nuovo oggetto gli diamo il nome obj_mattone e gli assegniamo lo sprite
spr_mattone. Settiamo le proprietà visibile e solido e salviamo stesso procedimento per
obj_mattone_danneggiato e obj_mattone_rotto ovviamente con le sprite spr_mattone_danneggiato e
spr_mattone_rotto.
oggetto racchetta: cliccare su nuovo oggetto gli diamo il nome obj_racchetta e gli assegniamo lo sprite
spr_racchetta. Per la racchetta che deve essere mossa dall’utente aggiungiamo gli eventi relativi alle frecce
destra e sinistra della tastiera. Quindi nella finestra dell’oggetto
Click Add Event > Keyboard > Left. Trasciniamo nella finestra azioni trasciniamo execute a piece of code e
nella finestra che appare scriviamo il codice seguente:
Click Add Event > Keyboard > Right. Stesse operazioni di prima il codice da scrivere è ovviamente:
//se spostandosi a destra di 5 pixel dalla posizione attuale non incontro il muro
if place_meeting(x + 5, y, obj_muro) == false
{
x +=5; //sposto la racchetta a sinistra
}
Prof. Francesco Accarino
Pagina 3
Aggiungiamo ora un evento per la barra spaziatrice questo serve per far partire la pallina che all’inizio è
ferma e a tale proposito utilizziamo una variabile che ci dice se la pallina è ferma o in movimento chiamata
go.
Click Add Event > Keyboard > Space. Trasciniamo nella finestra azioni execute a piece of code e nella finestra
che appare scriviamo il seguente codice:
90
135
45
180
0
225
270
315
E salviamo.
Nel codice precedente si imposta un movimento casuale verso l’alto della pallina nel caso in cui essa sia
ferma. Si Ricorda che in game maker le direzioni per gli oggetti sono rappresentate in gradi tra 0 e 360. Noi
ne utilizzeremo solo 6 corrispondenti a:
NE = 45; N = 90; NO = 135; SO = 225; S = 270; SE = 315;
Oggetto Palla: cliccare su nuovo oggetto gli diamo il nome obj_palla e gli assegniamo lo sprite spr_palla.
Settiamo le proprietà visibile e solido.
Click Add Event > Create. Trasciniamo nella finestra azioni execute a piece of code e nella finestra che appare
scriviamo il seguente codice:
go=false; e salviamo il codice. Questo significa che quando viene creata una istanza della pallina essa è
ferma. Le istanze della pallina dei muri della racchetta e dei mattoni saranno create quando creeremo la
stanza per contenere il gioco. Vediamo adesso cosa deve accadere ad ogni step del gioco cioè ogni volta
che la pallina fa un passo in una direzione.
Click Add Event > Step > Step. Trasciniamo nella finestra azioni execute a piece of code e nella finestra che
appare scriviamo il seguente codice:
Prof. Francesco Accarino
Pagina 4
Come si vede si usa la variabile go utilizzata nell’evento della barra spaziatrice per fare in modo che la palla
segua la racchetta fintanto che il giocatore non faccia partire il gioco. Altrimenti si testa la coordinata y
della pallina per verificare se è uscita dalla stanza in questo caso il viene distrutta l’istanza corrente si
decrementa il numero di vite e se ci sono ancora vite si crea una nuova istanza.
Click Add Event > Collision > obj_muro. Trasciniamo nella finestra azioni execute a piece of code e nella
finestra che appare potremmo scrivere semplicemente il seguente codice utilizzando una funzione predefinita:
move_bounce_all(true); //rimbalza in tutte le direzione con effetto di realismo.
E ottenere un rimbalzo con effetto reale in tutte le direzioni ogni volta che si incontra un muro. Noi vlogliamo
complicarci la vita gestendo da soli i rimbalzi nelle direzioni precedentemente indicate e così il codice che
scriveremo sarà:
Prof. Francesco Accarino
Pagina 5
Adesso creiamo la nostra stanza del gioco cliccando su create a room e nella finestra che appare assegniamo un
nome alla stanza magari impostiamo anche uno sfondo per rendere più gradevole il gioco e soprattutto
impostiamo le dimensioni e la velocità di ciclo del gioco cioè il tempo di ridisegno degli oggetti. La figura
seguente mostra queste caratteristiche:
Adesso clicchiamo su Creation code e inseriamo il codice per costruire la schermata di gioco. Il codice è il
seguente:
Prof. Francesco Accarino
Pagina 6
Ora possiamo Mandare in esecuzione il gioco e se tutto è andato bene dovremmo avere una situazione come
quella mostrata in figura. Si può far partire la palla premendo la barra spaziatrice, essa dovrebbe rimbalzare sui
muri ma ovviamente se proviamo a colpirla con la racchetta la pallina si ferma perché non abbiamo gestito la
collisione con la racchetta. Rimediamo riaprendo le proprità dell’oggetto palla( magari prima salviamo se non
l’abbiamo già fatto) aggiungiamo un nuovo evento di collisione Click Add Event > Collision > obj_racchetta.
e nella finestra che appare inseriamo il codice seguente:
Se la collisione avviene nella parte sinistra la direzione è NO se la collisione avviene nella parte destra la direzione è NE altrimenti è al centro e la direzione è NORD.
Adesso Aggiungiamo I mattoni alla stanza. Ritorniamo sulle proprietà della stanza apriamo il codice di creazione
e aggiungiamo le righe seguenti:
for(i=64;i<600;i=i+64)
for(j=50;j<200;j=j+32)
instance_create(i,j,obj_mattone);
Facciamo ripartire il gioco ed ecco l’effetto:
Prof. Francesco Accarino
Pagina 7
Abbiamo costruito I muri laterali e 5 muri di mattoni con pochissime righe di codice. Potenza dei cicli.
Adesso ci resta da gestire la collisione con i mattoni. In realtà noi vogliamo che la prima volta che il mattone è
colpito esso appaia danneggiato e la seconda volta esploda. Per ottenere questo effetto abbiamo bisogno di gestire
innanzitutto il rimbalzo della palla e poi la metamorfosi dei mattoni. I rimbalzi della palla li gestiremo negli eventi
di collisione della palla con i mattoni mentre la metamorfosi del mattone negli eventi di collisione del mattone
stesso. Iniziamo con gli eventi di rimbalzo della palla.
Click Add Event > Collision > obj_mattone. Trasciniamo nella finestra azioni execute a piece of code e nella
finestra che appare potremmo scrivere semplicemente il seguente codice:
score+=10;
move_bounce_all(true);
Cioè l’incremento del punteggio e il rimbalzo predefinito. Invece volendo gestire noi il rimbalzo scriveremo:
Aggiungiamo un altro evento collisione con l’oggetto mattone danneggiato scrivendo lo stesso codice di sopra
ma con un punteggio diverso ad esempio 15.
Ora vediamo cosa accade al mattone normale quando è colpito dalla palla. Aggiungiamo un evento collisione al
mattone normale Click Add Event > Collision > obj_palla. Trasciniamo nella finestra azioni execute a piece of
code e nella finestra che appare scriviamo il seguente codice:
instance_change(obj_matone_danneggiato,false);
in pratica il mattone colpito cambia istanza diventa un mattone danneggiato.
Per il mattone danneggiato è più complicato gestire la collisione perché in questo caso dovremmo anche
distruggere l’stanza del mattone ma questo dovremmo farlo solo dopo che è finita l’animazione. Per
realizzare questo abbiamo bisogno di un oggetto Time line la quale può contare i passi del gioco e
attraverso essa decidere dopo quanti passi realizzare una azione. In pratica siccome l’animazione del
mattone che esplode è costituita da 5 frame. L’animazione finirà dopo 5 step di tempo e a questo punto
potremo distruggere il mattone.
Costruiamo la time line click su
Prof. Francesco Accarino
Pagina 8
Nella finestra che appare dare un nome alla time line, io l’ho chiamata fine_animazione_mattone e cliiccare
su add per impostare i passi inseriremo 4 cioè (da 0 a 4) ovvero 5 passi.
Dalla scheda main1 trasciniamo l’icona destroy the istance e nella finestra di selezione dell’oggetto
Indichiamo l’oggetto mattone rotto.
Prof. Francesco Accarino
Pagina 9
Ora andiamo nelle proprietà dell’oggetto mattone rotto aggiungiamo l’evento create e come azione dalla
scheda main2 trasciniamo l’icona setta time line e impostiamo le proprietà come mostrato di seguito:
A questo punto se tutto è andato bene possiamo mandare in esecuzione il gioco e verificare l’effetto.
Ora dobbiamo gestire la fine del gioco cioè quando finiscono le vite oppure quando tutti i mattoni sono
finiti. Quando finiscono le vite possiamo semplicemente visualizzare una finestra di messaggio per chiedere
se si vuole continuare a giocare o terminare il gioco. A questo scopo modifichiamo il codice dello step della
pallina come segue:
Prof. Francesco Accarino
Pagina 10
Se invece finiscono i mattoni potremmo pensare di aggiungere dei nuovi livelli in cui aumenta la difficoltà di
gioco diminuendo ola pallina o/e aumentando la velocità.
Quindi come prima cosa aggiungiamo un nuovo sprite caricandolo dal file rac_small.png e lo chiamiamo
spr_rac_small
E costruiamo anche un nuovo oggetto con questa sprite chiamato obj_rac_smal
Aggiungiamo gli eventi per i tre tasti della tastiera scrivendo il codice copiandolo dagli stessi eventi della
racchetta più grande.
Costruiamo una nuova stanza e rinominiamo le due stanze, quella già creata gioco1 e questa nuova gioco2.
Ora dovendo gestire più livelli modifichiamo l’oggetto controllo aggiungendo un evento Create e nel codice
di creazione scriviamo semplicemente:
livello=1;
Prof. Francesco Accarino
Pagina 11
Nel codice relativo allo step scriviamo il codice seguente:
Ora volendo visualizzare anche il punteggio e le vite in modo più accattivante come prima cosa ci creiamo
un nuovo sprite dal file: sprite_life_strip5.png questo è un file striscia volendo potremmo avere anche le
vite animate ma per adesso accontentiamoci di visualizzare una singola immagine.
Quindi aggiungiamo un evento draw all’oggetto controllo e trasciniamo dalla scheda controllo l’icona per
scrivere il codice in risposta all’evento. Il codice che andremo a scrivere sarà il seguente:
Il codice utilizza le funzioni del disegno per impostare il colore disegnare del testo e delle immagini. Il ciclo
serve per disegnare tanti cuori per quante sono le vite i parametri della funzione sono il nome dello sprite
l’indice della sottoimmagine le coordinate x,y. Ovviamente la x si incrementa di un valore pari alla larghezza
dell’immagine più uno spazio.
Prof. Francesco Accarino
Pagina 12
Torniamo alle stanze. Nel codice di creazione della seconda stanza scriveremo il codice seguente:
Come si vede rispetto alla prima stanza viene semplicemente aggiunta le creazione dell’oggetto controllo e
la modifica del valore della variabile livello. Invece per la prima stanza ci limitiamo semplicemente a creare
l’oggetto controllo visto che abbiamo attribuito all’evento create l’inizializzazione a 1 della variabile livello.
L’ultima cosa che ci resta da fare e aggiungere un evento di collisione con la racchetta piccola e nel codice
di risposta scrivere:
Prof. Francesco Accarino
Pagina 13
Dobbiamo modificare i codici di risposta agli eventi dell’oggettto pallina perche adesso dovrà fare delle
cose diverse in base al livello in cui ci troviamo. Il codice per lo step il seguente:
Gli altri codici restano praticamente invariati. Mandiamo in esecuzione il gioco e se tutto è andato bene
dovremmo avere due livelli funzionanti. Si può anche pensare di incrementare la velocità della pallina
impostando le caratteristiche della stanza 2 come segue:
Speed =70 significa che gli oggetti saranno disegnati 70 volte al secondo e quindi la pallina farà 70 passi in
un secondo. Mandiamo in esecuzione e verifichiamo che il tutto funzioni correttamente.
Prof. Francesco Accarino
Pagina 14
Adesso aggiungiamo qualche suono al nostro gioco ad esempio un suono di semplice rimbalzo quando la
pallina incontra il muro la racchetta o un mattone intero un suono più accentauato quando un mattone
esplode e un suono che esprima rammarico quando si perde una vita.
Costruiamo tre oggetti suoni cliccando su nuovo suono
E dalla finestra che appare cliccare su per scegliere il file e nominarlo beep.
Ripetere la stessa operazione per distrutto e morto. Quindi aprire l’oggetto pallina e aggiungere la funzione
sound_play(nome suono); quando incontra i vari ogetti. Allo stesso modo perl l’evento step quando la
pallina esce dalla stanza aggiungiamo:
Prof. Francesco Accarino
Pagina 15
Per concludere aggiungiamo il pannello dei punteggi più alti utilizzando le finzioni relative highscore . Come
prima cosa ci creiamo un nuovo background per questa finestra creandolo dal file sfondo_punti.png
Poi ci creiamo un nuovo font cliccando su
E scegliamo le sue caratteristiche:
Poi aggiungiamo uno script cliccando su e digitiamo il codice seguente nella finestra che appare:
Prof. Francesco Accarino
Pagina 16
Adesso aggiungiamo la chiamata di questo script esattamente come se chiamassimo una funzione in C nelle
sezioni di codice relative allo step dell’oggetto controllo:
E allo step dell’oggetto pallina come mostrato nella figura della pagina successiva.
Questo tutorial termina qui e mi sembra di aver dato una idea di quasi tutte le
funzioni principali dell’utilizzo del linguaggio GML . Ovviamente esso offre
potenzialità ben più elevate che a questo punto potrete scoprire da soli magari
leggendo il manuale:
Designing Games with Game Maker
di
Mark Overmars
dal quale io ho studiato.
Prof. Francesco Accarino
Pagina 17
Prof. Francesco Accarino
Pagina 18