Far muovere uno sprite è la prima operazione che abbiamo fatto tutti al primo approccio con scratch, con il classico blocco fai 10 passi.
In questo tutorial invece vedremo come realizzare un sistema per far camminare e saltare il nostro personaggio in maniera più realistica, prendendo spunto da un tutorial realizzato da uno dei più bravi autori della piattaforma di Scratch e precisamente Griffpatch .
Ecco cosa faremo in ciascuna parte:
Fai camminare Cat
Crea gravità, caduta e atterraggio
Rimuovere il ritardo della salita
Fai saltare Cat in alto
Aggiungi una migliore animazione ai piedi
Come prima cosa scarica gli sprite del simpatico personaggio Cat per questo tutorial qui.
Carica lo sprite Cat con tutti i suoi costumi e mettili in ordine come descritto sotto:
Idle
Jump
Fall
Walk1
Walk2
Walk3
Walk4
Walk5
Walk6
Walk7
Walk8
Walk9
Walk10
Quindi carica lo sprite terra dal file scaricato e nello stage lo sfondo Blue Sky 2 dalla libreria interna.
1. Fai camminare Cat
Cat deve camminare a sinistra e destra useremo i tasti freccia, quindi aggiungi lo script seguente allo sprite Cat :
Questo codice è molto semplice: premendo freccia sinistra il gatto punta a sinistra ( -90 ) e cambia la posizione x di -6 (a sinistra); premendo freccia destra fa puntare il gatto a destra e cambia la posizione x di 6 (a destra).
Aggiungiamo anche il codice wrap-around per i bordi sinistro e destro dello stage. Aggiungi il seguente script allo sprite Cat .
Quando Cat cammina verso il bordo sinistro dello stage, la sua posizione x sarà inferiore a -230, in tal caso, lo facciamo riapparire al bordo destro impostando la posizione x su 230, al contrario se cammina verso il bordo destro.
2. Crea gravità, caduta e atterraggio Ora che abbiamo uno sprite Terra, abbiamo bisogno che Cat cada e atterri su di esso.
La caduta per renderla ancora più realistica dovrà simulare la forza di gravità, cioè la velocità di caduta verso il basso non sarà lineare ma aumenterà in base alla altezza da cui sta cadendo Cat.
Seleziona lo sprite Cat . Nella categoria Variabili ,fare clic sul pulsante Crea una variabile e crea una variabile denominata velocità y.
Quindi aggiungi il seguente codice allo sprite Cat :
Questo codice esegue due azioni nel suo ciclo ripetuto : fa cadere lo sprite Cat finché non tocca lo sprite Terra ➊ e quindi solleva lo sprite Cat se è nel terreno ➋ . Con queste due sezioni di codice, Cat cadrà, colpirà il terreno, e poi si alzerà se necessario, per poi stabilirsi sulla cima dello sprite Terra.
Durante la caduta il codice ➊ sottrae -2 dalla variabile velocità y e quindi sposta la posizione y dello sprite Cat per y velocità. La ripetizione fino al blocco ➋ verrà interrotta quando lo sprite Cat non toccherà più lo sprite Terra. All'interno di questo ciclo, la velocità y è impostata su 0 in modo che Cat non cada più, Il blocco cambia y per 1 solleverà un po lo sprite Cat, lo ripeterà finché non è più affondato nel terreno sprite. È così che Cat rimane in cima al terreno, indipendentemente dalla forma dello sprite di Terra.
3. Rimuovere il ritardo della salita Il grosso problema con il codice ora è che lo sprite Cat viene sollevato da terra a sopra molto lentamente. Questo codice deve essere eseguito così velocemente che il giocatore vede solo lo sprite in cima al terreno, non in esso.
I blocchi personalizzati possono aiutarci a farlo. Vai alla categoria I miei blocchi e fai clic sul pulsante Crea un blocco. Assegna il nome tocca terra al blocco , quindi seleziona la casella Esegui senza aggiornare lo schermo.
Il blocco di definisci tocca terra dovrebbe ora apparire nell'area degli script, sposta l'intero codice inserito nel blocco ripeti fino a quando sotto la maniglia definisci tocca terra, quindi inserire al suo posto il blocchetto tocca terra, come vediamo sotto.
Questo codice funziona esattamente come prima, ma ora il blocco definisci tocca terra ha l'opzione esegui senza aggiornamento della schermata selezionata, quindi il codice di loop viene eseguito in modalità Turbo. Sollevare Cat ora avviene all'istante, quindi sembra che Cat non affonda mai nel terreno. Fare clic sulla bandiera verde per testare il codice. Fai girare il gatto o usa il mouse per far cadere il gatto dalla cima dello stage come prima. Ora lo sprite Cat non dovrebbe mai affondare nel terreno.
4. Aggiungi il codice di salto Creiamo prima una variabile solo per questo sprite chiamato in aria. Questa variabile sarà impostata su 0 ogni volta che lo sprite Cat è a terra. Ma in aria inizierà ad aumentare quando lo sprite Cat sta saltando o cadendo. Più grande è il valore in aria, più a lungo Cat sarà fuori terra e in aria. Aggiungi questo script allo sprite Cat:
Il ciclo per sempre continua a controllare se il tasto spazio viene tenuto premuto. Se lo è, questo darà allo sprite Cat una velocità di 14, cioè lo sprite di Cat si muoverà verso l'alto. Notare che ci sono due condizioni perché il gatto continui a salire: il giocatore deve tenere premuto tasto spazio e la variabile aria deve essere inferiore a 8. Modifichiamo due degli script di sprite Cat esistenti per aggiungere la variabile in aria che limita l'altezza del salto del gatto.
Quando il giocatore tiene premuto il tasto spazio per far saltare Cat, la variabile di velocità y è impostata su 14. Questo nel ciclo per sempre dello script cambia la posizione y dello sprite Cat per la velocità y positiva, spostandolo verso l'alto . All'inizio del salto, la variabile in aria è in aumento ma è ancora inferiore a 8. Quindi se il giocatore continua a tenere premuto il tasto spazio, la velocità y continua a essere impostata su 14 invece di diminuire a causa della variazione y della velocità di -2 . Ciò fa sì che il salto salga più a lungo di quanto non fosse se il giocatore avesse tenuto premuto il tasto spazio per una sola iterazione attraverso il loop. Ma alla fine in aria diventerà uguale o maggiore di 8, quindi non importa se viene premuto il tasto spazio. Ricorda che entrambe le condizioni - tasto premuto e in aria <8 devono essere vere per il codice all'interno del blocco se da eseguire. A questo punto, la variabile di velocità y diminuirà come previsto e lo sprite Cat cadrà alla fine. Nello script tocca terra, quando il gatto è a terra, la variabile aria viene reimpostata su 0.
Fare clic sulla bandiera verde per testare il codice fino a questo momento. Premi il tasto spazio per saltare. La pressione rapida del tasto dovrebbe causare un piccolo salto. Tenere premuto il tasto spazio dovrebbe causare un salto più alto. Assicurati che il gatto possa saltare solo mentre è a terra e non può fare doppi salti. Quindi fare clic sul segnale di stop rosso e salvare il programma.
Aggiungere più immagini costume per migliorare la camminata L'uso di questi costumi renderà i movimenti più brillanti rispetto ai pochi semplici costumi con cui lo sprite Cat viene fornito. Abbiamo solo bisogno di aggiungere un codice di animazione che passi tra questi costumi al momento giusto.
5. Aggiungi i nuovi costumi a Sprite Cat Per aggiungere i nuovi costumi, devi caricare i file costume come descritto all'inizio dell'articolo. I nomi file per queste immagini sono Walk1 , Walk2 e così via fino a Walk10 , oltre a Idle , Jump e Fall . Ogni costume non ha solo un nome (come Walk1, Jump o Fall) ma anche un numero. Il numero del costume si basa sull'ordine del costume nella scheda Costumi. Ad esempio, il costume in alto è chiamato Idle, ma è anche conosciuto come costume 1. Il costume sotto di esso è chiamato Jump, ma è anche conosciuto come costume 2. Il codice che aggiungeremo nel passaggio successivo si riferirà ai costumi con i loro nomi e numeri.
Con tutti questi costumi diversi, sarà un po complicato determinare quale costume dobbiamo mostrare e quando. Useremo l'idea dei fotogrammi dell'animazione: diversi fotogrammi mostrati insieme creano rapidamente un'immagine in movimento, proprio come un libro a fogli mobili. Per tenere traccia dei fotogrammi, crea due variabili per i costumi fotogramma e fotogrammi.
Quindi aggiungi due blocchi porta a , per queste variabili agli sprite Cat quando clicchiamo su bandiera verde:
Ora abbiamo bisogno di un codice camminata.
Fare clic sul pulsante Crea un blocco nella categoria I miei blocchi per creare il blocco che chiameremo camminata. Assicurarsi di fare clic sul pulsante Aggiungi un parametro numerico scrivi passi, servirà per effettuare l'immissione dei passi. Assicurati di selezionare la casella di controllo Esegui senza aggiornare lo schermo! Il blocco di definisci camminata dovrebbe ora apparire nell'area degli script, inserire sotto il blocco definisci camminata cambia x passi e il blocco per aumentare la variabile fotogramma di un importo calcolato da fotogrammi.
Mentre il giocatore muove Cat sprite a destra o a sinistra, vogliamo che la variabile del fotogramma aumenti. La variabile fotogrammi tiene traccia di quanto velocemente o lentamente viene eseguita l'animazione.
Quando il gattino è fermo (non si muove verso sinistra o verso destra), la variabile del fotogramma deve essere reimpostata su 0.
Modifica il codice come sotto:
Ora scriviamo un codice per determinare quale costume mostrare. Useremo questo codice in alcuni punti degli script che abbiamo scritto, quindi creiamo un blocco personalizzato. Nella categoria Altri blocchi viola scuro, fare clic sul pulsante Crea un blocco e denominare questo blocco correzione costume per impostare il costume corretto. Fare clic sul triangolo grigio Opzioni, selezionare l'opzione Esegui senza aggiornamento schermo, quindi fare clic su OK. Aggiungi i seguenti blocchi allo sprite Cat, iniziando con il nuovo blocco correzione costume .
Se lo sprite Cat è a terra (o ha appena iniziato a saltare o cadere in modo che in aria sia inferiore a 3), allora vogliamo mostrare il costume in piedi o uno dei costumi da camminata. Ricorda che quando lo script con la bandiera verde premuta continua a impostare il frame su 0 se il giocatore non sta premendo i tasti freccia. Quindi, quando il frame è 0, visualizza il costume Idle. Altrimenti, dobbiamo calcolare quale mostrare degli otto costumi per camminare. Questo calcolo si riferisce ai costumi in base al loro numero, che si basano sul loro ordine nella scheda Costumi.
Quale costume da camminata viene mostrato, viene deciso dal blocco: passa al costume intero inferiore di 4 + resto della divisione di fotogramma / 10 Ok sembra complicato! Scopriamolo per capire meglio ogni parte.
Il blocco di cui sopra esegue un'operazione matematica, che è il resto della divisione. Ad esempio, se frame = 0 allora carica costume 4 + resto della divisione tra la variabile frame e il numero 10 che è il numero dei frame, tutto questo ha bisogno di essere arrotondato perché frame può dare dei numeri non interi, per questo utilizziamo la funzione intero inferiore di.
La variabile frame continua ad aumentare, anche se abbiamo solo dieci costumi da camminata. Quando frame è impostato su un numero compreso tra 0 e 9, vogliamo che mostri i costumi da 4 a 13. Ecco perché il nostro codice ha il blocco di frame 4 +. Ma quando il frame aumenta a 10, vogliamo tornare a costume 4, non costume 12.
Possiamo controllare il costume che viene visualizzato utilizzando un trucco matematico: perché 10 diviso 10 = 0, un valore di fotogramma di 10 mostrerà il primo costume da camminata! Dobbiamo aggiungere 4 a questo numero, perché il primo costume da camminata è in realtà il costume 4. (Ricordate, costume 1, costume 2 e costume 3 sono rispettivamente i costumi in piedi, in salto e in caduta.) Questa somma viene quindi utilizzata con il blocco intero inferiore , che è un termine di programmazione che significa "arrotonda in basso". A volte il frame sarà impostato su un numero come 4.2 o 4.5, quindi il frame 4 + sarebbe 8.2 o 8.5, ma occorre arrotondare per mostrare costume 8.
Il codice nella parte del blocco se allora altrimenti gestisce cosa succede se in aria è maggiore o uguale a 3. Controlliamo la velocità per vedere se il gattino sta cadendo (cioè se la velocità è minore o uguale a 0) o salta (cioè se la velocità è maggiore di 0) e passare al costume corretto. Alla fine, il blocco correzione costume.
Inserire i blocchi passa al costume Idle e correzione costume nel definisci tocca terra e nel definisci camminata passi. Inoltre, aggiungi cambia fotogramma di 1 / fotogrammi in modo che la variabile fotogramma aumenti nel tempo, come mostrato qui.
Codice finale completo:
