Tratto da: Soren B. Andersen – Making Pong with Game Maker 8

Pong è tra i giochi più classici e primitivi di sempre…
Rilasciato inizialmente da Atari nel 1972 è stato un successo commerciale e inoltre è il gioco perfetto per chiunque inizi a imparare.

Il gioco ha pochi elementi:

una coppia di palette
una palla
i contatori dei punteggi
un campo di gioco.

Realizziamo questo gioco!

In questo tutorial tratteremo soprattutto 3 componenti di GameMaker:

Sprite: spr_bat_right, spr_bat_left, spr_wall, spr_ball, spr_goal_right, spr_goal_left
Object: obj_bat_right, obj_bat_left, obj_wall, obj_ball, obj_goal_right, obj_goal_left
Room: room_0.

Il tutorial è diviso per semplicità in 38 (!) passi.

1.

Se non lo hai ancora fatto passa alla modalità avanzata di GameMaker tramite la voce di menu File > Advanced Mode.

Da ora in avanti avrai più opzioni nei menu e il programma non è diventato più difficile da utilizzare.

2.

Adesso creiamo le risorse grafiche per il gioco.
Cominciamo con le palette controllate dai giocatori e qui possiamo utilizzare l’editor grafico integrato in GameMaker.
Gestisce queste cose senza problemi.
Le immagini piatte dei giochi si chiamano Sprite quindi dobbiamo utilizzare Resources > Create Sprite.
Si può fare cliccando sull’icona con un pacman rosso.

3.

Verrà visualizzata la finestra Sprite Properties.
In questa finestra impostiamo tutte le proprietà di una nuova sprite e poi salviamo.
La prima cosa da fare è dare un nome alla risorsa grafica.
Vai avanti e cancella il testo sprite0 e chiamala invece spr_bat.

Nota: è importante utilizzare i nomi giusti per tutto quando si progettano giochi oppure perderai il filo di tutti questi oggetti.

Anche se è possibile caricare da qualche parte immagini già pronte conLoad Sprite, vogliamo creare la nostra paletta all’interno di GameMaker.
Quindi adesso devi premere il pulsante Edit Sprite.

4.

Adesso ti viene visualizzata una finestra di nome Sprite Editor ma non è qui che in realtà si disegna la paletta.
Clicca sull’icona con il foglio bianco per creare una nuova sprite e poi su OK nella nuova finestra che appare per creare una sprite standard.
Poi fai un doppio clic su image 0, che è stata appena creata..

5.

Adesso sei nell’editor grafico integrato.
Viene visualizzata automaticamente un’immagine di 32x32 pixel.
Possiamo trasformarla facilmente in una paletta ridimensionandola.
Seleziona Transform > Resize canvas.

6.

Deseleziona Keep aspect ratio e poi imposta Width a 8 pixel.
Poi clicca OK.

7.

Ancora alcuni passi per finire con la paletta.

Seleziona il colore bianco.
Seleziona lo strumento secchiello.
Utilizza lo strumento sulla paletta che diventerà bianca.
Clicca sul segno di spunta verde per approvare tutte le modifiche.

Adesso sei di nuovo nella finestra Sprite Editor.
Qui fai clic sul segno di spunta verde per salvare la paletta.

8.

Al ritorno nella finestra Sprite Properties adesso possiamo vedere la versione aggiornata della paletta.
Clicca su OK per salvare tutte le modifiche.

9.

Adesso che la sprite per la paletta è pronta ci serve una sprite per la palla.
Molti dei prossimi passi ripeteranno le cose che hai fatto per spr_bat.
Di nuovo, crea una nuova sprite.
Nella finestra delle proprietà chiamala spr_ball e clicca il pulsante Edit Sprite.

10.

Nell’editor crea una nuova sprite e clicca su image 0 per modificarla.

11.

Use Transform > Resize Canvas e imposta la dimensione a 16 pixel sia in altezza che in larghezza.
Questa è la dimensione perfetta per la palla.
Adessa disegna la palla.

