Walk & Talk

 

Benvenuti Scratcher,

dopo il post sul mitico gioco Crab&Donuts 😂 che ti consiglio di realizzare e QUI ti spiego come, aspetto i tuoi remix, la febbre da Scratch è salita oltre limite, anche se con i tempi che corrono non si può parlare di temperature oltre il 37.5 🙊 ma sono un rivoluzionario.

Torniamo seri e iniziamo una piccola serie su un argomento tanto amato e condiviso per chi si approccia per le prime volte con Scratch: LO STORYTELLING ,storia di una storia su Scratch! Potrebbe essere il titolo di un libro 😂 Scratch ha infinite possibilità, per quello lo adoro, ma come in tutte le cose vari fattori decretano la fama di una o di un'altra peculiarità, e poi come sempre prendo spunto dalle vostre domande e richieste. 

Visto che lo storytelling solitamente è il punto di partenza seguiremo una linea molto semplice e maggiori informazioni di base possibile.

Creiamo il nostro progetto vuoto e familiarizziamo subito con i tasti posti in basso a destra , rispettivamente l'icona del gattino e dello sfondo. Cliccando sul gattino entreremo nella galleria degli sprite dove preleveremo (puoi fare anche una ricerca nel box in alto a sinistra) il personaggio Avery Walk e Jaime, l'altro pulsante ci farà accedere alla galleria degli sfondi dove ho prelevato l'immagine di una città. Non sono scelti a caso e serviranno per l'evoluzione del nostro progetto , poi in seguito potrete scegliere in autonomia i vostri personaggi. Perché proprio loro? 

Le macro aree

Una volta selezionati i personaggi possiamo virtualmente identificare tre grandi aree molto diverse tra loro che impareremo a conoscere bene. Ho fatto già dei video introduttivi che puoi trovare anche nel blog per approfondire gli argomenti di base. Velocemente sul lato sinistro ( numero 1 ) abbiamo i blocchi di codice divisi per categorie, in alto i tre Tab per raggiungere Costumi e Suoni ed in basso il pulsante per raggiungere ed inserire le Estensioni. 

Zona numero 2 nella parte centrale, il cuore di Scratch, dove avremo il nostro script, il nostro codice che darà vita alle nostre idee.

Lato destro numero 3 la parte relativa agli sprite e allo stage, nella parte alta abbiamo una preview di quello che stiamo realizzando (utile anche per posizionare correttamente i personaggio o identificare zone e interazioni), nella parte centrale le informazioni dello sprite (posizione, dimensione, direzione, etc), nella parte bassa avremo la lista di tutti gli sprite utilizzati e di fianco gli sfondi dello stage.

Bene, proprio i tab in alto a sinistra ci permetteranno di accedere ai costumi dello sprite per capire perché ho scelto proprio loro e lo vedremo nello specifico. Qualche idea? Scrivilo nei commenti, vediamo chi indovina. 

Una volta inseriti i nostri sprite , in questo caso, possiamo posizionare manualmente i personaggio trascinandoli con il mouse e posizionandoli sul bordo inferiore, per allineare la camminata con il bordo. Volendo potrete inserirli nella posizione di vostro gradimento ma la cosa che voglio sottolineare è che una volta effettuate questa operazione in automatico il valore della Y ( quindi in altezza) nelle informazioni dello sprite si è aggiornata e anche tutti i blocchi che contengono il valore della Y saranno aggiornati con il valore attuale. Comodo no? Posiziono, verifico visivamente e ho un valore subito spendibile.

Codice di Jaime

Avendo già posizionato il nostro personaggio possiamo andare nei blocchi Movimento e prelevare Vai a X...Y... potendo constatare che la coordinata Y coincide con quella presente tra le info del nostro sprite sul lato destro. E la coordinata X ? 

Il mio intento sarà quello di simulare l'ingresso di Jaime dal lato sinistro per poi camminare per raggiungere il centro, quindi il valore della X dovrà essere più possibile spostato verso sinistra, valori negativi, e sapendo che la dimensione massima è 240 possiamo inserire direttamente questo valore oppure sparare alto a 300 e Scratch inserirà il massimo possibile. Questa sarà la posizione iniziale del nostro personaggio e dovremo inserirla in quella fase chiamata inizializzazione in cui specifichiamo tutti i dati iniziali da impostare. Vi ricordo che nonostante la sua semplicità parliamo sempre di programmazione, avremo delle regole da seguire, delle limitazioni dovute alla progettazione di Scratch, problemi da risolvere, algoritmi da creare, sequenze da rispettare, volenti o nolenti l'attività principale sarà sempre coding e relativo pensiero computazionale.

