PONG
2 Giocatori

Tratto da

Soren B. Andersen
Making Pong with Game Maker 8
YourGameDesign.com > Tutorial

Pong è tra i giochi più classici e primitivi di tutti i tempi...
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 con Load 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\.
When you have it loaded your Sprite Properties should look as the screenshot.
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 dargli un nome alla paletta, obj_bat_right.
Abbiamo bisogno di 2 palette: una per il alto 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.

It is finally time to make something happen in this game.
The bat_right object should be able to move up and down so this should be tested.
To do this we need a room.
This is basically what many know as a level in computer games.
Rooms in Game Maker contain all the objects that make up a level.
A room is created with the white box icon right next to the blue ball icon we used for objects.

Once clicked it will create the room in a new window called Room Properties.
In this window we can place our obj_bat_right object.
Since this bat is controlled by the up and down keys on the right side of the keyboard it is a good idea to place the bat in this side of the room.
Place obj_bat_right by clicking in the wanted spot.
By keeping the mouse button down you can drag it around.
If the bat needs to be moved later you can right-click on it to delete it and then you need to place it again.

20.

The game needs to be tested now.
First save your work by clicking the diskette icon.
It is a good idea to save your game after making changes so that you can return to an older version if something goes wrong.

To run the game click the green play button.

It should look similar to the following image.
Try using the up and down keys on your keyboard.
The bat should be able to move in the right directions.
If it does not then maybe the Relative marker needs to be checked or the y-axis values are flipped.
Return to steps 16-18 to check everything is done correctly.
Also notice that you are able to move the bat of the screen.
This is something we will now fix.
Press the Escape key to exit the game and return to Game Maker.

21.

We will now create the wall object.
Click on Create an object.

Name the newly created object obj_wall and use the wall sprite from the selector menu.
This is all that needs to be done for this object.
Click OK to save changes.

22.

To make sure the bat does not go through the wall and exits the playing field we need to edit the bat_right object.
Here we need to add a new event called Collision.
This collision should take place between the bat and the wall.

When done drag the Bounce icon into Actions.
In the Bounce window that will now appear you should then select all objects with the selector button.
Click OK in the Bounce window when done.
Also click OK to save all changes in the obj_bat_right object.

23.

Before testing the new collision we need to insert walls into our Room.
Doubleclick on your Room to open it.
For the easiest way to insert the obj_wall object we can change the grid size.
Objects automatically snap to the grid and since the wall is 32 by 32 pixels we will set the grid to this size.
Now we can insert all the wall pieces onto the playing field.
The easiest way is to hold down the Shift key while holding down the left mouse button.
This way you can drag the mouse over the wanted areas and place the walls correctly.
Remember that if you want to delete a piece of wall then simply right click on it.
Note: if your wall object is not selected then you can do so in the selector menu circled red in the image.

24.

Save your work with the diskette icon and click on the green play button to test the game.
If the game runs correctly then the bat should not be able to go through the walls.
If it does go through then go back to step 22 and check if everything was set right.
Especially that collision in the obj_bat_right object with the wall is set to all objects.

25.

Time to create the second bat.
With obj_bat_right done this is easy when you right click on this object and select Duplicate.
Name this new object obj_bat_left and click on the Up event and then select Change.
This makes it possible to change the key event while not having to change the Actions.
In the Event Selector window that now is show you should select Keyboard -> Letters -> W.
When this is done repeat the process for the Down key event but select S as the new down key instead.
The end result should look like Image 4.

26.

Open your Room again.
Select the new obj_bat_left object and insert it in the left side of the playing field.
Save your work and click the green play button to test the game.
The new obj_bat_left should behave exactly like obj_bat_right only that it is controlled by W and S instead.

27.

For this game to come alive we need the ball.
Making it is easy.
Click the blue ball icon to create a new object.
Object Properties will now be shown.

name this object obj_ball.
select the spr_ball sprite for it.
add the event called Create.
drag the Move fixed icon into Actions.

A new window called Moved fixed will appear.
It should be modified so that all the diagonal arrows are clicked and Speed is set to 8.
This speed can always be modified later if the ball should move faster or slower.
Click OK when done.

28.

With ball movement in place we need collision or the ball will continue through objects it encounters.
Click Add Event and select Collision.
Start with obj_bat_right.
Once the Event is set you can drag the Bounce icon into the Actions area.
In the new Bounce window change against to all objects.
Click OK when done.

29.

This process of adding collision should also be done with obj_bat_left and the wall.
Go ahead and do this.
The end result should like like the following image and have Bounce set in Actions for all of them.
Click OK when done to save all new settings for the ball object.

30.

Open your Room to insert the ball.
It might help to set the grid back to 16x16 so that you can place it precisely in the center of the room.
Save your work and run a test game to see if the ball is moving.
You must act quickly if you want to save the ball from leaving the playing field.
If the ball does not have collision with any of the bats or the wall take a closer look at step 28 and 29 to see if something in your game is missing.

31.

To keep the ball in the game some goal objects are needed.
These objects are going to be invisible to the player but are highly important behind the scenes for the game to know when a goal has been scored.
Create a sprite, name it spr_goal_right and use the standard 32x32 pixels in size.
Color it green, save and click OK.
Do the same thing, only this time making it yellow and naming it spr_goal_left.
You should end up with the following new sprites.

32.

Add both of the new sprites to new objects.
Make sure to deactivate Visible so that the player cannot see them in the game.
You will end up with the following new objects.

33.

Now enter the ball object by double clicking on it.
We need to add collision between the ball and the new goal objects.
First add a collision event with obj_goal_right and then drop the Jump to start position into Actions.

Then go into the score tab marked with red (Image 2) and drag Set Score into Actions.
In the new Set Score window you need to enter 1 (one) into the text area and click Relative so that the 1 point is added on top of the current score every time a goal is scored.

Also add a Sleep action found under the Main2 tab.
Set it to 2000 milliseconds.
This will pause the game for two seconds every time a player scores.
Click OK when done.

34.

The process will now be repeated for the collision with obj_goal_left.
The difference is that since Game Maker only has one built-in score system we will cheat a bit and use the Lives system as a score counter for this goal.
So add a collision event with obj_goal_left and set Jump to start position as the first action.
Then go into the score tab and drag Set Lives into Actions.
Finish by adding the Sleep action and setting it to 2000 milliseconds.
Click OK to save all changes.

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.

The last thing this game of Pong needs is a set of score counters.
The underlying setup has already been done in the last few steps so it only needs the finishing touches.
Create a new object and name it obj_controller.
This is an object that handles the score counters.
Add a Create event and drag Set Score and Set Lives into its Actions.
Leave the settings for these on their standard values.
This will set the scores to zero on the start of every new game.

Now add a Draw event.
This will draw the score counters on the screen.
Drag the event Draw Score into its Actions and set it to x:40, y:40 and name the caption Player left.
Click OK when done

Then drag Draw Lives into its Actions and set it to x:450, y:40 and name the caption Player right.
Click OK when done.
Click OK to accept all changes for the controller object.

37.

Open your Room and insert the controller object somewhere in it.
Having the controller placed somewhere will make it active and ensure that it can do what it is supposed to.
Accept the changes for the Room and remember to save your game.

38.

Lancia il gioco.
Dovrebbe apparire come l'immagine a fianco 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.

Prova a Programmare! : GmPONG2