Sfondi (Background e Ground)
Nella prima e seconda parte abbiamo visto come realizzare delle animazioni per il nostro sprite Cat, gestione dei costumi, del salto e camminata ecc..., in seguito abbiamo visto come creare sfondi con il programma Tiled, oggi vediamo come creare sfondi con Photoshop o simili.
Questi sfondi (background) andranno a sovrapporsi allo sfondo suolo (ground) che il nostro personaggio usa normalmente per camminare e saltare, però noi vedremo solo il background ma non il ground, che sarà nascosto, un pò come abbiamo fatto con l'hitbox.
Possiamo farci un'idea di come funziona, riprendiamo da dove eravamo rimasti, cioè con il nostro personaggio che salta e cammina lungo una linea disegnata (ground), proviamo a nascondere lo sprite ground, inserendo il blocco porta fantasma a 100, cosa succede?
Magicamente il nostro personaggio continua a fare le stesse cose, camminare e saltare senza che sia visibile la parte calpestabile ground!!
Cosa dobbiamo fare per procurarci degli sfondi da utilizzare per il platformer, come prima risorsa il solito Google, oppure siti, dove possiamo reperire tutto ciò che occorre (sfondi di vario genere, sprite, icone, piastrelle, nemici, ambiente ecc...) alcuni risorse sono a pagamento, ma molte sono scaricabili gratuitamente.
Questi per esempio sono due siti specializzati in materiale per game:
Ora abbiamo due alternative, la prima utilizzare il Paint editor di Scratch, e disegnare gli sfondi e i rispettivi suoli, con risultati non proprio soddisfacenti visivamente;
Oppure la seconda alternativa, graficamente migliore, andare a cercare online Pack Assets comprensivi di sfondi, arredi, sprite, icone, tiles ecc... cioè tutto ciò che ci occorre per creare gli schemi utilizzando Tiled oppure programmi di grafica che lavorano con i livelli, come ad esempio Adobe Photoshop.
Se non disponete di Adobe Photoshop si può utilizzare un software libero molto simile, come ad esempio GIMP scaricabile qui.
Vediamo un esempio a lavoro ultimato:
Come decidiamo la grandezza in pixel dei nostri sfondi?
Prendiamo come riferimento la dimensione delle piastrelle (tiles) comprese nel pacchetto che vogliamo utilizzare, esempio per questo platformer ho deciso di utilizzare un Platformer Pack con piastrelle(tiles) di 75x75 pixel; la nostra area di lavoro in Photoshop, se decidiamo di lavore per esempio con 16 piastrelle sarà 75x16= 1200 pixel in orizzontale.
Lo Stage in Scratch, sappiamo misura 480 pixel in larghezza e 360 pixel in altezza, cioè un rapporto di 4/3, perciò non dovremo far altro che dividere 1200/4 = 300 , moltiplicare 300x3 = 900, perciò l'area con cui lavoreremo sarà 1200x900 pixel.
Cosa dobbiamo preparare:
background (sfondo completo di ambiente e oggetti)
ground (che comprende solo esclusivamente il suolo calpestabile dal personaggio)
Nel pacchetto useremo le immagini in formato PNG inserite nelle cartelle.
I passaggi per creare i vari sfondi sono descritti in un video pubblicato nella Home Page e sono riferiti a Adobe Photoshop.
Qui sono scaricabili alcuni pacchetti e sfondi da utilizzare per il platformer o per crearne dei nuovi.
Sfondi alternati
Per i Platformer si possono usare sia sfondi alternati o sfondi a scorrimento, noi per il nostro progetto useremo quelli scorrevoli.
Comunque, vediamo anche come creare degli schemi che si alternano.
Come prima cosa carichiamo su Scratch lo script finale della #2 Parte.
Inseriamo i nuovi sfondi ground (1-7 che sono nella cartella ground scaricata) al posto del vecchio ground, quindi sempre nell'area sprite importa sprite e caricare lo sfondo 1 della cartella background, quindi su costumi inserire gli altri costumi (2-7).
Avremo questo risultato.
Perfetto, abbiamo lo sprite ground con la serie di schemi 1-7 e lo sprite background sempre con la serie 1-7 (ricordatevi una volta caricati di convertire in vettoriale le immagini).
Come prima cosa dobbiamo creare una nuova variabile di nome background che sarà la variabile di appoggio per mantenere in memoria il numero dello sfondo in cui ci troviamo.
Inseriamo all'inizio dello script principale del gattino il blocco porta background a 1, cioè il valore del primo schema, modifichiamo, già che ci siamo la dimensione del gattino a 15% e facciamo in modo che cliccando su bandiera verde vada a posizionarsi cadendo dall'alto a x -166 y 60 ( valori indicativi).
Ora andiamo a posizionarci in fondo allo script, e inseriamo il blocco controllo se allora che cosa? operatore maggiore e gli diciamo che se la posizione dello sprite gattino è maggiore di 239 (perché il bordo dello stage è a 246) allora dobbiamo andare a caricare un nuovo schema, quindi background deve essere incrementato di 1, cioè deve valere 2 poi 3 ecc.., e il nostro gattino dalla posizione estrema destra dello stage si deve trovare all'estrema sinistra dello schema successivo.
Allora andiamo a dargli una posizione vai dove x se la fine dello schema è 240 l'inizio sarà -240.
Perfetto noi in questo momento abbiamo 7 schemi, quindi dobbiamo bloccare questo sistema quando arriveremo allo schema finale (7) altrimenti la variabile continua a incrementarsi, come possiamo fare!!! semplice inserendo un'altra condizione se allora la variabile background è minore di 7 può essere incrementata altrimenti no.
Vediamo come è cambiato lo script:
Ora passiamo allo sprite ground, dobbiamo dire ai costumi che nel momento in cui la variabile background cambia loro devono passare al costume successivo, come!! semplicemente inserendo in un ciclo per sempre il blocco passa al costume della variabile background, stessa cosa per quanto riguarda lo sprite background, unica differenza, nello sprite ground abbiamo inserito il blocco porta fantasma a 100 per nascondere lo sfondo calpestabile, mentre per lo sprite background il blocco vai indietro di 100 livelli per posizinarlo sotto il gattino.
Vediamo gli script:
Con questo abbiamo terminato la terza parte, nella prossima parte vedremo come rendere gli sfondi scorrevoli...
Comments