Blocchetto a cappello Quando si clicca sulla bandierina verde identifica proprio il primo istante , il tempo zero, e qui dovremo dare le info iniziali del nostro progetto. Il blocco di posizione dovrà andare proprio sotto questo blocco ma prima ancora rendiamo invisibile il nostro sprite per non svelare il trucco, dalla categoria Aspetto preleviamo Nascondi. Risultato finale sarà il nostro personaggio pronto ai blocchi di partenza all'altezza giusta per nostro progetto, posizionato defilato e nascosto , pronto per ricevere il comando Mostra per palesarsi ma prima ancora dalla categoria Controllo andiamo a prendere il blocco attendi ... secondi , i tempi in una storia sono importanti quindi ho preferito impostare un attesa dopo il click di inizio per rendere il tutto più carino.

Passati 0.8 sec entrata trionfale del nostro Jaime che con il blocco scivola in 1,5 sec raggiunge agilmente le coordinate XY inserite scelte in base a dove voglio far svolgere la scena, nel mio caso al centro ma leggermente spostato a sinistra poiché avremo anche un secondo personaggio, quindi dopo alcune prove ho scelto -100.

Il tempo che inseriamo e le coordinate da raggiungere andranno a modificare la velocità con cui il nostro sprite raggiungerà il punto stabilito. I blocchi hanno una sequenza scelta da noi ma, all'interno della stessa linea di codice, una volta impostata sarà rispettata rigidamente, questo vuol dire che il blocco seguente sarà mandato in esecuzione solo dopo la "fine" del blocco precedente. Per esempio, solo al termine della scivolata , raggiunte le coordinate (-100,-122) partirà l'attesa di 4,5 secondi e poi l'esecuzione del blocco dire. Questo sarà importante anche per capire i tempi del nostro codice e quindi anche la struttura dell'intero progetto.

Il blocco dire per tot secondi lo troviamo in Aspetto , da non confondere con il semplice dire che non contiene un' attesa ( quindi sarà mostrato a video e non scomparirà fino al prossimo blocco dire) oppure con il blocco pensa che utilizza una vignetta diversa simulando un pensiero. 

Ok, ma il blocco dire che abbiamo selezionato già contiene un' attesa perché dobbiamo inserire un' altra attesa? Bene vedo che siete attenti 😅

Per due motivi, il primo è che l'attesa nel blocco serve per decidere quanto tempo voglio dare per leggere il messaggio, messaggio lungo tempo lungo e viceversa, il secondo è che la seconda attesa in realtà mi servirà per impostare il dialogo con il prossimo personaggio. Come una partita a ping-pong passeremo il turno all'uno o all'altro personaggio semplicemente creando delle pause, visto che il codice è unico e va in sequenza come abbiamo già detto. 

Questo è il metodo più semplice ma anche più scomodo e si presta male anche a future modifiche visto che un cambio nel tempo implica modificare a cascata tutti blocchi per non perdere la sincronizzazione tra le battute.

Semplicemente, parla il primo personaggio, poi mentre il secondo parla il primo attende lo stesso tempo di esecuzione del blocco dire del secondo personaggio, poi parla nuovamente il primo e così per tutta la conversazione. E' palese che gli ospiti dei talk show non abbiano mai fatto coding altrimenti non parlerebbero uno sull'altro creando solo caos 😂 Probabilmente hanno problemi di sincronizzazione dei blocchi attesa. 

Codice di Avery

Il codice della nostra amica sarebbe stato identico con le dovute modifiche dei tempi e della sincronizzazione dei dialoghi, per questo motivo vedremo un'alternativa e qualche curiosità in merito al codice.

Come prima cosa vi sarete sicuramente accorti che il nostro sprite è girato nel verso opposto a quello originale presente in galleria, per questo passaggio andremo a lavorare un po' con l'editor grafico raggiungibile premendo il tab Costumi in alto a sinistra. Possiamo notare tutti i vari costumi , identificati sia da un nome, modificabile a piacere nell'area di lavoro in alto a sinistra, sia da una posizione modificabile trascinando uno dei costumi nella posizione desiderata oppure aggiungendo altri costumi.

