|Shoot me!| Prima parte

 Benvenuti , prima di tutto voglio ringraziare tutti quelli che mi stanno leggendo e come sempre , se vi fa piacere, nei commenti lasciate il vostro feedback, consigli, proposte, beh sentitevi a casa .🏡

Oggi proveremo un progetto un po' più complesso e spero di riuscire nell'intento lasciandovi uno spunto per progetti futuri o semplicemente per poterlo continuare in autonomia. Per chi utilizza telegram potrà facilmente testare il gioco Corsairs utilizzando il comando @gamebot e selezionando Corsairs , potete trovare anche altri due giochini sempre tramite lo stesso bot di telegram. Naturalmente questa è una versione demo e molto spartana che ho provato a realizzare per ricreare la dinamica del gioco, si possono ( e spero riusciate) apportare molte modifiche e migliorie che renderanno il gioco più simili all'originale e ancora più piacevole e interessante da giocare.

In cosa consiste il gioco? Classico giochino per il tempo morto, semplice veloce e senza troppi fronzoli, fermo al centro della scena abbiamo un cannone che proverà a colpirci mentre noi dobbiamo muoverci in modo circolare per  raccogliere delle monete. La nostra traiettoria sarà sempre legata alla circonferenza iniziale e l'unico nostra possibilità per schivare i colpi sarà invertire il senso di rotazione, la navicella quindi non potrà mai fermarsi ma solo invertire il senso di marcia. Ogni volta che riusciamo a prelevare tutte le monete passiamo al livello successivo dove i colpi sono sempre più veloci.

Pronti con la lista della spesa?

Avremo bisogno di due variabili lista che andremo a popolare con i blocchi dei componenti e nello specifico global bullet avrà al suo interno tutti i componenti ImageSprite e global coins avrà al suo interno tutti i componenti Ball, li troverete entrambi nella sezione Drawing and Animation e lavorano solo all'interno del Canvas quindi dovrete aggiungere anche lui nel progetto. Il blocco verde che vedete inserito tramite make a list lo troviamo sempre come ultimo blocco di ogni componente e porta con sé tutte le info del componente , dalle liste si può notare che dobbiamo inserire 10 ImageSprite che saranno i nostri proiettili e 18 ball che useremo come monete. Creiamo anche la variabile global id_bullet inizializzata ad 1 e che ci servirà per identificare i vari colpi sparati o da sparare, global punteggio posto con valore iniziale di zero e parla da sé , global playon con valore iniziale pari a true e servirà per capire se siamo in fase di gioco attivo o meno, global Xc e Yc poste a zero e saranno delle coordinate cartesiane di posizione, global T posto a 270 e sarà un angolo che ci permetterà la nostra rotazione , global SENSO impostato a 2.5 e ci permetterà di settare sia la velocità di movimento che il senso di rotazione.

Come componenti avremo:

• 1 Button
• 4 Label (2 per score e 2 per livello Lv.)
• 1 Canvas
• 10 ImageSprite (le palle di cannone)
• 18 Ball (i gettoni da prendere)
• 1 ImageSprite per il cannone (tank)
• 1 ImageSprite per la nave (ship)
• 2 Clock (1 per la nave e 1 per i proiettili)

Bene, finite le variabili e i componenti passiamo al posizionamento e alcune informazioni iniziali per capire il codice che seguirà, prima di partire vi ricordo che il punto (0 ,0) in appinventor si trova in alto a sinistra e non al centro dello schermo, spostandoci verso destra avremo X crescenti , spostandoci verso il basso Y crescenti.

