In dieser Lerneinheit lernen Sie Animationen in App Inventor kennen, indem Sie einen Ball (ein Sprite) auf dem Bildschirm (auf einem Canvas) herumhüpfen lassen.
| Autor | Mikko Muilu |
| Fach | Informatik, Mathematik |
| Länge | 90 Minuten |
| Ansatz | Projekt-Basiertes Lernen |
| Kompetenzen | Verstehen, wie die Computerspiele funktionieren und welche Art von Mathematik ihnen zugrunde liegt |
| Klasse | 5-6. Klasse |
| Technologien | Computer mit Internetanschluss, optional ein Android-Gerät und ein Wifi MIT App Inventor |
Beschreibung
Starten Sie die Entwicklungsumgebung App Inventor: http://ai2.appinventor.mit.edu/
Ein neues Projekt starten
Wenn Sie ein anderes Projekt geöffnet haben, gehen Sie in das Menü Meine Projekte und wählen Sie Neues Projekt.
Benennen Sie das Projekt
Nennen Sie ihn z. B. “BallBounce”. Denken Sie daran, keine Leerzeichen, aber Unterstriche sind OK.
Leinwand hinzufügen
Ziehen Sie aus der Kategorie Zeichnung und Animation eine Canvas-Komponente heraus und legen Sie sie auf dem Viewer ab.
Den Bildschirm so einstellen, dass er nicht scrollt
Die Standardeinstellung für App Inventor ist, dass der Bildschirm Ihrer App “scrollbar” ist, d. h. die Benutzeroberfläche kann über den Rand des Bildschirms hinausgehen und der Benutzer kann durch Streichen mit dem Finger nach unten scrollen (wie beim Scrollen auf einer Webseite). Wenn Sie ein Canvas verwenden, müssen Sie die Einstellung “scrollbar” deaktivieren (Kästchen nicht ankreuzen), damit der Bildschirm nicht gescrollt wird. Auf diese Weise können Sie die Leinwand so einstellen, dass sie den gesamten Bildschirm ausfüllt.
Ändern Sie die Höhe und Breite der Leinwand, um das übergeordnete Element zu füllen.
Vergewissern Sie sich, dass die Komponente Canvas ausgewählt ist (#1), damit ihre Eigenschaften im Eigenschaftenfenster angezeigt werden (#2). Setzen Sie unten die Eigenschaft Höhe auf “Fill Parent”. Machen Sie dasselbe mit der Eigenschaft Breite.
Einen Ball hinzufügen
Nachdem wir nun eine Leinwand erstellt haben, können wir ein Ball-Sprite hinzufügen. Dieses befindet sich ebenfalls in der Schublade Zeichnung und Animation. Ziehen Sie eine Ball-Komponente heraus und legen Sie sie auf der Leinwand ab (#1). Wenn Sie möchten, dass der Ball besser zu sehen ist, können Sie seine Radius-Eigenschaft im Eigenschaften-Fenster ändern (#2).
Öffnen Sie den Blocks Editor
Öffnen Sie die Kategorie Ball1, um die Blöcke des Balls zu sehen.
Ziehen Sie den Flung Event Handler heraus
Wählen Sie den Block Ball1.Flung und ziehen Sie ihn auf die Arbeitsfläche. Flung bezieht sich darauf, dass der Benutzer eine “Fling-Geste” mit seinem Finger macht, um den Ball zu “schleudern”. Fling ist eine Geste, wie sie ein Golfschläger macht, nicht wie man Angry Birds startet! In App Inventor wird der Event-Handler für diese Art von Geste aufgerufen, wenn Flung.
Lege die Richtung und Geschwindigkeit des Balls fest. Holen Sie zunächst die Set-Blöcke.
Öffne die Ball-Schublade und scrolle in der Liste der Blöcke nach unten, um die Blöcke set Ball1.Heading und set Ball1.Speed zu erhalten
Fügen Sie die Parameter “set Ball1.Speed” und “set Ball1.Heading” in den Event-Handler “Fling” ein
Legen Sie die Geschwindigkeit des Balls so fest, dass sie mit der Geschwindigkeit der Schleudergeste übereinstimmt.
Bewegen Sie den Mauszeiger über den Parameter “speed” des Ereignishandlers “When Ball1.Flung”. Die Get- und Set-Blöcke für die Geschwindigkeit des Wurfs werden eingeblendet. Wählen Sie den get speed-Block und verbinden Sie ihn mit dem set Ball1.Speed-Block.
Legen Sie die Richtung des Balls so fest, dass sie mit der Richtung der Schleudergeste übereinstimmt.
Machen Sie dasselbe für die Überschrift des Balls. Bewegen Sie den Mauszeiger über den Heading-Parameter und Sie werden sehen, dass der Get-Heading-Block erscheint. Nehmen Sie diesen Block und klicken Sie ihn in den Block set Ball1.Heading
Probieren Sie es aus
Eine gute Idee bei der Entwicklung von Apps ist es, während der Entwicklung zu testen. Mit App Inventor können Sie dies ganz einfach tun, da Sie eine Live-Verbindung zwischen Ihrem Telefon (oder Emulator) und der App Inventor Entwicklungsumgebung herstellen können. Wenn Sie kein Telefon (oder Emulator) angeschlossen haben, gehen Sie zu den Verbindungsanweisungen und kehren Sie dann zu diesem Lernprogramm zurück. (Anweisungen zum Herstellen einer Verbindung finden Sie im Lernprogramm Nr. 1 oder auf der Website unter “Erste Schritte”).
Warum bleibt der Ball an der Seite des Bildschirms hängen?
Nachdem du deinen Ball über die Leinwand geschleudert hast, hast du wahrscheinlich bemerkt, dass er an der Seite hängen geblieben ist. Das liegt daran, dass sich die Richtung des Balls nicht geändert hat, obwohl er den Rand der Leinwand getroffen hat. Um den Ball von der Kante des Bildschirms abprallen zu lassen, können wir einen neuen Event-Handler namens “When Edge Reached” programmieren.
Gehen Sie in die Schublade Ball1 und ziehen Sie ein Ereignis when Ball1.EdgeReached do heraus.
Gehe zurück in die Schublade von Ball1 und ziehe einen Ball heraus. Prellblock.
Hinzufügen des Kantenwerts für den Block Ball.Bounce
Die Methode Ball.Bounce benötigt ein Kantenargument. Beachten Sie, dass das Ereignis Ball1.EdgeReached einen “Rand” als Parameter hat. Wir können den “get edge”-Block aus diesem Argument nehmen und ihn in die Methode “Call Ball1.Bounce” einfügen. Holen Sie sich den “get edge”-Block, indem Sie mit der Maus über den “edge”-Parameter des “when Ball1.EdgeReached”-Blocks fahren (mit dem Mauszeiger darüber fahren).
Ihre fertigen Blöcke sollten so aussehen. Testen Sie es jetzt aus!
Es gibt viele Möglichkeiten, diese Anwendung zu erweitern.
Hier sind einige Ideen… aber die Möglichkeiten sind endlos!
- Ändere die Farbe des Balls je nachdem, wie schnell er sich bewegt oder welchen Rand er erreicht.
- Verringere die Geschwindigkeit des Balls so, dass er langsamer wird und stehen bleibt, nachdem er geschleudert wurde.
- Geben Sie dem Ball Hindernisse oder Ziele, die er treffen soll.
- Einführung eines Schlägers zum Abfangen des Balls, wie bei einem Pong-Spiel
- Auf der App Inventor-Website finden Sie Tutorials, die Ihnen helfen, diese Anwendung zu erweitern, insbesondere das Mini-Golf-Tutorial.
Bewertungsinstrumente
Die Schülerinnen und Schüler können das Grundspiel mit diesen Anweisungen selbst entwickeln, auch wenn sie noch nie programmiert haben. Wenn es den Schülern gelingt, ihre Apps zu erweitern, wäre es möglich, die Ergebnisse als Peer-Feedback zu bewerten. Dies sind die ersten Schritte zur Programmierung, daher sollte die Bewertung unterstützend und positiv sein. Die Anweisungen für die Peer-Evaluation sollten dies berücksichtigen.
Anhänge
Dieses Tutorial wurde in App Inventor -Website http://appinventor.mit.edu/explore/ai2/tutorials veröffentlicht. Es gibt noch viele andere Tutorials, wir empfehlen, sie zu besuchen
 This document is distributed in 2021 by the COTA Project Consortium under an Attribution–ShareAlike Creative Commons license (CC BY-SA 4.0). This license allows you to remix, tweak, and build upon this work, as long as you credit the COTA Project Consortium and license your new creations under the identical terms |