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.)