Il cannone come anticipato sarà al centro del nostro Canvas e nel nostro caso anche al centro del display (almeno per la direzione orizzontale) e le sue coordinate saranno salvate all'interno delle variabili Xc (che sarà anche la coordinata X della circonferenza formata dalle monete) e Yc (che sarà la coordinata Y della circonferenza) che identificano il punto C nel disegno , quindi anche il centro della circonferenza. Sfortunatamente a differenza della ball gli ImageSprite non possono essere centrati , quindi il loro centro geometrico (il centro della figura) non coincide con il punto (nelle balls prende il nome di origine) utilizzato da appinventor per posizionare e muovere l' ImageSprite (la x blue). Tutto questo ci porta a decentrare e ricalcolare tutti i parametri e lo spieghiamo meglio con l'immagine della navicella. Estremizzando ho disegnato un rettangolo che contiene la navicella (non è così grande ma rende l'idea) e sarebbe stato molto comodo avere l'origine centrata nella x rossa così da far coincidere centro della figura e coordinare della figura, per gli sprite invece l'origine è posizionata in alto a sinistra nel punto che ho chiamato "A" (x blue). Per avere il centro figura quindi mi devo spostare di 15 pixel verso destra e 15 verso il basso raggiungendo il punto chiamato "S" (x rossa) che avrà come coordinate (X+15 , Y+15), ma allora perché hai scritto X-15 e Y-15 ?

Il disegno mi serviva per farti capire la differenza di posizione tra i due punti ma poi dobbiamo immaginare che appinventor se io gli do come coordinate generiche X e Y per posizionare la mia navicella lui andrà a posizionare l'angolo superiore del rettangolo (la x blue) dove io vorrei la navicella , quindi la x rossa al centro della nave nel disegno in alto. Capirete bene che non è quello che voglio e per riportare l'immagine come in figura dovrò alzarla di 15 e spostarla a sinistra di 15 per cui il valore reale di cui ho bisogno per avere  la mia navicella precisamente nella x rossa sarà (X-15 , Y-15) , 15 è metà della lunghezza della mia immagine (quindi tu potresti dover mettere un valore differente, ti ricordo anche che la dimensione dello sprite si può impostare in pixel nel pannello delle impostazioni nel designer editor) e le due dimensioni potrebbero essere diverse come capiterà a me con le palle di cannone. Le coordinate X e Y vedremo poi come calcolarle e le andremo a sostituire nella formula . Il cannone nel mio caso ha una larghezza/altezza di 40pixel, quindi per lo stesso concetto una volta trovato il generico centro del display D (X,Y) per avere il tank al centro dovrò dire ad appinventor di posizionarlo in (X-20 , Y-20).

Per concludere , se io voglio il cannone sulla x rossa che ha coordinate generiche (X, Y) in realtà dovrò posizionare il punto A, quindi dovrò dire ad appinventor di posizionare il mio sprite in (X-20 , Y-20) così da far cadere il centro figura proprio sulla x rossa. Idem per la navicella, se io voglio posizionarla sulla x rossa in alto dovrò dare come coordinate di riferimento quelle dell'angolo B (X-15, Y-15) per averla centrata sulla x rossa. Ipotizziamo adesso che il mio display (e quindi il mio canvas che contiene gli sprite) abbia una larghezza di 300 pixel e un altezza di 600 pixel non dovrò posizionare il mio cannone nel centro C (150, 300) che corrispondono ad (X, Y) altrimenti avrei il punto A sulla croce rossa ma effettuare il famoso spostamento trovando le seguenti coordinate (150-20, 300-20) --> A (130, 280) facendo traslare il punto A in alto e a sinistra e centrare la mia immagine. Detto questo non ci resta che sapere la distanza tra nave  e cannone che altro non sarà che il raggio di questa circonferenza e nel nostro caso varrà 135 pixel (voi potrete provare i valori che più vi piacciono). Di conseguenza la x rossa piccola in alto avrà come coordinate la stessa X applicando lo spostamento opportuno (metà della dimensione dell'immagine) e una Y diminuita di 135 cioè la distanza tra loro (il raggio) e lo spostamento , le coordinate della navicella saranno (X-15 , Y-15-135) --> B (150-15, 300-15-135) --> B (135, 150) .

Per oggi basta numeri , vi aspetto freschi e riposati per la prossima puntata!