Walk & Talk II

 

Benvenuti,

oggi continueremo il nostro progetto storytelling, iniziato 👉 QUI,  analizzando i vecchi codici ed introducendo nuove azioni. 

👉 QUI invece il link al progetto Scratch. Let's go! 

Codice dello stage

Prima di dedicarci ai personaggi facciamo anche qualche modifica grafica che utilizzeremo durante la storia, andiamo sul lato destro e clicchiamo sulla scritta stage oppure qualsiasi parte nella striscia verticale con l'anteprima dello sfondo. In questo modo andremo a selezionare lo script dello stage e andiamo subito in alto a sinistra sul tab sfondi per accedere a quelli caricati per il nostro progetto, funziona un po' come i costumi degli sprite.

Voi dovresti avere solo lo sfondo vuoto e quello che abbiamo caricato la volta scorsa, ossia la città, andando in basso a sinistra l'icona dello sfondo ti permetterà di accedere alla galleria dove selezionare Urban , assecondami per questo tutorial poi potrai dare sfogo alla tua creatività in seguito 😂 

Ottimo, adesso abbiamo due sfondi disegnati e uno vuoto , selezioniamo quello vuoto ( se non è presente creane uno cliccando l'icona in basso e poi disegna un nuovo costume ) e dal pannello degli strumenti seleziona lo strumento rettangolo andando a creare un rettangolo molto ampio che copra tutta l'area o almeno quella delimitata dal rettangolo bianco interno che coincide precisamente con l'area dello stage. Scegli un colore di riempimento ed abbiamo fatto, questo pannello neutro ci servirà come base per l'intervallo della nostra storia. 

Il codice sarà molto semplice perché all'inizio della nostra storia , quindi bandierina verde, aggiungiamo passa allo sfondo City che sarebbe l'ambientazione iniziale scelta e poi sempre nella sezione Situazioni andiamo a prendere quando ricevo messaggio , clicchiamo sulla freccettina bianca del blocco e selezioniamo nuovo messaggio andando a definire il nome del messaggio , io ho inserito Break. Sotto questo blocco inseriamo passa allo sfondo1 , sarebbe il mio costume neutro , tu selezionerai il nome corretto nel tuo progetto, poi vedremo a cosa serve questa misteriosa ricezione del messaggio.

Codice della scritta 

Adesso andiamo ad inserire un nuovo sprite dall'icona in basso a destra e poi disegna uno sprite, avremo uno sprite vuoto e andando sul tab costumi ,usando lo strumento Testo ( la T ) andiamo ad inserire una scritta , nel mio caso ho messo " ... Qualche ora dopo ... " da abbellire a proprio gusto. 

Andiamo anche sul tab suoni e poi in basso accediamo alla galleria e selezioniamo Xilo4 e passiamo al script.

All'inizio , sotto la bandierina verde mettiamo nascondi, perché non vogliamo vedere di certo la scritta, e poi sotto la ricezione di Break andiamo a mostrare il nostro sprite, da Suoni facciamo partire la riproduzione con attesa della fine e poi nasconderemo lo sprite per passare allo sfondo Urban. 

Cosa abbiamo creato? Un folletto birichino invia un messaggio e quando questo viene ricevuto il nostro sprite si mostra, parte una musichetta che avendo al suo interno l'attesa scandisce anche i tempi della nostra storia e finita la musica nascondiamo la scritta e modifichiamo lo sfondo. Sì, lo sfondo può essere cambiato da ogni sprite e cosa ancora più bella esiste un blocco apposito che si accorge del cambio dello sfondo e può attivare il nostro codice, un po' come il blocco bandierina verde o messaggio che identificano un determinato momento permettendomi di collegare codice a questi eventi o per usare un termine noto a queste Situazioni. Se vi piace la scritta, come tutti gli Sprite, può muoversi , quindi entrare dall'alto o dal lato, può diventare più grande o più piccola, ruotare. Date un occhio anche agli effetti grafici. 

Adesso andiamo a trovare il folletto birichino.

Codice di Avery

Partiamo dalla nostra amica andando a vedere le modifiche al vecchio codice in base alle nozioni acquisite e al nuovo codice da fare.

Il codice di destra è quello nuovo , partendo dall'inizio dobbiamo inserire subito dopo nascondi un punta in direzione 90 perché dopo andremo a modificare il suo orientamento e quindi adesso abbiamo la necessità di inizializzare nel modo corretto.

Passiamo alla parte nuova, eravamo arrivati alla fine del dialogo dove i personaggi si salutavano dandosi appuntamento più tardi al bar. L'ultima a parlare è proprio Avery che faremo uscire per prima dalla scena, punta in direzione -90 e usa stile di rotazione sinistra-destra serviranno per posizionare correttamente lo sprite e scivola per farla uscire ( la X da raggiungere è la massima consentita quindi 240 ) con nascondi finale per simulare l'uscita di scena.

I primi due blocchi inseriti sono quelli di cui abbiamo parlato la volta scorsa da usare invece della modifica grafica di ribaltamento del personaggio. Ecco il motivo per cui in uscita ci troviamo con uno sprite che punta a -90 ( 270° , verso sinistra ) ma graficamente guarda a 90 ( verso destra ) , lo stesso motivo per cui avevamo usato passi negativi per entrare nella scena.

Poco fa abbiamo visto come introdurre un intervallo con relativo cambio di scena, ecco il nuovo blocco di Avery che senza alcuno sforzo, senza fare conti di secondi ci permette di attivare le nuove azioni. 

Nel momento in cui cambiamo lo sfondo e passiamo a Urban il blocco quando lo sfondo passa a Urban si attiva permettendo l'esecuzione dei nuovi comandi. Attenzione , l'inizializzazione non serve solo all'inizio, come in questo caso dovendo rientrare nella scena dobbiamo impostare nuovamente i valori corretti di posizione , punta in direzione 90 e passa al costume avery A e poi attendo un secondo per un mero aspetto estetico-teatrale 😂. 

No, non ho sbagliato costume, ho volutamente scelto il primo perché mi sembrava più carino per l'animazione che verrà e anche per sottolineare l'importanza del costume corretto e di verificare la correttezza a seconda della situazione. 

Questa volta la nostra Avery camminerà veramente , senza scivolare in modo rigido come stesse su uno skateboard , ritornano in aiuto le vecchie animazioni fatte da tanti disegni rappresentati a intervalli precisi.

Dopo aver mostrato il nostro personaggio un ciclo di 15 ripetizioni conterrà fai -10 passi per spostarsi, passa al costume seguente per l'animazione ( visto che lo sprite possiede tutte le immagini per simulare una camminata , ecco perché ho scelto lei ) e l'attesa di 0.2 secondi per poter effettivamente visualizzare l'animazione . Provate cosa succede senza il tempo o a modificare la quantità di passi o il numero di cicli. La nostra signorina è al centro della scena in attesa del ritardatario Jaime, ma chi non ha un amico ritardatario?

Codice di Jaime

Rimettiamoci in pari con il ragazzo, tra i primi blocchi aggiungiamo subito passa al costume jaime A e punta in direzione 90 ( sì, lui è puro da modifiche grafiche 😂 ). Visto che l'ultima a parlare è la nostra amica , alla fine del codice vecchio aggiungiamo l'attesa di 4 secondi per ascoltarla e poi il blocco stile di rotazione e punta in direzione -90 ( qui i versi di camminata coincidono con quelli dell' immagine ) pronti per scivolare fuori dalla scena fino a sparire una volta raggiunto il punto ( -240, -122 ). 

Ormai siete bravissimi non mi perdo in spiegazioni inutili ma voglio solo farvi notare che abbiamo trovato il nostro folletto invia messaggi, essendo l'ultimo ad abbandonare la scena sarà lui ad attivare l'invio e quindi l'intervallo e il cambio sfondo.

Passiamo alle cose interessanti , anche il nostro amico dovrà rientrare , anche se in ritardo 🙈 e prima di sbirciare il codice vi suggerisco di controllare i vari costumi che ha , potrà banalmente avere un codice uguale ad Avery ? 

La risposta ovvia è no, i primi costumi del nostro amico non permettono la visualizzazione ciclica ma dobbiamo studiare uno stratagemma per saltare le prime immagini che non hanno niente a che fare con la camminata, se non vi fidate provate il codice di Avery per la camminata di Jaime 😜.

Prima di tutto prendiamo il nostro blocco a cappello di cambio sfondo, così appena avremo la nuova scena mettiamo in posizione con punta in direzione 90 ( dobbiamo entrare andando verso destra ) e impostiamo il costume sul primo necessario per la camminata , è il terzo, quello nominato walking non a caso. Siamo in ritardo quindi entreremo dopo due secondi, un secondo dopo Avery che attendeva solo un secondo 😆.

Sicuramente avremo bisogno del ciclo per ripetere il cambio immagine e generare l'animazione , 14 ripetizioni per 10 passi mi sembrava consona alla scena voi regolatevi a piacimento, come anche l'attesa di 0,2 secondi ma adesso dobbiamo introdurre un blocco essenziale nella programmazione e quindi anche in scratch, le condizioni. Il blocco se allora altrimenti e le sue varie composizioni ci permette di verificare se una condizione ( diciamo una determinata situazione per semplificare ) sta avvenendo o meno , se accade il blocco restituisce una risposta vera e attiva il codice inserito nella prima parte, altrimenti la risposta falso veicola il flusso attivando solo i blocchi nella zona dell'altrimenti .  La condizione da controllare , e in questo caso specifico avverrà ad ogni ripetizione del ciclo, è se il numero del costume è uguale a 7, ma cosa significa?  

Nel codice di Avery ad ogni "giro" faceva i passi e passava al costume seguente ma se controlliamo bene il codice anche in questo caso abbiamo il blocco passa al costume seguente e accadrà solo se il numero del costume non è uguale a ( è diverso da )  7 . Il blocco verde uguale lo troviamo tra gli Operatori.

Simuliamo il codice, il costume di partenza è il terzo, arriviamo al controllo e Scratch ci dice che il numero non è uguale a 7 ( condizione = false) allora l'altrimenti porterà al costume 4 ( il seguente ).

Nuovo giro, numero costume 4 ed è diverso da 7, nuovamente risposta false che attiva l'altrimenti con passaggio al costume seguente numero 5.

Arriviamo  al numero 7, la verifica darà esito true numero costume 7 = 7 in questo caso il blocco attivo sarà il primo facendoci passare al costume walking A che è il terzo , escludendo quindi dal giro il numero uno e il due. Senza questo controllo arrivati al numero 7 saremmo passati nuovamente al numero 1 , verificate da soli 💪
E allora usiamo anche gli altri due costumi 😂 alla fine del ciclo impostiamo il costume jaime A un dire temporizzato per creare anche l'attesa e poi torniamo in posizione comoda da dialogo con il costume jaime B. 

Direi che per oggi vi ho riempito abbastanza di chiacchiere , vi è piaciuto il nuovo codice con relativa animazione ? Molto più carino vero ? E l'utilizzo dei messaggi con il cambio sfondo ci permetterà tante personalizzazioni per i nostri progetti.

Il prossimo e ultimo post vedremo un utilizzo molto interessante dei messaggi, riuscirete ad aspettare ? Nel frattempo sperimentate 😍

Raffaele
   Se hai apprezzato il mio lavoro offrimi un bel caffè 😍