Upload
others
View
0
Download
0
Embed Size (px)
Citation preview
Space Invaders Version: 1.0.1 Seite: 1 von 11
Space Invaders (Eindringlinge aus dem
Weltall)
Übersetzung und Anpassung des Dokumentes:
http://explore.appinventor.mit.edu/ai2/space-invaders
(licensed under a Creative Commons Attribution-ShareAlike 3.0 Unported License )
Das werden wir am Ende gebaut haben:
Durch die Erstellung der Space Invaders App werdet ihr mit der Verwendung von
Uhrenkomponenten (Clock components ) und Zeitgebern (Timer), der Verwendung von
Animationskomponenten wie Image Sprites und der Canvas (Leinwand), der Einstellung der
Sichtbarkeit und der Erkennung von Kollisionen in App Inventor vertraut gemacht. Ihr
programmiert eine Anwendung mit einer Rakete oder Raumschiff, deren Ziel es ist, auf die
fliegende Untertasse auf den Bildschirm zu schießen.
Space Invaders Version: 1.0.1 Seite: 2 von 11
Los geht‘s
Verbindet Euch mit der App Inventor-Website
http://ai2.appinventor.mit.edu
und startet ein neues Projekt. Benennt es SpaceInvaders_1 oder SpaceInvader_2 (je nach
Gruppe, damit ihr nicht die Daten der anderen Gruppe überschreibt), und setzt auch den Titel
des Bildschirmes (Screen Title) auf "SpaceInvaders". Dort wo es möglich ist, verbindet
euch mit einem Handy,Tablet oder Emulator.
Einführung
Dieses Tutorial stellt die folgenden Fähigkeiten vor, die für die zukünftige Spielentwicklung
nützlich sind:
Anwendung der Clock component
Anwendung von Clock.Timer , um Sprites zu bewegen
Anwendung des Sprite.Flung (Schleuder) um einen Sprite zu bewegen
Anwendung der Kollisionserkennung
Setzen der Sichtbarkeit von Sprites
Vorbereitung
Für dieses Spiel gibt es zwei Arten von Sprites: ein Imagesprite, dargestellt durch ein
Raumschiff und fliegende Untertassen (UFO), dargestellt durch ein Ball-Sprite.
http://explore.appinventor.mit.edu/ai2/space-invaders
Klicke mit der rechten Maustaste auf der Original-Seite (englisch) oben , um die Bilddateien
für dein (Raumschiff) Raketenschiff-Sprite und das UFO-Sprite herunterzuladen.
(UFO = Unbekanntes Flug Objekt)
.
Tipp: Verkleinere die Sprites vorher mit Paint.Net auf maximal 150 Pixel (Höhe Raumschiff,
Breite UFO)
Space Invaders Version: 1.0.1 Seite: 3 von 11
Einrichten der Komponenten
Verwendet den Component Designer, um das Interface für SpaceInvaders zu erstellen. Wenn
ihr fertig seid, sollte es ungefähr so aussehen wie der Screenshot (Bildschirm) unten
(detailliertere Anweisungen unter dem Screenshot).
Space Invaders Version: 1.0.1 Seite: 4 von 11
Um diese Schnittstelle zu erstellen, fügt ihr die folgenden Komponenten in den Designer ein,
indem ihr sie aus der Komponentenpalette in den Viewer zieht und die Eigenschaften der
Komponenten wie unten beschrieben einstellt:
Component
Type
Palette
Group So benennt ihr es
Zweck der
Komponente Anpassung
Canvas Drawing
and
Animation
Canvas1
Der Hintergrund,
auf dem wir unsere
Sprites platzieren
werden.
Ändern Sie die Eigenschaft Width
auf "Fill parent" und die
Eigenschaft Height auf 300. Setzen
Sie die Eigenschaft
BackgroundColor auf Schwarz.
ImageSprite Drawing
and
Animation
RocketSprite Das Raumschiff
(Rakete) im Spiel
Ladet das Raketenschiff-Bild hoch
und setzt die Picture-Eigenschaft
auf "rocket.png". Setzt die
Eigenschaft Y auf 230. Dadurch
wird die Rakete am Boden der
Leinwand platziert.
ImageSprite Drawing
and
Animation
SaucerSprite Das UFO im Spiel
Ladet das Untertassenbild hoch und
setzt die Eigenschaft Picture auf
"saucer.png".
BallSprite Drawing
and
Animation
Bullet
Die Kugel vom
Raketenschiff.
Ändert die PaintColor auf Grün und
setzt die Radius-Eigenschaft auf 8.
Clock User
Interface Clock1
Wir verwenden die
Uhr für die Timer-
Methode, um das
UFO zu bewegen.
Ändert die TimerInterval-
Eigenschaft auf 3000.
Horizontal
Arrangement Layout HorizontalArrangement1
Enthält Label1 und
ScoreLabel
Label User
Interface Label1
Dort ist das Wort
"Score: "
Ändert die Text-Eigenschaft in
"Score: " oder „Spielstand:“
Label User
Interface ScoreLabel
Hier steht der
Spielstand (score)
als Zahl
Change Text property to "0".
Button User
Interface ResetButton
Hiermit setzen wir
das Spiel zurück.
Text-Eigenschaft auf "0" ändern.
Nun, da ihr alle wesentlichen Eigenschaften konfiguriert habt, könnt ihr die Farben aller
Komponenten, die ihr möchtet, ändern.
Space Invaders Version: 1.0.1 Seite: 5 von 11
Bewegen der Rakete
In diesem Spiel bewegt der Benutzer die Rakete von einer Seite zur anderen. Das bedeutet,
dass wir nur die X-Richtung des Raketen-Sprites ändern werden. Dazu verwenden wir den
RocketSprite.Dragged Event Handler. Wenn die Rakete gezogen wird, stellen wir ihre X-
Eigenschaft so ein, dass sie das aktuelle X ist, auf das wir das Sprite gezogen haben.
Sobald Sie diese Blöcke zusammengesetzt haben, schließen Sie Ihr Handy an und testen Sie
diese Funktion!
Das Verhalten der Kugel programmieren
Es gibt mehrere Funktionen, die wir in diesem Spiel haben wollen. Wir wollen, dass er aus
der Rakete schießt, mit der Untertasse kollidiert und nach der Kollision und vor dem Schuss
unsichtbar ist.
Beginnen wir mit dem Block Screen1.initialize. Wenn der Bildschirm initialisiert ist,
programmieren wir die Kugel so, dass sie unsichtbar ist. Wir tun dies, indem wir die
Sichtbarkeitseigenschaft der Kugel auf False setzen.
Als nächstes wollen wir sicherstellen, dass die Kugel wieder auftaucht, wenn wir aus der
Rakete schießen. Wenn wir die Rakete berühren, wollen wir, dass die Kugel auf die
Untertasse zusteuert. Dazu verwenden wir den RocketSprite.Touched Event Handler. Wenn
die Rakete berührt wird, wollen wir nicht nur die Rakete sichtbar machen, sondern auch die
Geschwindigkeit und den Kurs der Rakete einstellen. Die Überschrift ist ein Wert von 0 bis
360, der angibt, in welche Richtung sich das Sprite bewegen soll. 0/360 ist links, 90 ist oben,
180 ist rechts und 270 ist unten. Die Geschwindigkeit wird in Pixel/Sekunde gemessen.
Das Letzte, was wir programmieren müssen, ist, was passiert, wenn die Kugel die Untertasse
trifft. Wir werden den Bullet.CollidedWith Event Handler verwenden. Dieses Ereignis wird
immer dann aufgerufen, wenn die Kugel mit einem anderen Sprite kollidiert. Da unser
Raketen-Sprite in einem Y am unteren Rand des Bildschirms eingeschlossen ist, wird die
Kugel nie mit der Rakete und nur mit der Untertasse kollidieren. Bei einer Kollision wollen
wir, dass zwei Dinge passieren. 1. Die Punktzahl sollte sich um 1 Punkt erhöhen.
2. Die Kugel sollte unsichtbar werden.
Space Invaders Version: 1.0.1 Seite: 6 von 11
Wenn ihr begonnen habt, dieses Spiel zu testen, habt ihr vielleicht bemerkt, dass, sobald ihr
die Kugel abfeuert, es scheint, dass wir sie nicht nochmal abfeuern könnt. Wir müssen die
Kugel so programmieren, dass sie an den Ort vor der Rakete zurückkehrt, wenn wir sie
abfeuern. Wir können das mit dem Bullet.MoveTo-Block machen.
Testet es jetzt!
Ihr habt es vielleicht bemerkt, dass, wenn ihr das UFO nicht trefft,dass sich die Kugel nach
oben bewegt und dort stecken bleibt, bis ihr wieder schießt. Um die Kugel verschwinden zu
lassen, wenn sie den oberen Rand unserer Leinwand trifft, müssen wir den
Bullet.EdgeReached Event Handler verwenden.
Programmierung der Reset-Taste
Manchmal möchten Benutzer das Spiel neu starten und ihre Punktzahl zurücksetzen. Wenn
das passiert, müssen wir den Wert wieder auf 0 setzen.
Erhöhen der Schwierigkeit -- Ändern der Position des UFO‘s
Machen wir das Spiel ein wenig anspruchsvoller! Wenn die Kugel mit dem UFO kollidiert,
ändern wir die Position der Untertasse. Die Untertasse behält den gleichen Y-Wert, so dass
wir nur noch das X ändern müssen.
Space Invaders Version: 1.0.1 Seite: 7 von 11
Um es noch schwieriger zu machen, ändern wir auch die Position der Untertasse, wenn der
Timer losgeht.
Space Invaders Version: 1.0.1 Seite: 8 von 11
Zusatzaufgaben:
1.) Ändert die Farbe und Größe der Kugel
2.) Ändert die Geschwindigkeit der Kugel
3.) Fügt einen Sound (mp3) hinzu, wenn das Raumschiff getroffen wird.
4.) Fügt dem Programm ein Icon hinzu. So könnt ihr es auf dem Handy besser unterscheiden.
Space Invaders Version: 1.0.1 Seite: 9 von 11
5.) Ändert Rakete und UFO zu einer anderen Sache Beispiel:
Katze sitzt auf der Wiese und wirft mit Katzenfutter auf den Fussball ….
Space Invaders Version: 1.0.1 Seite: 10 von 11
Zauberer vertreibt die Regenwolken, weil er ein Sonnenbad nehmen will.
Lizenzfreie Bilder gibt es auf:
https://pixabay.com/de/
Denkt dran die Grafik freizustellen (transparenter Hintergrund) und macht die Grafik nicht größer als
150 Pixel.
Lizenzfreie Sounds:
https://freesound.org
Space Invaders Version: 1.0.1 Seite: 11 von 11
Übrigens:
Das Koordinatensystem beim App-Inventor ist etwas anders definiert:
Increases = Wert wird größer !
Phone Screen = Bildschirm des Handys
Quelle Grafik:
http://www.appinventor.org/content/CourseInABox/drawAnimate/CanvasComponent
(AppInventor.org is licensed under an Attribution-NonCommercial-ShareAlike 3.0 Unported License.)