Creare un videogame con Scratch: Clone wars

Cosa farai

In questa risorsa costruiremo un videogame con Scratch simile al classico “Space Invaders”.
Una navicella spaziale si muove a destra e a sinistra nella parte bassa dello schermo; un pipistrello si muove nella parte alta e lancia arance verso la navicella.
Se la navicella viene colpita, perdi una vita. Hai tre vite a disposizione. Il gioco finisce quando le perdi tutte.
Lo schermo è attraversato da ippopotami volanti che si muovono in maniera casuale e che puoi colpire sparando con la navicella. Per ogni ippopotamo colpito guadagni un punto. Se un ippopotamo si scontra con la navicella, perdi una vita.

Dovrai:

  • creare e animare tutti gli oggetti presenti nel gioco: la navicella spaziale, il lampo (lo sparo), il pipistrello, le arance, gli ippopotami volanti;
  • definire le variabili necessarie per tenere il conto delle vite a disposizione del giocatore e del punteggio realizzato;
  • scrivere il codice per gli eventi presenti nel gioco, ossia definire cosa succede quando un lampo colpisce un ippopotamo e quando un’arancia o un ippopotamo colpiscono la navicella spaziale.
  • La navicella spaziale

      Per prima cosa devi quindi creare una navicella spaziale e uno sfondo che richiami lo spazio.

    1. Apri un nuovo progetto di Scratch e cancella il gatto di Scratch facendo click con il tasto destro del mouse sul gatto e selezionando cancella fra le opzioni a disposizione nel menu a tendina.
    2. Crea un nuovo Sprite scegliendolo dalla libreria di Scratch. Per farlo, fai click sul’icona Scegli uno Sprite dalla libreria, seleziona lo Sprite Spaceship e premi il pulsante OK:

      La navicella è un po’ troppo grande in relazione alla dimensione dello sfondo. Rimpiccioliamola usando lo strumento Riduci lo Sprite
      Fai clic sull’icona Riduci lo Sprite; apparirà una nuova icona che si muove insieme al cursore del mouse. Portala sulla navicella e fai click fino a che raggiunge una dimensione che ti sembra adatta alle dimensioni dello sfondo:

      Trascina quindi la navicella nella parte bassa dello sfondo.
    3. Ora crea un nuovo sfondo. Fai click sull’icona Scegli uno sfondo dalla libreria, seleziona lo sfondo Stars e premi il pulsante OK:
    4. Salva il progetto con il nome clone_wars. Dovresti visualizzare una schemata simile alla seguente:

    L’animazione della navicella spaziale

    Nel nostro videogame creato con Scratch vogliamo fare in modo che sia possibile muovere a destra e a sinistra la navicella spaziale usando i tasti freccia.
    Iniziamo con il movimento a sinistra.
    Riformuliamo quanto vogliamo fare in maniera che sia più simile al codice che dobbiamo scrivere. Vogliamo che, durante lo svolgimento della partita (cioè quando eseguiamo il programma) ogni volta che premiamo il tasto freccia sinistra la navicella spaziale si sposti verso sinistra di un certo numero di pixel.
    Il codice che devi scrivere è il seguente:

    Il blocco quando si clicca su bandierina verde fa in modo che tutto quello che segue venga eseguito quando il programma viene lanciato (questo perché il programma viene lanciato proprio facendo click sulla bandierina verde).
    Il blocco per sempre fa in modo che vengano eseguite di continuo le istruzioni definite dai blocchi posti al suo interno… ossia, se tasto freccia sinistra premuto allora cambia x di -4.

    Prova a eseguire il programma per vedere se funziona correttamente.

    Per definire il movimento verso destra della navicella ti basta aggiungere all’interno del blocco per sempre una condizione analoga a quella imposta per il tasto sinistro ma, questa volta, vincolata alla pressione del tasto freccia destra:

    Esegui il programma per vedere se funziona correttamente.

    Un lampo come proiettile

    La navicella spaziale deve essere in grado di “sparare” lampi.
    Per prima cosa, dunque, crea un nuovo Sprite selezionando Lightning dalla libreria degli Sprite.

    Il nuovo Sprite viene visualizzato sullo Stage. Non è esattamente quello che ci serve: noi vorremmo che il lampo non fosse sempre visibile, ma lo diventi solo quando il giocatore decide di sparare. Dobbiamo quindi fare in modo che, quando il programma è in esecuzione, il lampo venga nascosto:

    Fai click sulla bandierina verde per assicurarti che il lampo venga nascosto.

    Come abbiamo detto, il lampo deve diventare visibile quando il giocatore decide di sparare. Ma da dove deve partire il lampo e dove deve andare? Dalla navicella spaziale verso l’alto! Quindi, quello che vogliamo che succeda è che quando il giocatore decide di sparare, il lampo diventi visibile dove si trova la navicella spaziale e si muova verticalmente verso l’alto.
    Se decidiamo che il giocatore possa sparare premendo il tasto spazio, possiamo riformulare quanto appena detto in questo modo: mentre il programma è in esecuzione, ogni volta che viene premuto il tasto spazio crea un lampo, rendilo visibile nella posizione in cui si trova la navicella e muovilo verticalmente verso l’alto finché raggiunge il bordo superiore dello Stage.
    Fai click sullo Sprite Spaceship e scrivi il codice seguente:

    Ora quando il giocatore preme il tasto spazio, viene creato un lampo.
    Hai provato?
    Se sì, ti sarai accorto che sembra che non succeda nulla. Questo perché, sebbene il lampo sia stato creato, non abbiamo ancora dato istruzioni che lo facciano apparire e muovere sullo schermo.
    Torna allo Sprite Lightning e scrivi:

    Ora, quando un nuovo lampo viene creato (e cioè quando si preme il tasto spazio) il lampo diviene visibile (mostra), e, fino a che viene raggiunto il bordo dello Stage (ripeti fino a quando sta toccando bordo), continua a muoversi verso l’alto 10 px per volta (cambia y di 10). Quando il lampo tocca il bordo, sparisce (elimina questo clone).

    Prova a lanciare il programma e a premere il tasto spazio.

    Ooopppssss!! Ci sono un po’ di problemi da risolvere!
    Quando il giocatore preme il tasto spazio, il lampo viene sempre craeto nello stesso punto anche se la navicella si sposta! Inoltre è troppo grande rispetto alla dimensione dello sfondo ed è rivolto nella direzione opposta a quella che vorremmo. Possiamo risolvere questi ultimi due problemi inserendo i blocchi porta dimensione al 25% e punta in direzione -90 al di sotto dei blocchi quando si clicca su e nascondi:

    Per collegare il lampo alla navicella abbiamo bisogno del blocco raggiungi Spaceship:

    Esegui il programma e vedi se adesso funziona correttamente.

    Ci siamo quasi, ma c’è ancora un problema: hai provato a vedere cosa succede se tieni premuto il pulsante spazio? Se non lo hai fatto, prova adesso.

    Per risolvere questo problema possiamo inserire un blocco attendi 0.5 sec nel blocco di codice che determina la creazione del lampo quando si preme il tasto spazio:

    Lancia il programma e vedi se il problema è ora stato risolto.

    Gli ippopotami volanti

    Adesso aggiungiamo al gioco gli ippopotami volanti. Devono apparire in maniera casuale nello stage e muoversi in direzione casuale finché non vengono colpiti da un lampo: se invece colpiscono la navicella spaziale, la fanno esplodere.

    Prima di tutto, importa lo Sprite Hippo1 dalla libreria degli Sprite e riduci la sua dimensione in modo che sia simile a quella della navicella spaziale.

    Ora imposta lo stile di rotazione in modo che sia solo destra-sinistra (fai click sull’icona i dello Sprite Hippo1 e quindi sull’icona a forma di doppia freccia).
    Vogliamo che gli ippopotami volanti appaiano in maniera casuale nello stage. All’inizio non devono essere presenti. Le condizioni iniziali sono dunque le stesse che abbiamo creato per il lampo:

    Per farli apparire in maniera casuale, dobbiamo scrivere del codice nello script dello Stage.
    Fai click sullo Stage e scrivi:

    Ora viene creato un ippopotamo volante in un intervallo di tempo compreso fra 2 e 4 secondi, ma se provi a lanciare il programma, non vedrai nulla; è esattamente quanto successo prima con il lampo. Per adesso abbiamo solo creato gli Sprite Hippo1 ma non abbiamo definito come debbano essere usati.

    Fai click sullo Sprite Hippo1.

    Vogliamo fare in modo che quando Hippo1 viene clonato, appaia in una posizione casuale dello Stage.
    Fissiamo l’altezza; diciamo che devono apparire in cima allo stage… o meglio, fissiamo y = 150. La posizione x può essere un valore a caso fra -220 e +220… ossia quasi tutta la larghezza dello Stage.
    Scrivi quindi:

    Esegui il programma.

    Gli ippopotami vengono creati e appaiono sullo schermo… ma rimangono fermi…noi vogliamo invece che si muovano in direzione casuale con una certa velocità finché non vengono colpiti da un lampo lanciato dalla navicella spaziale.

      Per farlo abbiamo prima di tutto bisogno di creare una nuova variabile velocità per lo sprite Hippo1:

    1. Fai click su Variabili e Liste e quindi sul pulsante Crea una Variabile;
    2. Dai il nome velocità alla nuova variabile, spunta la casella solo per questo sprite e premi il pulsante OK.

    Ora per gli ippopotami volanti hai a disposizione il nuovo blocco porta velocità a. Usiamolo per associare a ciascun ippopotamo creato una velocità casuale:

    E ora scriviamo il codice per far muovere gli ippopotami finché non vengono colpiti:

    Lancia il programma e vedi se funziona correttamente.

    Rispetto a quanto ci eravamo prefissati, dobbiamo solo fare in modo che la navicella esploda quando viene colpita da un ippopotamo volante.
    Riformulando questa richiesta altro modo, vogliamo che quando uno sprite Hippo1 tocca lo sprite Spaceship, quest’ultimo scompaia e al suo posto appaia un’esplosione… ossia viene cambiato il costume dello sprite Spaceship.

    L’esplosione della navicella spaziale

    Per creare un nuovo costume Esplosione possiamo modificare il costume Sun presente nella libreria di Scratch.
    Seleziona lo Sprite Spaceship, apri i suoi Costumi e fai click sull’icona scegli un costume dalla libreria: seleziona Sun e premi OK.

    Usa lo strumento colora una forma per cancellare la faccia e colorare il costume. Cambia quindi il suo nome in esplosione:

    Adesso scrivi:

    Quando la navicella spaziale viene colpita da un ippopotamo volante, dovrebbe esplodere.
    Esegui il programma per assicurarti che funzioni come previsto.

    Ora dobbiamo risolvere due problemi: dobbiamo fare in modo che quando la navicella esplode, tutti gli ippopotami scompaiano e la navicella ricompaia, in modo da ritornare alle condizioni iniziali.

    Occupiamoci in primo luogo di far scomparire gli ippopotami.

    Dobbiamo fare in modo che l’evento “la navicella è esplosa” venga comunicato a tutti gli sprite del gioco per farli compiere azioni in conseguenza. Per farlo abbiamo bisogno del blocco invia a tutti messaggio.
    Dal menu a discesa del blocco invia a tutti messaggio che trovi nel gruppo Situazioni seleziona nuovo messaggio; scrivi navicella esplosa nel campo di testo nome del Messaggio e premi OK:

    Possiamo ora definire le azioni che uno sprite deve compiere quando riceve il messaggio navicella esplosa usando il blocco quando ricevo navicella esplosa.

    Quindi, nel nostro gioco, quando la navicella spaziale cambia costume deve mandare il messaggio a tutti gli sprite invia a tutti navicella esplosa:

    Quando lo sprite Hippo1 riceve questo messaggio deve sparire dallo schermo, ossia deve essere cancellato:

    Esegui il programma per assicurarti che funzioni come previsto.

    Per far ritornare la navicella spaziale al suo costume iniziale ci basta inserire in un loop il blocco di codice scritto in precedenza per fargli cambiare costume:

    Esegui il programma e prova giocare.

    Il punteggio e le vite a disposizione del giocatore

    Per il momento il nostro gioco non ha mai fine e non viene calcolato nessun punteggio in conseguenza del numero di ippopotami colpiti.
    Per ovviare a questo problema abbiamo bisogno di creare le variabili vite e punteggio.

    Per creare la variabile vite seleziona il gruppo Variabili e Liste e premi il pulsante Crea una Variabile; dalle il nome “vite” e premi OK.
    Ripeti la stessa procedura per creare la variabile punteggio.

    Supponiamo il giocatore abbia a disposizione 3 vite. Vogliamo che quando inizia il gioco la variabile vite assuma il valore 3 e, ogni volta che la navicella esplode (ossia cambia costume, ossia viene colpita da un ippopotamo) venga tolta 1 vita. Vogliamo inoltre che, quando il valore associato alla variabile vite assume il valore 0, il gioco termini.
    Il codice che dovremo scrivere è il seguente (le parti nuove sono quelle interne ai rettangoli rossi):

    Il punteggio deve invece essere uguale a 0 all’inizio del gioco e aumentare di 1 ogni volta che un ippopotamo viene colpito:


    Esegui il programma e prova giocare.

    Il pipistrello

    Avrai notato che il gioco è ancora piuttosto semplice. Per renderlo più difficile e più avvincente, aggiungiamo un pipistrello che vola e lancia arance verso la navicella spaziale; se viene colpita, esplode, e il giocatore perde una vita.

    Il pipistrello si muove solo in orizzontale: attraversa lo schermo da destra a sinistra e lancia le arance verso il basso (verso la navicella spaziale).

    Per prima cosa crea un nuovo sprite. Scegli Bat1 dalla libreria degli Sprite.
    Riduci la sua dimensione in modo che sia simile a quella della navicella. Usa lo strumento Riduci lo Sprite.

    Adesso scrivi il codice per fare muovere il pipistrello. Quando il gioco inizia, il pipistrello deve muoversi orizzontalmente (ossia y è costante) e, quando raggiunge il bordo dello stage, deve rimbalzare:

    Il pipistrello ha a disposizione 2 costumi. Se passiamo da uno all’altro mentre si muove, otteniamo un’animazione migliore. Ci basta utilizzare il blocco passa al costume seguente e inserirlo nel loop che abbiamo appena scritto:

    Abbiamo anche aggiunto un blocco attendi perché il movimento del pipistrello era troppo frenetico.

    Ora vogliamo che lanci arance mentre si muove. Abbiamo quindi bisogno di creare un nuovo Sprite: scegli Orange dalla libreria di Sprite.

    Come vogliamo che vengano lanciate le arance? Una ogni tanto. Vogliamo che all’inizio del gioco non ci sia nessuna arancia e che dopo un intervallo di tempo che scegliamo, appaia sullo schermo e cada verso la navicella. Stiamo ragionando in maniera simile a quanto abbiamo fatto in precedenza per il lampo. All’inizio del gioco lo sprite Orange deve essere nascosto. Quando si clicca su bandierina verde, lo sprite Bat1 deve attendere un tempo a caso fra 1 e 10 secondi (è una scelta arbitraria che stiamo facendo noi in questo momento) e quindi crea un clone di Orange:


    Se provi a eseguire il programma adesso, non vedrai ancora nessuna arancia sullo schermo. Infatti, abbiamo scritto che all’inizio del gioco lo Sprite arancia deve essere nascosto. In modo analogo a quanto fatto per il lampo, dobbiamo scrivere un codice che faccia apparire lo sprite quando viene clonato… e lo faccia apparire dove si trova il pipistrello:

    Prova a eseguire il programma ora.

    Le arance vengono create, ma rimangono nel punto in cui sono state create.
    Noi vogliamo che cadano verso il basso (la loro y deve continuare a diminuire) e, quando toccano il bordo inferiore, devono scomparire:

    Bene, dobbiamo solo prendere in considerazione l’interazione delle arance con la navicella spaziale.
    Quando un’arancia colpisce la navicella spaziale, quest’ultima deve esplodere, l’arancia deve scomparire, e il numero di vite a disposizione del giocatore deve essere aggiornato.

    Per fare esplodere la navicella quando viene colpita da un’arancia, ci basta modificare leggermente il blocco di codice che avevamo già scritto:

    Per far sparire l’arancia nel caso colpisca la navicella, ci basta collegare il blocco elimina questo clone all’evento quando ricevo navicella esplosa:

    Prova a eseguire il programma per vedere se tutto funziona come ci aspettavamo.

    Hai notato che quando la navicella viene colpita da un’arancia il giocatore perde una vita? Non abbiamo dovuto scrivere nulla per aggiornare questa parte del programma, perché il numero di vite era stato collegato all’esplosione della navicella spaziale…

    Game over

    Abbiamo quasi finito. Un’ultima cosa che potremmo fare è aggiungere un messaggio che comunichi al giocatore che la partita è finita.
    In altre parole, quando la variabile vita assume il valore 0, dobbiamo scrivere GAME OVER sullo schermo.
    Se avessivo uno sprite GAME OVER, scrivere GAME OVER sullo schermo significherebbe mostrare questo sprite.

    Costruiamo quindi lo sprite GAME OVER.

    Fai click sull’icona disegna un nuovo sprite, scrivi GAME OVER usando lo strumento testo e fai click sul pulsante converti in vettoriale. Posiziona GAME OVER sullo schermo e usa lo strumento espandi lo sprite per ingrandirlo, se lo ritieni necessario:

    Questo sprite deve essere nascosto fino a quando non riceve un messaggio che dica che la partita è finita.
    Creiamo allo scopo il nuovo messaggio partita finita e scriviamo questo codice:

    Il messaggio deve essere inviato a tutti gli sprite a fine partita; ci basta aggiungere un blocco prima di ferma tutto:

    Prova lanciare il programma.
    Fai qualche partita per capire quali cambiamenti potresti fare al videogame creato con Scratch per migliorarlo.


    This learning resource is provided for free by the Raspberry Pi Foundation under a Creative Commons licence.
    Find more at raspberrypi.org/resources and github.com/raspberrypilearning.