Seleziona un colore per la palla.
Seleziona lo strumento con un cerchio blu, Draw an ellipse
Scegli uno stile di riempimento.
Disegna la palla nella finestra grafica.
Ti potrebbe essere d’aiuto ingrandire con lo strumento lente d’ingrandimento, Zoom in.

Quando hai fatto tutto clicca sulla spunta verde e poi fai lo stesso nella finestra Sprite Editor.

12.

Sei di nuovo nella finestra Sprite Properties.
Clicca su OK per salvare tutte le modifiche.

13.

Adesso ci serve una sprite per il muro.
Sarà utilizzata per la parte alta e per la parte bassa dello schermo per fare in modo che la palla ci rimbalzi.

Vai avanti e crea una nuova sprite spr_wall.
Questa volta utilizzeremo Load Sprite perché in GameMaker è compresa una sprite per il muro di 32x32 pixel che è perfetta per il nostro gioco.
La trovi nella cartella Tutorial1 che si trova in Programs\Game_Maker8\Sprites\.
Clicca OK per salvare la sprite.

Tutti gli elementi grafici di base sono pronti.
Ritorneremo dopo a realizzare sprite ma questo ci basta per ottenere un gioco funzionante.

14.

La maggior parte del tutorial rimanente si occupa di far fare qualcosa di utile alle nostre sprite.
Non possono far nulla di proprio e quindi bisogna dotarle di una logica.
Questo si fa con gli oggetti che rappresentano il posto dove si uniscono insieme le sprite e i comandi.
Tutto questo si ottiene tramite l’interfaccia grafica e quindi non richiede alcuna capacità di programmazione.
Il nostro primo oggetto sarà una paletta.
Il modo più semplice per cominciare con un nuovo oggetto è di chiedere a GameMaker di creare un nuovo oggetto cliccando sul pulsante con la palla blu.
Oppure tramite la voce di menu Resources > Create Object.

15.

Assomiglia al lavoro fatto con la sprite ma ci sono delle differenze.
Prima di tutto dovresti dare un nome alla paletta, obj_bat_right.
Abbiamo bisogno di 2 palette: una per il lato destro e una per il lato sinistro.
Cominciamo con il lato destro.
Per attivare la sprite per la paletta devi cliccare sul piccolo pulsante sotto il nome dell’oggetto.
Appena l’avrai fatto apparirà un breve menu e potrai selezionare spr_bat.

16.

Adesso è il momento di inserire della logica del gioco nella paletta.

Si ottiene tramite Eventi e Azioni.
Ciascun evento contiene una serie di azioni…
Clicca Add Event.
Apparirà un piccolo menu di nome Event Selector.

Nella finestra clicca su Keyboard e seleziona Up.

Nota: abbi cura di non selezionare Key Press oppure Key Release. Essi avrebbero degli effetti non desiderati sul controllo della paletta.

Con questo si è stabilito che il gioco controllerà se il tasto freccia Up viene premuto.

17.

Adesso aggiungiamo la prima azione.
Quest’azione muoverà verso l’alto la paletta.

Individua l’icona Jump to position nella lista delle azioni disponibili.
Trascinala con il mouse nell’area della azioni.

Quando stacchi il mouse appare una nuova finestra.
Qui definisci di quanto si sposta la paletta per il tasto premuto.
Si deve spostare verso l’alto ma siccome GameMaker tratta l’asse y capovolto bisogna impostare il movimento a -7 piuttosto che a un valore positivo.
Inoltre dobbiamo abilitare il controllo Relative in modo che la paletta si muova di -7 rispetto a se stessa piuttosto che alle coordinate costanti del livello.
Clicca OK quando lo hai fatto.

Quello che succederà da adesso è che il gioco rileverà se il tasto Up viene premuto (l’evento) e di conseguenza sposterà in alto la paletta (l’azione).

18.

