DIREZIONI

 

Salve amici, 

ecco il ritorno alla mia vecchia passione, ci voleva proprio in questo periodo così complesso e pieno.

Oggi andremo a vedere un codice molto semplice ma allo stesso tempo ricco di spunti , introdurremo sia le direzioni che il movimento, il tocco sullo sprite e le coordinate dello sprite  del mouse. Tranquilli è più semplice di quello che sembra.

Cosa vogliamo ottenere

Introdurremo una piccola pallina che dovrà muoversi all'interno dello stage e rimbalzare quando tocca i bordi, la cosa carina è che ogni volta che andremo a toccare la pallina, cambierà direzione. 

Toccando la pallina sul metà destra la manderemo verso sinistra , viceversa toccandola nella sua metà sinistra la manderemo verso destra. All'opera 💪 

Il codice

Prima cosa inizializziamo il nostro progetto, quindi impostiamo tutte quelle informazioni necessarie per far partire nel modo corretto il nostro progetto. In questo caso il blocco quando si clicca sulla bandierina verde ci permette di impostare la direzione iniziale del nostro sprite usando punta in direzione e il blocco operatore numero a caso che ho impostato tra 1 e 360 per coprire tutte le direzioni.

In realtà il termine direzione e le impostazioni di scratch per gli angoli dovrebbero essere un attimo spiegate per non generare confusione. Sappiamo bene che una direzione in realtà indica un tragitto che può essere percorso in entrambi i versi, in questo caso il tutto semplificato usando il termine direzione ed affidando il tutto agli angoli che si possono impostare. Anche qui scratch legge correttamente sia i numeri da 0 a 360 coprendo tutto l'angolo giro ma in realtà se andiamo ad utilizzare il cursore presente nelle impostazioni dello sprite ci accorgiamo che dopo 180 gli angoli cambiano di segno andando da -179 a 0 e lo vedremo anche dopo. Se vi fa piacere approfondire potrete richiederlo nei messaggio o nei commenti sui vari social. E mi raccomando cercatemi e seguitemi su facebook, instagram o sul blog interagendo con i contenuti per poterli sempre migliorare. 

  

La nostra pallina quindi è in posizione e vediamo cosa succede quando andremo a cliccare sullo sprite.

Per abbellire il tutto ho introdotto come primo blocco , dopo quando si clicca questo sprite, passa al costume seguente ( vi ricordo infatti che molti sprite hanno vari costumi visionabili e modificabili cliccando il tab in alto a sinistra costumi ) per modificare il suo colore ad ogni tocco. Come facciamo a dire alla pallina di andare dalla parte opposta rispetto a dove è stata cliccata? 

Prima di tutto dobbiamo immaginare la pallina come divisa in due metà , considerando come riferimento un piano verticale passante per il centro , e l'ipotetico tocco sullo sprite in relazione a questa suddivisione e valutare i possibili scenari.

Con un pò di fantasia immaginiamo la nostra pallina divisa dalla linea verde e i due cerchi arancioni due possibili zone in cui clicchiamo il nostro sprite, sotto abbiamo il nostro asse di riferimento per la coordinata X, quindi valutiamo solo in orizzontale per ora.

Vi ricordo che lo stage di scratch è diviso in 4 quadranti, partendo dal centro dello stage le X aumentano verso destra e diminuiscono andando nei numeri negativi verso sinistra, le Y invece aumentano andando verso l'alto e diminuiscono verso il basso.

Ora immaginiamo due scenari e vediamo cosa succede , primo scenario , primo asse , ci troviamo nelle X positive, quindi a destra dello zero, dell'origine degli assi; secondo scenario ci troviamo a sinistra dello zero , numeri negativi.

Nel primo caso immaginiamo che la pallina sia nella posizione che ha come coordinata X = +4 e noi la tocchiamo sul lato destro quindi con posizione X= +5. Queste due coordinate saranno il nostro riferimento per decidere cosa fare , e sono rispettivamente posizione X e X del mouse nei blocchi di scratch ( il primo lo troviamo in movimento il secondo in sensori , potresti trovarlo come numero dello sfondo stage, è uno di quei blocchi che cliccando sulle scritte compare un menù per selezionare altre opzioni ).

Come faccio a capire che mi trovo in questa specifica situazione ? Molto semplice basta valutare quale dei due numeri è più grande, se il tocco ha una posizione maggiore ( +5 nel nostro esempio ) rispetto al centro della nostra sfera ( +4 ) allora abbiamo cliccato la sfera sul lato destro. Viene da sè che se la posizione del tocco ( es. +3) è minore del centro della sfera allora il click è stato fatto sul lato sinistro. Nel primo caso manderemo la pallina a sinistra , nel secondo caso a destra, dal lato opposto al nostro click.

