Lezione 11 - La funzione ciclica `draw()`
45 minuti
Panoramica
Domanda del giorno: come possiamo animare le nostre immagini in Sviluppo Giochi?
In questa lezione gli studenti vengono introdotti alla funzione ciclica draw(), uno dei paradigmi di programmazione fondamentali di Sviluppo Giochi. Per iniziare la lezione, gli studenti guardano alcuni libri fisici animati per vedere che avere molte cornici con immagini diverse crea l'impressione di movimento. Gli studenti guardano quindi un video che spiega come la funzione ciclica draw() in Sviluppo Giochi, aiuta a creare la stessa impressione nei loro programmi. Gli studenti combinano la funzione ciclica draw() con numeri casuali per manipolare alcune semplici animazioni con punti e poi con personaggi.
Traguardo di apprendimento
La funzione ciclica draw() è un componente fondamentale di Sviluppo Giochi. Il fatto che l'ambiente Sviluppo Giochi richiami ripetutamente questa funzione più volte al secondo (per impostazione predefinita 30) è ciò che consente allo strumento di creare animazioni. Questa lezione ha due obiettivi. La prima è che gli studenti vedano come l'animazione in generale dipenda dalla visualizzazione di molte immagini leggermente diverse in una sequenza. Il secondo obiettivo è che gli studenti capiscano in che modo la funzione ciclica draw() consente loro di creare questo comportamento in Sviluppo Giochi. Gli studenti devono concludere la lezione con la consapevolezza che le istruzioni nella funzione ciclica draw() vengono richiamate dopo tutti gli altri codici, ma vengono poi richiamate ripetutamente per creare un'animazione. Gli studenti avranno la possibilità di continuare a migliorare la propria comprensione di questo comportamento nelle prossime due lezioni, ma porre una solida base concettuale in questa lezione sarà utile per il resto dell'unità.
Opportunità di valutazione
-
Spiegare come la funzione ciclica
draw()consente la creazione di animazioni in Sviluppo GiochiNella discussione conclusiva, controlla che gli studenti menzionino che il codice nella funzione ciclica
draw()viene eseguito più e più volte, mentre il codice al di fuori dela funzione ciclicadraw()viene eseguito solo una volta, all'inizio del programma. -
Usare la funzione ciclica
draw()in combinazione con l'istruzione randomNumber(), le forme e i personaggi per creare animazioni sempliciVedi l'esercizio 8 su Code Studio.
Mappatura delle competenze
AP - Algorithms & Programming
- 2-AP-11 - Create clearly named variables that represent different data types and perform operations on their values.
- 2-AP-12 - Design and iteratively develop programs that combine control structures, including nested loops and compound conditionals.
- 2-AP-13 - Decompose problems and subproblems into parts to facilitate the design, implementation, and review of programs.
- 2-AP-16 - Incorporate existing code, media, and libraries into original programs, and give attribution.
- 2-AP-17 - Systematically test and refine programs using a range of test cases.
- 2-AP-19 - Document programs in order to make them easier to follow, test, and debug.
Pianificazione
Obiettivi
Gli alunni saranno in grado di:
- spiegare come la funzione ciclica
draw()consente la creazione di animazioni in Sviluppo Giochi - usare la funzione ciclica
draw()in combinazione con l'istruzione randomNumber(), le forme e i personaggi per creare animazioni semplici
Preparazione
- Stampa e assembla le schede da ritagliare
- Prepara il video
- Controlla il forum "Aula insegnanti" per insegnanti verificati per trovare strategie o risorse aggiuntive condivise dagli altri colleghi insegnanti
- Se stai facendo una lezione virtuale, valuta la possibilità di controllare le nostre Modifiche alla lezione virtuale
Collegamenti
Attenzione! Fai una copia di tutti i documenti che intendi condividere con gli alunni.
Per gli insegnanti
Per gli studenti
Codice introdotto
Guida didattica
Preparazione (5 minuti)
Mostra Esempio di libro animato - di Marnic Bos - Video.
Discussione: questo video mostra un libro animato per creare animazioni. Con parole tue, come funziona? Perché «induce i nostri occhi» a pensare che qualcosa si stia muovendo?
Discussione: chiedi agli studenti di scrivere le proprie idee in modo indipendente, quindi condividerle con i compagni e infine condividerle con un intero gruppo.
Obiettivo: questa discussione dovrebbe introdurre alcune nozioni chiave sull'animazione. Gli studenti devono capire che la chiave è vedere molte immagini di fila che sono leggermente diverse. Introduci la parola del vocabolario «frame» intesa come una di quelle tante immagini: una singola immagine all'interno di un'animazione. Quindi passa al fatto che presto gli studenti creeranno le proprie animazioni.
Osservazioni
Inizieremo a imparare a creare animazioni, non solo immagini statiche. Per fare ciò abbiamo bisogno di un modo per far sì che i nostri programmi disegnino molte immagini al secondo. I nostri occhi li fonderanno l'uno nell'altro per far sembrare un movimento fluido. Per farlo, però, avremo bisogno di imparare un nuovo importante strumento.
Domanda del giorno: come possiamo animare le nostre immagini in Sviluppo Giochi?
Attività (35 minuti)
Video: guarda il video che introduce la funzione ciclica draw().
Domanda da considerare con il video:
- Cosa fa la funzione di disegno?
Obiettivo
La funzione disegna esegue lo stesso codice più e più volte in un ciclo, ed è per questo che viene spesso chiamata "il ciclo disegna". Questo crea un effetto di animazione cambiando ciò che viene disegnato di una piccola quantità ogni volta che la funzione disegna viene eseguita. Questo può essere paragonato a un libro fisico da sfogliar, che può animare un'immagine cambiandola leggermente ad ogni pagina.
Allarme malinteso!
Quando il ciclo di disegno viene eseguito, non "cancella" il disegno precedente, quindi continuerà a mostrare tutto ciò che non è stato coperto dal nuovo ciclo di disegno. Se gli studenti non aggiungono uno "sfondo" all'inizio del ciclo di disegno, vedranno ancora tutte le immagini disegnate sullo schermo in precedenza.
Demo: se lo desideri, usa i materiali forniti per le attività manuali per realizzare una dimostrazione pratica per esplorare come sono collegati la funzione ciclica draw() e le animazioni.
Guida agli esercizi di programmazione: ulteriori indicazioni per gli esercizi di programmazione sono fornite nella Guida CSD agli esercizi di programmazione. Questo documento include strategie e buone pratiche per agevolare lo svolgimento degli esercizi di programmazione con gli studenti.
Nota che lo sfondo blu non è mai visibile perché viene immediatamente sovrascritto dallo sfondo rosso. Inoltre c'è sempre un solo punto giallo visibile poiché man mano che la funzione ciclica draw() si ripete, vengono posizionati nuovi sfondi.
Valutazione formativa: questo esercizio può essere utilizzato come valutazione formativa. Nell'esercizio viene fornita una tabella con i criteri di valutazione e agli studenti può essere fornito un riscontro scritto. Clicca qui per saperne di più su come fornire riscontri agli studenti.
Conclusione (5 minuti)
Domanda del giorno: come possiamo animare le nostre immagini in Sviluppo Giochi?
**Discussione ** in che modo la funzione ciclica draw() ci aiuta a creare animazioni?
Concetti chiave da fissare: ci sono molte idee sbagliate comuni sulla funzione ciclica draw(). Assicurati che gli studenti comprendano quanto segue:
- La funzione ciclica
draw()viene eseguita dopo tutto il codice del tuo programma. In realtà non importa dove si trova nel tuo programma. - La funzione ciclica
draw()viene eseguita da Sviluppo Giochi a una frequenza di fotogrammi costante di 30 fotogrammi al secondo. In realtà non è necessario chiamare personalmente la funzione. - I «frame» di Sviluppo Giochi possono essere pensate come fogli trasparenti. A meno che non si disegna uno sfondo, tutte le nuove forme o i personaggi appariranno semplicemente sopra quelli vecchi.
- Dovresti avere una sola funzione ciclica
draw()nel tuo programma.
Ripasso: torna alle risorse che gli studenti hanno visto all'inizio della lezione (video, libri sfogliabili) o nella sezione Aiuto e suggerimenti durante la lezione. Affronta le idee sbagliate che sono emerse durante la lezione.
Questo compito è disponibile previa Licenza Creative Commons (CC BY-NC-SA 4.0).
Se sei interessato ad utilizzare i materiali di Code.org per scopi commerciali, contattaci.