Il tasto Up è a posto ma anche il tasto Down deve essere sistemato.
Di nuovo Add Event, Keyboard, Down, Jump to position…
Nel menu dell’azione Jump to position specificheremo che la paletta si deve muovere di 7 lungo l’asse y.
Siccome abbiamo invertito significa che si muoverà verso il basso…
Ricordati di attivare di nuovo Relative.
Nella finestra Object Properties clicca di nuovo su OK per finire e salvare e chiudila.

19.

Adesso è il momento di far succedere qualcosa nel gioco.
L’oggetto obj_bat_right dovrebbe potersi muoversi in alto e in basso e per provarlo ci serve una risorsa room.
Room è quello che tutti chiamano livello nei videogiochi.
Le risorse room contengono tutti gli oggetti che costituiscono un livello.
Un livello si crea con l’icona di un quadrato bianco subito a destra dell’icona di una palla blu utilizzata per gli oggetti.

Dopo aver cliccato si aprirà la finestra Room Properties.
In questa finestra possiamo posizionare il nostro oggetto obj_bat_right.
Siccome questa paletta è controllata dai tasti su e giù che si trovano a destra nella tastiera allora è una buona idea posizionarla dalla stessa parte nel livello.
Posiziona obj_bat_right cliccando sul punto desiderato.
Abbassando il tasto del mouse puoi trascinare in giro l’oggetto.

Se in seguito hai necessità di spostarlo da qualche altra parte puoi utilizzare il tasto destro per cancellarlo e poi riposizionarlo di nuovo.

20.

Adesso il gioco deve essere testato.

Prima salva il tuo lavoro cliccando sull’icona con il dischetto.
Ti consiglio di utilizzare Save as... ogni volta che apporti delle modifiche al gioco in modo da poter ritornare indietro se qualcosa va storto.

Per lanciare il gioco clicca il pulsante con la freccia verde, Run normally.

Dovrebbe apparire l’immagine seguente.

Prova a utilizzare i tasti su e giù della tastiera.
La paletta dovrebbe muoversi nella giusta direzione.
Se non lo fa potrebbe essere necessario selezionare Relative oppure invertire i valori di y.
Ripeti i passi 16-18 per controllare di aver fatto tutto correttamente.

Nota che puoi spostare la paletta fuori dallo schermo… questo deve essere corretto.
Premi Esc per uscire dal gioco e ritornare a Game Maker.

21.

Stiamo per creare l’oggetto per il muro.
Clicca su Create object.

Assegna al nuovo oggetto il nome obj_wall e utilizza la sprite spr_wall.
Questo è tutto quello che serve per questo oggetto.
Clicca OK per salvare le modifiche.

22.

Per assicurarci che la paletta non attraversi il muro e esca dal campo di gioco è necesario modificare l’oggetto obj_bat_right.

Dobbiamo aggiungere un nuovo evento di tipo Collision.
La collisione dovrebbe avvenire tra la paletta e il muro.

Adesso trascina l’icona Bounce nello spazio per le azioni.

Nella finestra Bounce che appare devi poi selezionare all objects tramite l’apposito pulsante .
Quando hai finito clicca OK nella finestra Bounce.
Inoltre clicca OK nell’oggetto obj_bat_right per salvare tutte le modifiche.

23.

Prima di mettere alla prova la nuova collisione è necessario inserire i muri nel livello.
Fai doppio clic sul livello per aprirlo.

Per semplificare l’inserimento dell’oggetto obj_wall dobbiamo cambiare le dimensioni della griglia.

Gli oggetti si agganciano automaticamente alla griglia e siccome il muro è 32 per 32 pixel imposteremo la griglia a queste misure.

Adesso inseriamo tutti i pezzi del muro nel campo di gioco.
Il modo più semplice è di mantenere abbassato il tasto Shift mentre si utilizza il tasto sinistro del mouse.
In questo modo puoi trascinare il mouse sull’area desiderata per posizionare correttamente i muri.
Ricordati che se vuoi eliminare un pezzo allora clicca il tasto destro su di esso.