Tradotto in codice dobbiamo impostare un controllo che se X del mouse è maggiore di posizione X allora dovrò mandare la palla verso sinistra ( mi trovo nella situazione +5 > +4 vero )  altrimenti verso destra ( vuol dire che mi trovo nella condizione +3 > +4 falso) .

Perfetto, per completezza analizziamo anche la situazione con valori di X negativi, siamo a sinistra dello zero, e controlliamo che cosa succede al nostro codice e se dobbiamo prevedere delle modifiche.

Il ragionamento è il medesimo , vediamo cosa succede al nostro codice ricordandoci che numeri negativi più grandi sono minori dei numeri negativi più piccoli, per capirci -10 è più piccolo di -2 .

Secondo asse delle X nell'immagine  , click sul lato destro il controllo sarà -7 ( X del mouse ) è maggiore di -8 ( posizione X ) ? Questa affermazione è vera e dovremo indirizzare la pallina verso sinistra, tocca a destra pallina a sinistra con controllo vero, proprio come per le X positive. Verifichiamo anche il caso di click a sinistra , -9 ( X del mouse ) è maggiore di -8 ( posizione X ) ? La risposta è falso quindi entreremo nel percorso dell' altrimenti dove imposteremo il movimento verso destra. 

Tutta la forza del nostro ragionamento si traduce in un semplice se allora altrimenti se la posizione del mouse è maggiore rispetto al centro del nostro sprite ( X mouse > Posizione X vero ) vuol dire che il click è avvenuto a destra allora usando punta in direzione numero a caso tra 180 e 360 imposteremo un angolo casuale ma che punta verso sinistra, anche se a fare proprio i pignoli dovremmo mettere tra 181 e 359 😂, passatemi la licenza. In caso contrario vuol dire che il click è avvenuto sul lato sinistro ( X mouse > Posizione X falso ) quindi nell' altrimenti avremo avremo punta in direzione numero a caso tra 0 e 180 , sempre con licenza 😆.

Dopo tutto lo spiegone avrete notato che in realtà il codice è molto più semplice e l'unica cosa da aggiungere è il per sempre finale che contiene fai 5 passi e rimbalza quando tocchi il bordo. Al primo click sullo sprite questo ciclo infinito viene attivato e permette alla pallina di spostarsi di 5 passi ad ogni refresh dello stage simulando il movimento , come i vecchi cartoni animati per intenderci, il rimbalza controlla per sempre se sta toccando un bordo dello stage per far rimbalzare la pallina come nel biliardo.

Visto che il codice è veramente poco ho voluto introdurre anche una variabile che ci indica di volta in volta l'angolo e una freccia che indica il verso e la direzione , quindi la prima cosa da fare è creare la variabile DIREZIONE e introdurre il nuovo sprite FRECCIA.

Ci troviamo nel codice della freccia , anche questo molto semplice, quando si clicca la bandierina verde avremo un per sempre che verrà attivato e come prima cosa andremo a puntare nella stesso verso della pallina, quindi punta in direzione e il blocco che troverete in sensori andando a selezionare dal menù prima lo sprite ( ball ) sul lato destro e poi direzione sul box di sinistra. Arriviamo al controllo , il se allora altrimenti avremo due possibilità , se l'angolo è negativo o positivo, sì perché scratch non usa gli angoli da 0 a 360 ma arrivato a 180 decrementa fino a tornare a zero ma usando valori negati. Visto che è abbastanza inusuale e non mi piaceva nemmeno visivamente ho pensato di cambiarlo. Il calcolo è molto semplice per trasformare i numeri negativi in numeri positivi e consecutivi al 180 basta sommare a 360 il valore negativo dell'angolo, che ci viene dato dal blocco direzione di Ball.

Quindi se la direzione è positiva ( maggiore di zero ) allora il valore della mia variabile sarà settato proprio come il valore dell'angolo fornito dal blocco altrimenti dovremo sommare 360 al suo valore. Tutti questi blocchi, inseriti nel ciclo infinito, in automatico aggiorneranno i valori insieme con quelli della pallina settando la variabile nel modo corretto facendola visualizzare in alto e muovendo la freccia nella giusta direzione e verso. 

Spero che questo piccolo tutorial sia da spunto per altri progetti e vi aspetto nei commenti lasciandovi anche i compiti per casa 😂. 

Noi abbiamo lavorato solo considerando la coordinata X ma se volessi introdurre un controllo anche sulle Y ? Immaginando la pallina divisa in 4 quadranti saresti capace di modificare il codice affinché il click in un quadrante produce un movimento verso il quadrante opposto ? Quindi click in alto a destra movimento verso il basso e a sinistra , click in basso a destra movimento in alto a sinistra , click in basso a sinistra movimento in alto a destra e click in alto a sinistra movimento in basso a destra? 

Buon lavoro 👋🏻