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: 135 90 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