Nota: se l’oggetto del muro non è selezionato allora puoi farlo tramite il pulsante cerchiato di rosso nell’immagine.

24.

Salva il tuo lavoro tramite l’icona con il dischetto e clicca sul pulsante verde di play per provare il gioco.

Se il gioco funziona correttamente allaora la paletta non dovrebbe attraversare i muri.
Se ci passa attraverso allora ritorna al passo 22 e controlla se tutto è impostato correttamente.
Soprattutto se la collisione con il muro nell’oggetto obj_bat_right è impostata su all objects.

25.

È arrivato il momento di creare la seconda paletta.

Avendo già realizzato obj_bat_right è semplice: utilizza il pulsante destro su di esso e scegli Duplicate.

Assegna il nome obj_bat_left al nuovo oggetto, clicca sull’evento Up e scegli Change.

Questo permette di cambiare il tasto senza cambiare l’azione.

Nella finestra Event Selector che appare scegli Keyboard -> Letters -> W.

Quando hai finito ripeti i passaggi per l’evento del tasto Down e scegli S come nuovo tasto.

Il risultato finale dovrebbe essere…

26.

Apri di nuovo il livello.
Scegli il nuovo oggetto obj_bat_left e inseriscilo nel lato sinistro del campo di gioco.
Salva il tuo lavoro e clicca il pulsante verde play per provare il gioco.
Il nuovo oggetto obj_bat_left dovrebbe comportarsi esattamente come obj_bat_right tranne per il fatto che è controllato da W e S.

27.

Perché il gioco si animi è necessaria la palla.
Crearla è facile.
Clicca l’icona con la palla blu e crea il nuovo oggetto.

Appare la finestra Object Properties.

chiama l’oggetto obj_ball.
scegli per esso la sprite spr_ball.
aggiungi l’evento Create.
trascina nelle azioni l’icona Move fixed.

Apparirà una nuova finestra di nome Moved fixed.
Impostala in modo che tutte le frecce diagonali siano abbassate e Speed a 8.
Questa velocità potrà sempre essere modificata dopo se la palla dovrà andare più veloce o più piano.
Clicca OK quando hai finito.

28.

Con il movimento della palla a posto adesso è necessario introdurre la collisione altrimenti la palla attraverserebbe gli oggetti.

Clicca Add Event e scegli Collision.
Inizia con obj_bat_right.

Dopo aver impostato l’evento trascina l’icona Bounce nell’area delle azioni.
Nella finestra Bounce cambia against a all objects.
Clicca OK quando hai finito.

29.

Il processo di aggiunta della collisione deve essere ripetuto per obj_bat_left e il muro.
Vai avanti e fallo.
Il risultato finale dovrebbe essere quello nell’immagine con Bounce impostato nelle azioni.
Clicca OK quando avrai finito per salvare tutte le impostazioni per obj_ball.

30.

Apri il livello per inserire la palla.
Potrebbe essere d’aiuto impostare la griglia di nuovo a 16×16 così potrai inserirla precisamente al centro del livello.
Salva il tuo lavoro e lancia il gioco per vedere se la palla si muove.
Devi agire in fretta se vuoi evitare che la palla esca dal campo di gioco.
Se la palla non subisce collisioni con le palette o con il muro controlla i passi 28 e 29 per controllare se qualcosa ti è scappato.

31.

Per raccogliere la palla nel gioco sono necessari gli oggetti goal.
Questi oggetti saranno invisibili al giocatore ma sono molto importanti dietro le scene del gioco per sapere quando è stato realizzato un goal.

Crea una sprite, chiamala spr_goal_right e utilizza la dimensione standard 32x32 pixel.
Colorala di verde, salvala e clicca su OK.

Fai la stessa cosa, ma utilizza il colore giallo e chiamala spr_goal_left.

Dovresti finire con le nuove sprite seguenti

32.