Nell'area di lavoro, nella parte alta vicino al cestino, troviamo due triangoli separati da una linea tratteggiata sia orizzontale che verticale, questi due comandi servono per riflettere l'immagine , ribaltare la figura. Premendo i triangoli con la linea verticale avremo il risultato desiderato e lo dovremo fare con tutti i costumi , con un prezzo da pagare visto che questa è una modifica prettamente grafica. Abbiamo già introdotto un concetto simile con le posizioni nello stage e nell'editor grafico ponendo attenzione alle coordinate. Se desideri più informazioni scrivi nei commenti e vedremo di organizzare un post ad hoc.

Il prezzo da pagare è che al momento lo sprite punta in direzione 90 ma la sua immagine è girata nel verso opposto, questo implica che utilizzare fai 10 passi sposterà lo sprite verso destra nonostante l'immagine sia girata nel verso opposto. Ci ritorneremo tra poco , andiamo a vedere il codice che come anticipato sarà molto simile a quello di Jaime.

Bandierina verde, blocco nascondi e impostiamo il costume desiderato con il blocco, in Aspetto, passa al costume Avery d. Qualcuno si era accorto che nel personaggio precedente abbiamo omesso questo blocco ? Bravi. In alcuni casi è superfluo, basta solo scegliere il costume che ci interessa e rimarrà impostato, ma se vogliamo lavorare bene, e in alcuni casi come quelli che vedremo la prossima volta, non dobbiamo omettere niente nella fase di inizializzazione. Avete notato anche che i colori delle parole coincidono con i colori dei blocchi e quindi delle relative categorie? Mi sembrava molto intuitivo e quindi continuerò a farlo magari omettendo di specificare ogni volta dove andare a trovare quel colore 😅 Lo farò solo la prima volta per ogni nuovo colore, spero apprezziate questa mia attenzione colorata.

Come potrete notare il codice è praticamente identico tranne i tempi e le frasi da pronunciare o meglio poteva essere identico, sostituendo il blocco scivola con ben tre blocchi diversi che analizzeremo adesso. Alla faccia del pensiero computazionale , dell'ottimizzazione e della fluidità, andiamo ad aggiungere più blocchi del necessario?

Ni, sia perché alcune volte il codice e Scratch ce lo impone ( lo vedremo la prossima volta ) sia perché come esercitazione vedremo un blocco equivalente per creare lo stesso effetto andando a spremere un po' le meningi.

Il blocco ripeti mi permette di automatizzare la ripetizione di tutto quello che andrò ad inserire al suo interno e nello specifico ad ogni giro Avery farà 10 passi e aspetterà 0.1 secondi prima della prossima ripetizione, risultato finale farà 150 passi che sono proprio quelli che avrebbe compiuto partendo da 240 e arrivando a 90 ( 240 è il limite massimo anche se noi inseriamo come X un valore maggiore ). Anche il tempo sarà lo stesso visto che un' attesa di 0.1 secondi per 15 volte darà proprio 1.5 secondi totali, vi ricorda un po' come funzionavano i cartoni animati? Immagini in successione ogni tot di tempo e si crea un'animazione. 

Ci sono due precisazioni da fare, la prima è proprio il tempo, per come è stato realizzato scratch anche se di poco il codice con il ciclo ( sarebbe il ripeti ) risulta leggermente più lento e potrete notarlo scambiando i due blocchi ( scivola e il ciclo ) e osservando se si accavallano i balloon dei messaggi, seconda cosa il valore dei passi dovrà essere negativo proprio per il discorso che abbiamo fatto sulla modifica grafica.

In alternativa avremmo dovuto modificare la direzione dello sprite portandola a -90 e poi usando il blocco usa stile di rotazione sinistra-destra, così facendo usando il blocco fai passi possiamo usare valori positivi visto che tutta la struttura e il posizionamento dello sprite sono state ricalcolate , ben diverso da modificare un disegno e direi metodo più corretto. 👍 Se non avessimo usato lo stile di rotazione il nostro personaggio sarebbe andato a testa in giù. 

Per oggi possiamo terminare qui, vi aspetto con il prossimo post per vedere cosa succederà, nel frattempo li lascio anche il link al progetto Scratch così potrete sbirciare nel codice ( che si comporrà man mano ), remixarlo per i più pigri 😴 oppure sbirciare gli altri miei progetti.

Link al PROGETTO 👈🏻  

Continua QUI 👈🏻

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