Ball Abprallen, MIT App Inventor Tutorial #3

Dieses kurze Video zeigt dir, wie du einen Ball auf dem Bildschirm herumrollen lässt und er die Richtung ändert, wenn er angestoßen wird. Das ist das zweite aus der Serie von Einführungsvideos, die dir zeigen, wie man Apps mit MIT App Inventor baut.

♩♫♪♬

Hallo zusammen! Willkommen zurück zu App Inventors Hour of Code.

- >Stop Stop Stop Stop Stop Stop Shaking Me!<
- Es reicht!

Die nächste App, die wir bauen, ist eine Spielapp.

Spricht sie dieses mal?

Nein, leider nicht. Lass uns eine stille App bauen.

Um anzufangen, logge dich bei App Inventor ein und klicke auf "New Project".

Nenne dieses "BallBounce".

Diese App wird einen Ball über den Bildschirm bewegen. Der Ball ist ein so genannter "Sprite".

In App Inventor leben Ball- und Bildsprites auf einer Leinwand. Bevor wir eine Leinwand hineintun, müssen wir eine Einstellung in den Bildschirmeigenschaften verändern.

Diese Einstellung ist klein aber sehr wichtig für eine App mit Leinwand.

Gehe zu den Bildschirmeigenschaften, scrolle die Eigenschaftsliste ganz runter und deaktiviere "Scrollable".

Das macht, dass der Bildschirm nun eine feste Größe hat und den Nutzer nicht hoch und runter scrollen lässt.

Okay, nun ziehe eine Leinwand aus der Malen- und Animationsschublade heraus. Bemerke, dass sie sehr klein ist.

Gehe zum Eigenschaftsabschnitt der Leinwand und ändere die Eigenschaften Breite und Höhe zu "Fill parent".

Das vergrößert unsere Leinwand ein ganzes Stück.

Nun ziehe einen Ballsprite heraus und wirf ihn auf die Leinwand. Er ist zu klein. Lass uns den Ball etwas vergrößern. Gehe zu den Eigenschaften für den Ball und ändere den Radius auf zehn.

Okay, für jetzt ist das alles, was wir brauchen. Zeit für Blöcke!

Klicke auf "Ball1" um dessen Blöcke anzuzeigen. Ziehe "Ball1.Flung" heraus. Ja, wir haben es "Flung" genannt. Das ist vielleicht ein dummes Wort aber es ist grammatikalisch korrekt.

Nun, überlege, was der Ball tun soll, nachdem er gestoßen wurde. Wir wollen, dass er sich in die Richtung des Stoßes mit der Stärke beziehungsweise Schnelligkeit der Geste bewegt.

Die Art, das zu erreichen, ist, die Parameter der Stubsgeste zu holen und sie in die Richtung und Geschwindigkeit des Balls zu stecken.

Zuerst ziehe die Setterblöcke für die Richtung des Balls und dessen Geschwindigkeit heraus. Wir wollen des Balls Richtung und Geschwindigkeit auf die Richtung und Geschwindigkeit der Stubsgeste setzen.

Dafür gibt es sogar eine wirklich einfache Möglichkeit in dem Stoßeventhandler. Ziehe "get heading" heraus und stecke es in "set Ball1.Heading".

Ziehe "get speed" heraus und stecke das in "set Ball1.Speed".

So. Nun, ist das Event fertig, das behandelt, dass der Ball gestoßen wird. Das heißt, dass der Nutzer den Finger benutzt, um den Ball zu stoßen. Das ist ein Stoß wie bei einem Billiardstock, nicht wie bei Angry Birds.

Wenn du mit deinem Smartphone verbunden bist, kannst du deine App testen. Wie einfach der schwer ist es, den Ball zu stoßen? Reagiert die App so, wie es erwartet wird?

Etwas, das du wahrscheinlich feststellst, ist, dass der Ball, wenn er eine Kante berührt, an ihr stecken bleibt.

Wir müssen dem Ball erklären, wie er von einer Kante abprallt. Zurück zu den Blöcken!

Gehe zu den Ballblöcken und wähle den Block "when Ball1.EdgeReached". Gehe zurück zu den Blöcken und ziehe "call Ball1.Bounce" heraus.

Bemerke, dass der Block eine Kante als Argument nimmt. Wo bekommen wir den Kantenwert her, was meinst du?

Gut, wie bequem! Der EdgeReached-Eventhandler meldet, welche Kante erreicht wurde. Ziehe die Maus über den Kantenparameter und du siehst den "get"-Block dafür.

Ziehe diesen raus und stecke in ein.

Das war's! Teste deine App nochmal aus.

Hey, schau! Der Ball prallt an der Kante ab! Ziemlich cool, he?

Okay, jetzt haben wir eine sehr grundlegende Spieleapp am Laufen und das kann der Anfang von einer ganzen Menge verschiedener Spiele werden.

Die App Inventor-Webseite hat ein Tutorial, das dir zeigt, wie man das zu einem Minigolfspiel macht.

Ein Billiardspiel oder Pong wären auch vorstellbar.

Das ist nur der Anfang. Fordere dich selbst heraus und mache das noch spannender und spaßiger.

Unsere Tutorialzeit ist abgelaufen. So, wenn irgendjemand von euch da draußen die eigene BallBounce-App erweitern will, siehe die Webseite für weitere großartige Ideen.

Definitiv einen Blick wert. In unserem nächsten und letzten Tutorial werden wir euch zeigen, wie man eine App namens "Digital Doodle" macht, mit der man Bilder auf seinem Smartphone malen kann.

Klingt großartig! Okay, wir machen jetzt Schluss. Bis bald!

♩♫♪♬