NOTA! Questo sito utilizza i cookie e tecnologie simili.

Se non si modificano le impostazioni del browser, l'utente accetta. Per saperne di piu'

Approvo

"Tic Tac Toe" (tris) realizzato con MultiMedia Fusion, tutorial 1 di 2

 

"Tic Tac Toe" (tris) realizzato con MultiMedia Fusion, tutorial 1 di 2INTRODUZIONE

VIDEOTUTORIAL (YOUTUBE)

VIDEOTUTORIAL (DOWNLOAD)

VERSIONE TESTUALE

LINK E ALTRE RISORSE UTILI

 


 

INTRODUZIONE

In questo primo di due tutorial sulla realizzazione del gioco "Tic Tac Toe" (il Tris) con il framework MultiMedia Fusion, vedremo la definizione dell'interfaccia e la logica dei punteggi per verificare la vittoria di uno dei due giocatori o il loro pareggio.

 


 

VIDEOTUTORIAL (YOUTUBE)

 

 


 

VIDEOTUTORIAL (DOWNLOAD)

 


 

VERSIONE TESTUALE

In questo primo di due tutorial (cliccare qui per la seconda parte) rivolti a chi conosce già Multimedia Fusion, vedremo come creare un Tic-Tac-Toe per due giocatori umani. Vedremo, in particolare, come gestire l'alternanza dei turni, la visualizzazione delle mosse e la logica utilizzata per decidere il vincitore.

 

Iniziamo creando un frame 800x600 con sfondo nero.

MMF - Tic Tac Toe - Parte 1 - 01

Aggiungiamo la prima cella della griglia che, di base, sarà un quadrato bianco 100x100.

MMF - Tic Tac Toe - Parte 1 - 02

Creiamo quattro animazioni: due con colori più leggeri per quando passiamo sopra una casella e due con colori più marcati per indicare che abbiamo appena cliccato.

MMF - Tic Tac Toe - Parte 1 - 03

Creiamo poi un contatore che gestirà l'alternanza dei turni e l'eventualità della vittoria.

MMF - Tic Tac Toe - Parte 1 - 04

Adesso cloniamo – attenzione a cliccare Clona e non Duplica – la nostra cella per creare una griglia 9x9 con cinque pixel di distanza tra ogni elemento.

MMF - Tic Tac Toe - Parte 1 - 05

Poiché avremo bisogno di vedere rapidamente il numero di ogni cella, sfruttiamo una caratteristica di MMF: se chiameremo “1” il primo oggetto, gli altri saranno numerati progressivamente.

MMF - Tic Tac Toe - Parte 1 - 06

Passiamo ora all'editor degli eventi: per prima cosa decidiamo di assegnare, all'inizio, un numero tra 0 e 1 al contatore dei turni, ovvero decidiamo quale dei due giocatori inizia per primo; l'espressione per farlo è Random(2).

MMF - Tic Tac Toe - Parte 1 - 07

Per chiarezza (e come promemoria) scrivo un commento in cui specifico quali valori potrà assumere il contatore dei turni e quali saranno le conseguenze.

MMF - Tic Tac Toe - Parte 1 - 08

Il primo evento riguarderà, dunque, il contatore dei turni, nel caso in cui questi si trovi sullo 0.

MMF - Tic Tac Toe - Parte 1 - 09

Creiamo “turno del blu”: un gruppo di azioni che sarà eseguito solo quando il contatore sarà sullo 0, quindi facciamolo attivare al contatore e non facciamolo partire automaticamente all'avvio del gioco.

MMF - Tic Tac Toe - Parte 1 - 10

La prima condizione che andiamo a testare è il MouseOver; in sintesi, vogliamo dire che se la cella non è stata ancora cliccata e ci passiamo sopra col mouse mentre è il turno del blu, la cella deve cambiare la propria animazione nella “0 – azzurra”.

MMF - Tic Tac Toe - Parte 1 - 11

Come facciamo a capire che la cella non è stata cliccata? Associamo a ciascuna di esse una variabile A che, se uguale a 0, indica che la cella è ancora cliccabile.

MMF - Tic Tac Toe - Parte 1 - 12

Aggiungiamo quindi la condizione: se la variabile è 0 e si passa col mouse sull'oggetto, l'animazione cambierà in “over blu”; non dobbiamo specificare altro, essendo dentro il gruppo “turno del blu”.

MMF - Tic Tac Toe - Parte 1 - 13

Copiamo e incolliamo l'evento: negando l'over, diremo al programma di ripristinare l'animazione di base quando il mouse è al di fuori della cella.

MMF - Tic Tac Toe - Parte 1 - 14

Adesso viene la parte più noiosa – ma che ci risparmierà molto lavoro più tardi: dovremo copiare e incollare per nove volte questi due eventi, cambiando l'oggetto cella; così facendo, estenderemo l'over su tutte le celle... per fortuna, è possibile trascinare le azioni da una casella all'altra.

MMF - Tic Tac Toe - Parte 1 - 15

Vediamo il risultato (ovviamente dobbiamo sperare che il Random abbia assegnato il turno al giocatore blu)...

MMF - Tic Tac Toe - Parte 1 - 16