Aggiungi le nuove immagini ai nuovi oggetti.
Assicurati di disattivare Visible in modo che il giocatore non li possa vedere nel gioco.

Hai finito con i nuovi oggetti.

33.

Adesso intervieni su obj_ball tramite un doppio clic.
Bisogna aggiungere le collisioni tra la palla e i nuovi oggetti goal.
Aggiungi l’evento collisione con obj_goal_right e poi trascina Jump to start position nelle azioni.

Poi vai alla scheda marcata di rosso, Score, e trascina Set Score nelle azioni.

Nella nuova finestra Set Score devi inserire 1 nella casella di testo e clicca su Relative in modo che un punto sia aggiunto al valore del punteggio ogni volta che si realizza un goal.

Aggiungi anche un’azione Sleep che si trova nella scheda Main2.
Impostala a 2000 ms.
Questo fermerà il gioco per 2 secondi ogni volta che un giocatore farà un punto.
Clicca OK quando hai finito.

34.

Adesso ripetiamo i passi per la collisione con obj_goal_left.
C’è una differenza: siccome Game Maker prevede un unico sistema di punteggio dobbiamo usare un trucco e utilizzare il sistema delle vite come contatore di punteggio!

Aggiungi un evento collisione con obj_goal_left e imposta Jump to start position come prima azione.
Poi vai alla scheda dei punteggi e trascina Set Lives nelle azioni.
Termina aggiungendo l’azione Sleep e impostala a 2000 ms.
Clicca OK per salvare le modifiche.

35.

Vai nel livello e inserisci gli oggetti obj_goal_left e obj_goal_right.
Salva le modifiche e lancia il gioco.

Osserva che la palla ritorna alla sua posizione di partenza quando si segna un punto.

36.

L’ultima cosa che serve al gioco è l’impostazione dei contatori di punteggio.
Il lavoro sottostante è stato già fatto negli ultimi passi quindi mancano poche rifiniture.
Crea un nuovo oggetto e chiamalo obj_controller.
Si tratta di un oggetto che gestisce i contatori dei punteggi.
Aggiungi un evento Create e trascina Set Score e Set Lives nelle azioni.
Lasci le impostazioni ai valori standard.
Questo imposterà a zero i punteggi all’inizio di ogni gioco.
Adesso aggiungi un evento Draw.
Questo scriverà i punteggi sullo schermo.
Trascina l’evento Draw Score nelle azioni e imposta x a 40 e y a 40 e imposta l’etichetta a Player left.
Clicca OK quando hai finito.

Poi trascina Draw Lives nelle azioni e imposta x a 450 e y a 40 e imposta l’etichetta a Player right.
Clicca OK quando hai finito.
Clicca OK per accettare tutte le modifiche per l’oggetto obj_controller.

37.

Apri il tuo livello e inserisci da qualche parte l’oggetto obj_controller.
Posizionare il controllore da qualche parte lo renderà attivo e assicura che farà quello per cui è stato progettato.
Accetta le modifiche per il livello e ricordati di salvare il gioco.

38.

Lancia il gioco.
Dovrebbe apparire come l’immagine seguente e avere i contatori di punteggio funzionanti.

Se i contatori non sono posizionati bene ritorna al passo 36 e modifica i valori di x e y per adattare le loro posizioni.

Se nel gioco sono visibili le sprite dei contatori o i quadrati gialli e verdi allora ritorna al passo 32 e disabilita Visible.

Congratulazioni, hai terminato il tutorial!
Spero che ti sia piaciuto e che continuerai a divertirti nella realizzazione di giochi.
Puoi cercare di migliorare la grafica del gioco con lo Sprite Editor oppure con il tuo editor grafico preferito.
Se pensi che il gioco è troppo difficile, o troppo facile, ritorna agli oggetti paletta e palla e modifica le loro velocità.

Ricordati che puoi trovare ulteriori tutorial su come realizzare videogiochi all’indirizzo http://www.yourgamedesign.com.