Bene, aggiungiamo ora il comportamento dopo un click. Approfittiamo ancora della variabile Oggetto: non solo ci dirà se la cella è libera o no, ma anche da chi è stata cliccata... ecco come: quando il giocatore blu cliccherà su una cella libera, cambieremo la variabile A in 1; quando invece vi cliccherà il giocatore rosso, il valore sarà 10; spiegherò il perché più avanti.

MMF - Tic Tac Toe - Parte 1 - 17

Inoltre, dopo ogni click del giocatore blu il turno deve passare al giocatore rosso, per cui impostiamo il contatore a 1. Facciamo un copia-incolla per le nove celle.

MMF - Tic Tac Toe - Parte 1 - 18

Trasciniamo le azioni nell'incrocio corrispondente per associare gli eventi alla giusta azione.

MMF - Tic Tac Toe - Parte 1 - 19

Abbiamo cambiato il valore della variabile A, però non abbiamo ancora visualizzato l'immagine corretta nella cella dopo il click; per questo, abbiamo bisogno di un nuovo gruppo, stavolta attivo dall'inizio, chiamato Display.

MMF - Tic Tac Toe - Parte 1 - 20

Display controlla il valore di ogni cella e mostra l'animazione corretta, per cui il click cambia solo la variabile A, ma nel frattempo Display si accorge che la variabile è cambiata e modifica l'animazione (in questo caso, scegliendo Select Blu).

MMF - Tic Tac Toe - Parte 1 - 21

A questo punto dobbiamo creare il turno del giocatore Rosso. Basterà fare un copia-incolla del gruppo Turno Blu e cambiare un paio di riferimenti.

MMF - Tic Tac Toe - Parte 1 - 22

Aggiungiamo subito l'evento Contatore che attiva il gruppo turno del Rosso, disattivando quello del Blu, e aggiungiamo la disattivazione del turno Rosso all'evento Contatore=0, così saremo sicuri di non avere conflitti.

MMF - Tic Tac Toe - Parte 1 - 23

Adesso, basterà solo cambiare l'azione Cambia Animazione selezionando l'over Red e trascinare questa azione per tutte le celle.

MMF - Tic Tac Toe - Parte 1 - 24

Per quanto riguarda i click, dobbiamo cambiare, come detto, prima il valore della variabile A a 10 e, visto che siamo nel turno del giocatore Rosso, riportare il Contatore a 0, ovvero passare il turno al giocatore Blu.

MMF - Tic Tac Toe - Parte 1 - 25

In pochi click abbiamo creato così il turno del giocatore Rosso.

MMF - Tic Tac Toe - Parte 1 - 26

A questo punto possiamo chiederci perché funziona l'over Rosso ma non il click, nonostante l'animazione sia corretta... la risposta sta nel fatto che non abbiamo ancora aggiunto le istruzioni nel gruppo Display nel caso in cui il valore della variabile A sia 10. Basterà fare un paio di sostituzioni.

MMF - Tic Tac Toe - Parte 1 - 27

Adesso il click del Rosso avrà effetto, ma dovremo modificare l'animazione selezionata per impostarla su Selected Red.

MMF - Tic Tac Toe - Parte 1 - 28

Bene, l'aspetto grafico è completo; passiamo adesso alla logica per attribuire la vittoria ad un giocatore!

MMF - Tic Tac Toe - Parte 1 - 29

Riepilogando: abbiamo la nostra griglia composta da 9 celle; ad ogni cella abbiamo assegnato 1 o 10 a seconda del giocatore che l'ha selezionata.

MMF - Tic Tac Toe - Parte 1 - 30

Ecco cosa accade in caso di tris Rosso sulla prima riga: la somma delle variabili delle celle 1, 2 e 3 è 30; se fosse stato sulla seconda riga, la somma sarebbe stata quella delle celle 4, 5, 6, e così via.

 

Attraverso le somme capiamo se c'è stato un tris su una riga, una colonna o una diagonale: in caso di tris Blu la somma non farà 30 ma, ovviamente, 3.

 

Dobbiamo dunque controllare che la somma di queste celle sia 3, in caso di tris Blu, o 30, in caso di tris Rosso.

 

Creiamo un gruppo Check for Win, che contenga tutti i controlli.

MMF - Tic Tac Toe - Parte 1 - 31

La condizione che ci serve è: “compara due valori generici”; il primo termine sarà la somma delle prime tre celle.

MMF - Tic Tac Toe - Parte 1 - 32

Come ci ricorda il promemoria, in caso di tris Blu dobbiamo impostare il Contatore a 2; ripetiamo l'operazione per le altre due righe (celle 4,5,6 e 7,8,9); per le tre colonne (1,4,7 la prima; 2,5,8 la seconda e 3,6,9 la terza) e le due diagonali (1,5,9 da sinistra a destra e 3,5,7 da destra a sinistra).

MMF - Tic Tac Toe - Parte 1 - 33  

Nel videotutorial, effettuerò questa operazione fino alla fine del video... riprenderemo nella prossima puntata!

 


 

LINK E ALTRE RISORSE UTILI

 

COMMENTI, DOMANDE, ALTRE RISORSE, ...

Per commenti, domande o altro, accedere al Forum del sito (cliccare qui); per informazioni sulla Registrazione al sito, cliccare qui.

 

 

 
Vai all'inizio della pagina