> Start
> Grundlagen
> Einbinden von
   Medienformaten
> ActionScript, PHP
   und MySQL
> Spiele-
   programmierung
> ActionScript
   und XML
> Quellen
  Spieleprogrammierung mit ActionScript

Kennenlernen einiger Grundfunktionen

Ein erstes Spiel soll dazu dienen einige Funktionen, die in Spielen häufig benötigt werden zu demonstrieren. Im folgenden Beispiel soll ein Wichtel in einer vorgegebenen Zeit möglichst viele Päckchen einsammeln. Dabei kommen Funktionen wie Tastatursteuerung, Kollisionsabfrage oder Timer zum Einsatz, deren Realisierung Schritt für Schritt erklärt wird.

  ansehen

Vorbereitung

Zuerst legen Sie die Bühnengröße auf 500x400 Pixel fest und setzten die Bildrate auf 24 Bilder pro Sekunde. Beide Einstellungen können Sie in den Dokumenteigenschaften vornehmen.


Filmeigenschaften festlegen

Wieso 24 BpS?

Grundsätzlich gilt: Je höher die Bildrate eines Films desto schneller und flüssiger scheinen die Bewegungen abzulaufen, was gerade bei Spielen von Vorteil zu sein scheint. Allerdings sorgen aufwendige Skripte in Verbindung mit langsamen Prozessoren dafür, dass die Bildrate während des Spiels stark verringert wird. Die Erfahrung zeigt, dass eine Bildrate von 24 BpS für Flash-Spiele am besten geeignet ist.

Im Folgenden benötigen Sie diese 4 Ebenen:

-> Skript
-> Textfelder
-> Spielfigur
-> Hintergrund


Ebenen des Spiels

Um die vorgegebenen Elemente, zum Beispiel die Spielfigur nutzen zu können, öffnen Sie nun noch die Datei „elemente_01.fla“ als Bibliothek.
(Datei -> als Bibliothek öffnen)

  Download elemente_01.fla (27KB)

Die Spielfigur

Erstellen Sie im zweiten Bild der Ebene Spielfigur ein leeres Schlüsselbild (rechte Maustaste -> leeres Schlüsselbild einfügen) und ziehen Sie den Movieclip „figur“ aus der Elemente-Bibliothek auf die Bühne. Achten Sie darauf, dass Sie sich noch im besagten Schlüsselbild befinden. Geben Sie der Figur im Eigenschafteninspektor den Instanznamen „figur“.
Im Spiel soll es so aussehen, als ob die Spielfigur läut. Aus diesem Grund soll der Movieclip figur nun animiert werden. Öffnen Sie den Symbolbearbeitungsmodus des Movieclips (Doppelklick auf den Movieclip) und fügen Sie in den beiden „Bein-Ebenen“ drei weitere Schlüsselbilder hinzu (rechte Maustaste -> Schlüsselbild einfügen). Jetzt verändern Sie die Position der beiden Beine von Bild zu Bild, damit es den Eindruck erweckt, als würde die Figur laufen. Dies erreichen Sie zum Beispiel wenn Sie die die Beine in verschiedene Richtungen neigen (Modifizieren -> Transformieren -> Drehen und Neigen).


Animation der Spielfigur

Danach verlängern Sie die Ebene „Koerper“ auf vier Bilder, indem Sie im Bild 4 besagter Ebene ein Schlüsselbild einfügen (rechte Maustaste -> Schlüsselbild einfügen).


Zeitleiste Movieclip „figur“

Nun belegen Sie noch das erste Bild der Ebene Skript in der Movieclip-Zeitleiste mit folgendem Skript:

stop();

Die Figur soll ihre Füße ja nur bewegen, wenn Sie vom Spieler über die Bühne bewegt wird.
Verlassen Sie den Symbolbearbeitungsmodus wieder. (Klick auf Szene 1 unter der Zeitleiste)
Möchten Sie Ihre eigene Spielfigur erstellen, erzeugen Sie einfach einen neuen Movieclip (Einfügen -> Neues Symbol, als Verhalten Movieclip auswählen) und entwerfen Sie Ihre Figur. Die beschriebene Animation können Sie auf Ihre eigene Figur genauso anwenden.

Tastatursteuerung

Während des Spiels soll die Figur mit den Pfeiltasten der Tastatur über die Bühne bewegt werden. Da der Mauszeiger dabei nicht benötigt wird, blenden wir diesen zunächst einmal aus.
Klicken Sie in die Ebene Skript des Films und geben Sie im Aktionen-Fenster folgende Zeile ein:

Mouse.hide();

Jetzt erstellen Sie in Bild 2 der Ebene Skript ein Schlüsselbild, geben diesem den Namen „spiel“ und fügen im Aktionen-Fenster die Anweisung stop(); hinzu.


Bildname vergeben

Das Arbeiten mit Bildnamen anstelle von Bildnummern erleichtert die Übersicht.

Bevor wir mit der eigentlichen Tastatursteuerung beginnen können, müssen wir noch eine Vorbereitung für die Kollisionsabfrage treffen. Später soll unser Wichtel Päckchen in seinen Sack einsammeln. Damit sich die Kollisionskontrolle aber nicht auf die gesamte Figur bezieht, sondern nur auf den Sack, erstellen wir einen weiteren Movieclip, der den Sack abdeckt und später nicht zu sehen ist.

Zeichnen Sie neben die Figur ein Rechteck, welches in etwa die Größe des Sackes hat. Markieren Sie das gesamte Rechteck und wandeln Sie es in einen Movieclip namens „hitTest“ um. (Einfügen -> In Symbol konvertieren, Verhalten: Movieclip) Geben Sie ihm im Eigenschafteninspektor ebenfalls den Instanznamen „hitTest“. Ziehen Sie nun das Rechteck auf die Figur, sodass der Sack nahezu verdeckt wird.


Rechteck-Movieclip für Kollisionsabfrage

Damit das Rechteck im Spiel nicht zu sehen ist, markieren Sie den Movieclip und versehen ihn im Aktionen-Fenster mit folgendem Code:

onClipEvent(load){
this._visible=0;
}


_visible ist eine Movieclip-Eigenschaft, mit der sich die Sichtbarkeit der vor dem Punkt angesprochenen Movieclip-Instanz ein- und ausschalten lässt. False oder 0 stehen dabei für unsichtbar, true bzw. 1 stehen für sichtbar.
This vor dem Punkt adressiert den aktuellen Movieclip.

Markieren Sie nun beide Movieclips („figur“ und „hitTest“) und konvertieren Sie diese in einen gemeinsamen Movieclip (Einfügen -> In Symbol konvertieren, Verhalten: Movieclip), dem Sie den Namen „spielfigur“ geben. Vergeben Sie im Eigenschafteninspektor als Instanzname den gleichen Namen.

Nun kommen wir zur eigentlichen Tastatursteuerung. Markieren sie den Movieclip „spielfigur“ und versehen Sie ihn im Aktionen-Fenster mit folgendem Skript:

onClipEvent(enterFrame){
if(Key.isDown(Key.LEFT) && this._x >= 30){
   this._xscale = -100;
   this.figur.play();
   this._x = this._x-5;
}
else if(Key.isDown(Key.RIGHT) && this._x <= 470){
   this._xscale = 100;
   this.figur.play();
   this._x = this._x+5;
}
}


Erklärung:

onClipEvent(enterFrame)

Jedes Mal wenn der Movieclip abgespielt wird, wird das Skript ausgeführt. Bei einer Bildrate von 24 BpS wäre das 24 Mal in einer Sekunde.

if(Key.isDown(Key.LEFT) && this._x >= 30)

Das Skript beginnt mit einer if-Abfrage mit zwei und-verknüpften Bedingungen. Key.isDown(Key.LEFT) prüft ob die [Pfeil-links]-Taste gedrückt wurde und this._x >= 30 prüft ob die Instanz spielfigur 30 oder mehr Pixel vom linken Bildschirmrand entfernt ist. So kann die Spielfigur nicht über den Bildschirmrand hinaus bewegt werden. Erst wenn beide Bedingungen erfüllt sind wird der folgende Anweisungsblock ausgeführt.

this._xscale = -100;

Die Eigenschaft _xscale bestimmt die horizontale Skalierung des aktuellen Movieclips. Durch den Wert -100 wird der Movieclip horizontal gespiegelt, damit die Figur nicht rückwärts läuft.

this.figur.play();

Der in den aktuellen Movieclip „spielfigur“ eingebundene Movieclip „figur“ wird abgespielt, das heißt die Bewegungsanimation des Wichtels läuft ab.

this._x = this._x-5;

Jedes Mal wenn das Bild abgespielt wird, also 24 Mal in der Sekunde wird die Instanz der „spielfigur“ um 5 Pixel nach links verschoben, indem die X-Koordinate (_x) um 5 verringert wird.

Ist eine der beiden Bedingungen der If-Anweisung nicht erfüllt, wird der Anweisungsblock übersprungen und mit else if fortgefahren. Der Rest funktioniert analog zum ersten Teil:
Es wird geprüft ob die [Pfeil-rechts]-Taste gedrückt wird und die Instanz des Movieclips 30 Pixel vom rechten Bildschirmrand entfernt ist. Danach wird die Spielfigur horizontal skaliert, die Animation abgespielt und die Figur um 5 Pixel nach rechts bewegt.
Werden weder die If noch die If else Bedingungen erfüllt, wird keiner der beiden Anweisungsblöcke ausgeführt und die Figur bleibt wo sie ist.

Kollisionsabfrage

Um überhaupt eine Kollisionsabfrage durchführen zu können brauchen wir noch das Objekt mit dem die Kollision geprüft werden soll. In unserem Fall wären das die Päckchen, die der Wichtel einsammeln muss. In der Elemente-Bibliothek gibt es bereits den movieclip „geschenk“. Diesen Movieclip ziehen Sie auf die Bühne und entfernen ihn gleich wieder, da wir ihn nur in unsere Bibliothek importieren wollen. Jetzt klicken sie doppelt auf den „geschenk“-Movieclip in Ihrer eigenen Bibliothek um den Symbolbearbeitungsmodus zu öffnen. Fügen Sie in Ebene 1 des Movieclips drei weitere Schlüsselbilder hinzu (rechte Maustaste -> Schlüsselbild einfügen). Dem dritten der nun insgesamt vier Schlüsselbilder geben Sie im Eigenschafteninspektor den Namen „getroffen“.
Dem ersten Schlüsselbild fügen Sie folgendes Skript hinzu:

this._y = this._y+3;
if(this.hitTest(_root.spielfigur.hitTest)){
   gotoAndPlay("getroffen");
}
if(this._y > 400){
   this.removeMovieClip();
}

Erklärung:

this._y = this._y+3;

Die Eigenschaft _y des Movieclips, also die vertikale Position, wird bei jedem Abspielen des Schlüsselbildes um 3 Pixel erhöht. Das heißt, der Movieclip bewegt sich kontinuierlich von oben nach unten.

if(this.hitTest(_root.spielfigur.hitTest))

Die If-Anweisung prüft die Kollision zwischen this, dem aktuellen Movieclip „geschenk“, und _root.spielfigur.hitTest, dem Movieclip „hitTest“ der im Movieclip „spielfigur“ enthalten ist.

gotoAndPlay("getroffen");

Diese Anweisung wird ausgeführt wenn die Bedingung in der if-Anweisung erfüllt ist. Es wird in das dritte Schlüsselbild gesprungen, dem wir den Namen „getroffen“ gegeben haben. Ab dort wird der Film weiter abgespielt.

if(this._y > 400){
   this.removeMovieClip();
}


Eine weitere If-Anweisung prüft ob die Y-Position der aktuellen Movieclips größer als 400 ist. Wenn dies der Fall ist wäre der Movieclip außerhalb der Bühne und wird durch this.removeMovieClip(); gelöscht.

hitTest() ist eine Methode des MovieClip-Objekts. Sie gibt true zurück, wenn sich der Movieclip und das angegebene Zielobjekt überschneiden. Für die Syntax gibt es zwei Möglichkeiten:

-> meinMovieclip.hitTest(ziel), wobei ziel den Zielpfad des Bereiches angibt, mit dem
     die Überschneidung geprüft werden soll.
-> meinMovieclip.hitTest(x, y, formkennzeichen), wobei x und y die Koordinaten des
    Kollisionsbereichs auf der Bühne angeben und der Parameter formkennzeichen
    (boolescher Wert) festlegt, ob die reale Form des Movieclips (true) oder nur seine
    Begrenzungsbox (false) verwendet werden soll.


Dem zweiten Schlüsselbild fügen sie folgende Zeile hinzu:

gotoAndPlay(1);

So erzeugen wir eine Schleife, indem wir von Bild 2 wieder ins Bild 1 springen. Lediglich wenn eine Kollision zwischen dem Movieclip „geschenk“ und dem Movieclip „hitTest“ eintritt gelangen wir ins dritte Schlüsselbild.

Das dritte Schlüsselbild versehen Sie mit folgendem Skript:

_root.punktestand = _root.punktestand + 10;
_root.punkteausgabe = _root.punktestand + " Punkte";


Pro gefangenes Päckchen erhält der Spieler 10 Punkte. Die Variable „punktestand“ wird um 10 erhöht, die Variable „punkteausgabe“ dient zur Formatierung der Ausgabe des Punktestandes.
Um dem Fangen eines Päckchens noch ein Geräusch hinzuzufügen markieren Sie Schlüsselbild 3 und ziehen den Sound „Book Drops“ aus der Elemente-Bibliothek auf die Bühne. Jetzt sollte im Eigenschafteninspektor als Ton: „Book Drops“ erscheinen.


Eigenschaften Bild 3 – Ton: „Book Drops“

Wurde ein Päckchen gefangen soll es natürlich von der Bühne verschwinden. Zu diesem Zweck fügen Sie in das letzte Schlüsselbild folgende Zeile ein:

this.removeMovieClip();

Durch diese Zeile wird die Instanz des aktuellen Movieclips gelöscht.

removeMovieClip() ist eine Methode des MovieClip-Objekts, die eine Movieclip Instanz entfernt. Sie funktioniert allerdings nur, wenn die Instanz des Movieclips mit attachMovie(), loadMovie() oder duplicateMovieClip() der Bühne hinzugefügt wurde.

In diesem Fall wird die Instanz durch attachMovie()erzeugt, dem wir uns jetzt zuwenden werden. Doch vorher schließen Sie den Symbolbearbeitungsmodus.

attachMovie( )

Um dem Movieclip mit attachMovie() auf die Bühne zu holen müssen Sie ihm einen eindeutigen Bezeichner geben. Wählen sie den Movieclip „geschenk“ in ihrer Bibliothek mit der rechten Maustaste aus und geben unter Verknüpfung… als Bezeichner „geschenk“ ein. Dazu müssen Sie einen Hacken vor „Export für ActionScript“ setzten, damit das Eingabefeld freigegeben wird.


Verknüpfungseigenschaften

Erstellen Sie nun einen neuen Movieclip mit dem Namen „dummy“. (Einfügen -> Neues Symbol, Verhalten: Movieclip) Lassen Sie den Movieclip leer und schließen Sie den Symbolbearbeitungsmodus wieder.
Ziehen Sie eine Instanz des Dummy-Movieclips im zweiten Bild auf die Bühne und geben Sie ihm im Eigenschafteninspektor den Namen „geschenk“. Fügen Sie ihm folgendes Skript hinzu:

onClipEvent(enterFrame){
anzahl=Math.round(Math.random()*30);
if(anzahl==1){
   zaehler++;
   _root.attachMovie("geschenk","geschenk"+zaehler, zaehler);
   setProperty("_root.geschenk"+zaehler,_x, Math.random()*500);
   setProperty("_root.geschenk"+zaehler,_rotation, Math.random()*360);
}
}


Erklärung:

anzahl=Math.round(Math.random()*30);

Durch Math.random() wird eine Zufallszahl zwischen 0 und 1 ermittelt. Diese wird mit 30 multipliziert und durch die Methode Math.round() auf einen ganzen Wert gerundet. Durch den Zahlenwert der multipliziert wird lässt sich die Anzahl der einzufangenden Elemente auf der Bühne erhöhen und verringern.

if(anzahl==1)

Wenn die ermittelte Zufallszahl 1 ist, dann wird der folgende Anweisungsblock ausgeführt.

zaehler++;

Ein Zähler wird um 1 erhöht.

_root.attachMovie("geschenk","geschenk"+zaehler, zaehler);

Es wird eine Instanz des Movieclips „geschenk“ an die Hauptzeitleiste angehängt. Der Instanzname setzt sich aus „geschenk“ und der Zählervariablen zusammen. Die Stufe in die die Instanz geladen wird ergibt sich ebenfalls aus der Zählervariablen.
So entstehen neue Instanzen wie z.B. geschenk1, geschenk2…
Durch die verschiedenen Stufen wird verhindert, dass eine Instanz eine andere überschreibt.

setProperty("_root.geschenk"+zaehler,_x, Math.random()*500);

Die Elemente sollen zufällig über die gesamte Breite verstreut auftauchen.
"_root.geschenk"+zaehler bezeichnet den Instanznamen, der zweite Parameter bezeichnet die zu ändernde Eigenschaft, hier die X-Position. Der dritte Parameter ist der neue Wert für die X-Position, eine Zufallszahl zwischen 0 und 500 (Bühnenbreite).

setProperty("_root.geschenk"+zaehler,_rotation, Math.random()*360);

Diesmal ist _rotation (Drehung) die zu ändernde Eigenschaft und wird mit einer Zufallszahl zwischen 0 und 360 (Grad) belegt.

Nun sollten die Päckchen in zufälliger Anzahl über die Bühne verstreut und in verschiedenen Neigungen von oben nach unten fallen.

Punktestand

Den aktuellen Punktestand ermitteln wir schon im Movieclip „geschenk“ im Schlüsselbild „getroffen“, wir müssen ihn nur noch ausgeben.
Erstellen Sie im Bild 2 der Ebene Textfelder ein Schlüsselbild.
Fügen Sie ein Textfeld zur Anzeige der Punkte ein. Wählen Sie im Eigenschafteninspektor als Texttyp Dynamischer Text und geben Sie in das Feld Var: _root.punkteausgabe ein. Diese Variable wird dann im Textfeld ausgegeben.


Eigenschaften Textfeld

Start und Game Over

Jetzt fehlt uns noch ein Hintergrund. Markieren Sie das erste Schlüsselbild der Ebene Hintergrund und ziehen Sie den Hintergrund aus der Elemente-Bibliothek auf die Bühne, sodass er sie vollständig bedeckt. Fügen Sie ein weiteres Schlüsselbild im Bild 3 dieser Ebene ein.
Vervollständigen Sie den Code im Bild 1 der Ebene Skript durch die Anweisung
stop(); damit unser Spiel nicht gleich beginnt, wenn den Film gestartet wird.

Zum Starten des Spiels brauchen wir jetzt eine Schaltfläche. Erzeugen Sie eine neue Schaltfläche (Einfügen -> Neues Symbol, Verhalten: Schaltfläche) und nennen diese „start“. Im Symbolbearbeitungsmodus fügen Sie nun ein Schlüsselbild im Bild „Aktiv“ ein und zeichnen dort ein beliebiges Rechteck. Die restlichen drei Bilder bleiben leer, sodass eine unsichtbare Schaltfläche entsteht.

Nachdem Sie den Symbolbearbeitungsmodus verlassen haben, ziehen Sie eine Instanz der Schaltfläche im Bild 1 der Ebene Skript auf die Bühne. Die Schaltfläche wird jetzt halbtransparent dargestellt. Richten Sie nun die Schaltfläche so aus, dass die Bühne komplett bedeckt ist.
Wählen Sie die Schaltfläche aus und versehen Sie diese mit folgendem Skript:

on(release, keyPress "<Space>"){
gotoAndStop("spiel");
}


Wenn nun die Leertaste oder die unsichtbare Schaltfläche gedrückt wird springt der Film ins Bild „spiel“ und unser Spiel beginnt.

Timer

Damit unser Spiel auch ein Ende bekommt, soll eine Spielzeit von 30 Sekunden vorgegeben werden.
Fügen Sie im Bild 3 der Ebene Skript ein leeres Schlüsselbild ein und benennen Sie es mit „ende“.
Fügen Sie auch im Bild 3 der Ebene Textfelder ein Schlüsselbild ein, damit beim Spielende der Punktestand zu sehen ist.
Kopieren Sie die Start-Schaltfläche und fügen Sie diese ins Bild 3 der Ebene Skript ein.
Erstellen Sie im Bild 2 der Ebene Textfelder ein zweites dynamisches Textfeld und versehen Sie es mit der Variablen „_root.zeitausgabe“. In diesem Feld soll später die verbleibende Spielzeit ausgegeben werden.

Für den Timer ziehen Sie eine weitere Instanz der Dummy-Movieclips im Bild 2 auf die Bühne und vergeben den Instanznamen „zeitmesser“. Diese Instanz bekommt nun folgendes Skript:

onClipEvent(load){
gesamtZeit=30000+getTimer();
}
onClipEvent(enterFrame){
_root.zeit = int((gesamtZeit - getTimer())/1000);
_root.zeitausgabe = "noch " + _root.zeit + " sec";
if(_root.zeit==0){
   _root.gotoAndStop("ende");
}
}


Erklärung:

onClipEvent(load)

Die folgenden Anweisungen werden einmalig ausgeführt wenn der Movieclip geladen ist.

gesamtZeit=30000+getTimer();

Die Variable gesamtZeit wird definiert als 30000+getTimer() wobei getTimer() die Anzahl der Millisekunden zurückgibt, die seit Abspielbeginn vergangen sind.

onClipEvent(enterFrame)

Die folgenden Anweisungen werden jedes Mal ausgeführt, wenn das Bild abgespielt wird.

_root.zeit=int((gesamtZeit-getTimer())/1000);

Die vergangenen Millisekunden werden von der vorher bestimmten Gesamtzeit abgezogen. Der ermittelte Wert wird durch 1000 geteilt um Sekunden zu erhalten.

_root.zeitausgabe="noch "+_root.zeit+" sec";

Die Zeitausgabe wird formatiert.

if(_root.zeit==0){
   _root.gotoAndStop("ende");
}


Eine If-Anweisung prüft ob die Variable zeit==0 ist. Ist dies der Fall, springt der Film ins Bild „ende“.


Damit beim Begin eines neuen Spiels der Punktestand wieder bei 0 beginnt müssen Sie noch im zweiten Bild der Ebene Skript folgende Zeilen einfügen:

_root.punktestand = 0;
_root.punkteausgabe = _root.punktestand + " Punkte";


Jetzt sind alle Funktionen des Spiels komplett. Entwerfen Sie noch einen Start- und Endbildschirm oder verändern Sie das Spiel nach Ihren Vorstellungen.

  Download spiel_01.fla (35KB)

Ein einfaches Labyrinth-Spiel

Das Labyrinth

  ansehen

Zunächst brauchen wir ein Labyrinth. Hierzu bedienen wir uns einem Labyrinthgenerator aus dem Internet. Unter http://plink.sonic.net/mazegenerator/ können Sie sich ein Labyrinth beliebiger Größe und Schwierigkeitsstufe erstellen lassen. Für dieses Beispiel empfehle ich 50x50 Pixel. Speichern Sie das erhaltene GIF (rechte Maustaste -> Bild speichern unter…).

Öffnen Sie einen neuen Flash-Film mit einer Bildrate von 24 BpS , erzeugen Sie einen neuen Movieclip und nennen Sie diesen „labyrinth“. Im Symbolbearbeitungsmodus importieren (Datei -> Importieren) Sie nun die vorhin gespeicherte Grafik. Lassen Sie diese markiert und wählen Sie im Menü Modifizieren -> Bitmap nachzeichnen. Im folgenden Dialogfeld übernehmen Sie die Einstellungen aus der folgenden Abbildung  und bestätigen mit OK.


Einstellungen für Vektorisierung

Bei unserem Labyrinth handelt es sich jetzt um eine Vektorgrafik. Markieren Sie jetzt nur den weißen Bereich im Labyrinth und entfernen Sie diesen ([Entf]-Taste).
Verlassen Sie den Symbolbearbeitungsmodus.

Benennen Sie die bereits vorhandene Ebene in „Labyrinth“ um und ziehen Sie den erstellten Movieclip auf die Bühne. Diesen skalieren (Modifizieren -> Transformieren
-> Skalieren) Sie nun so, dass von der Bühne noch ein Rand zu sehen ist.

Die Spielfigur

Erstellen Sie eine neue Ebene namens „Figur“. Zeichnen Sie als Spielfigur ein kleines Quadrat und wandeln Sie dieses in einen Movieclip um (Einfügen -> In Symbol konvertieren, Verhalten: Movieclip, Name: figur). Geben Sie der Instanz dieses Movieclips den Instanznamen „figur“ und skalieren (Modifizieren -> Transformieren
-> Skalieren) Sie diese so, dass sie in die Gänge des Labyrinths passt.

Tastatursteuerung, Kollisionskontrolle und Timer

Markieren Sie das Labyrinth auf der Bühne und geben Sie im Aktionen-Fenster folgendes Skript ein:

onClipEvent(load){
gesamtZeit=120000+getTimer();
}

onClipEvent(enterFrame){

//Timer
_root.zeit = int((gesamtZeit - getTimer()) / 1000);
_root.zeitausgabe = "Noch " + _root.zeit + " Sekunden";
if(_root.zeit == 0){
   _root.gotoAndStop("abgelaufen");
}

//Tastatursteuerung
with(_root.figur){
   if(Key.isDown(Key.DOWN)){
      _y += 1;
   }
   else if(Key.isDown(Key.UP)){
      _y -= 1;
   }
   else if(Key.isDown(Key.RIGHT)){
      _x += 1;
   }
   else if(Key.isDown(Key.LEFT)){
     _x -= 1;
   }

//Kollisionsabfrage
   if(this.hitTest(getBounds(_root).xMax, _y, true)){
      _x -= 1;
   }
   if(this.hitTest(getBounds(_root).xMin, _y, true)){
      _x += 1;
   }
   if(this.hitTest(_x, getBounds(_root).yMax, true)){
      _y -= 1;
   }
   if(this.hitTest(_x, getBounds(_root).yMin, true)){
      _y += 1;
   }
}
}


Erklärung:

Der Timer und die Tastatursteuerung funktionieren wie im ersten Beispiel, deshalb sind die Erklärungen etwas kürzer gefasst.

onClipEvent(load){
gesamtZeit=120000+getTimer();
}


Die Variable gesamtZeit wird einmalig definiert wenn der Movieclip geladen wurde.

onClipEvent(enterFrame){

//Timer
_root.zeit=int((gesamtZeit-getTimer())/1000);
_root.zeitausgabe="Noch "+_root.zeit+" Sekunden";
if(_root.zeit==0){
   _root.gotoAndStop("abgelaufen");
}


Die Variablen „zeit“ und „zeitausgabe“ werden bestimmt und wenn zeit == 0 ist wird ins Bild „abgelaufen“ gesprungen. Um dieses Bild kümmern wir uns allerdings erst später.

//Tastatursteuerung
with(_root.figur){
if(Key.isDown(Key.DOWN)){
   _y+=1;
}
else if(Key.isDown(Key.UP)){
   _y-=1;
}
else if(Key.isDown(Key.RIGHT)){
   _x+=1;
}
else if(Key.isDown(Key.LEFT)){
   _x-=1;
}


In vier If-Anweisungen wird geprüft, welche der Pfeil-Tasten gedrückt wurde. Entsprechend dem Ergebnis wird entweder die X- oder die Y-Koordinate der Instanz „figur“ um 1 verringert oder erhöht.

//Kollisionsabfrage
if(this.hitTest(getBounds(_root).xMax,_y,true)){
   _x-=1;
}
if(this.hitTest(getBounds(_root).xMin,_y,true)){
   _x+=1;
}
if(this.hitTest(_x,getBounds(_root).yMax,true)){
   _y-=1;
}
if(this.hitTest(_x,getBounds(_root).yMin,true)){
   _y+=1;
}
}
}


Bei dieser Kollisionsabfrage wird folgende Syntax der hitTest()-Methode verwendet: meinMovieclip.hitTest(x, y, formkennzeichen)
this entspricht dem Labyrinth-Movieclip, die X- und Y-Koordinaten entsprechen denen der Instanz „figur“ und formkennzeichen ist true, sodass die reale Form des Labyrinths als Kollisionsbereich dient.

getBounds() ist eine Methode des Movieclip-Objekts, die den jeweils kleinsten und größten Wert für die X- und Y-Koordinaten eines Movieclips in einem bestimmten Koordinatensystem zurückgibt.

Syntax:

meinMovieclip.getBounds(zielkoordinatensystem)

Der Parameter Zielkoordinatensystem gibt den Zielpfad der Zeitleiste an, deren Koordinatensystem Sie als Bezugspunkt verwenden möchten. Die Methode gibt die Eigenschaften xMin, xMax, yMin und yMax zurück, auf die Sie wie folgt zugreifen können:

clipBounds = clip.getBounds(_root);
clip2._x = clipBounds.xMax;

oder :

clip2._x = clip.getBounds(_root).xMax;


Start und Ziel

Erstellen Sie eine neue Ebene und nennen Sie diese “Meldung”. Fügen Sie im zweiten und dritten Bild jeweils ein Schlüsselbild ein und benennen Sie das zweite „geschafft“ und das dritte „abgelaufen“. Das Bild „geschafft“ bekommt der Spieler zu sehen, wenn er das Labyrinth in der vorgegebenen Zeit durchquert hat und das Bild „abgelaufen“ wenn die Zeit vorüber ist. Gestalten Sie in den beiden Bildern entsprechende Meldungen. Verwenden Sie möglichst die Geräteschrift _sans, da wir später die Qualität unseres Films herunter setzten wollen, damit er nur wenig Speicherplatz benötigt und schnell lädt.
Erzeugen Sie eine neue Ebene namens „Neustart“ und fügen Sie in die Bilder 2 und 3 ein Schlüsselbild ein. Erstellen Sie eine unsichtbare Schaltfläche (wie im ersten Spiel beschrieben) und ziehen Sie diese im zweiten und dritten Schlüsselbild der Ebene „Neustart“ auf die Bühne, sodass diese vollständig bedeckt ist. Geben Sie der Schaltfläche folgendes Skript:

on(release, keyPress "<Enter>"){
gotoAndStop(1);
}


So beginnt das Spiel von vorn beim Drücken der Schaltfläche oder der [Enter]-Taste.
Fügen Sie nun in den Bildern 2 und 3 der „Labyrinth“-Ebene ein Schlüsselbild ein.
In beiden Schlüsselbildern teilen Sie den Movieclip (Modifizieren -> Teilen), damit er zu einen einfachen Zeichnungselement wird. Dadurch geht für diese zwei Bilder auch das Movieclip-Skript verloren, womit die Spielfigur stehen bleibt.
Geben Sie dem Labyrinth in diesen beiden Bildern eine hellgraue Füllung, damit es nur schwach im Hintergrund zu sehen ist. Verlängern Sie die Ebene „Figur“ indem Sie im Bild 3 ein Schlüsselbild einfügen, damit die Spielfigur bei Spielende nicht verschwindet.
Zudem brauchen wir noch eine Ebene namens „Skript“ mit ebenfalls drei Schlüsselbildern. In alle drei Bilder muss eine stop();-Anweisung, damit der Film nicht weiterläuft. Außerdem muss im ersten Schlüsselbild der Ebene „Skript“ die Position der Spielfigur festgelegt werden, damit sie sich nach einem Neustart wieder am Eingang des Labyrinthes befindet.

figur._x = 82;
figur._y = 187;


Die Werte die Sie hier angeben müssen entnehmen Sie dem Eigenschafteninspektor des Movieclips „figur“.

Jetzt hat unser Spiel zwar ein Ende wenn die Zeit abläuft, allerdings noch nicht wenn wir das Labyrinth durchquert haben. Dazu benötigen wir eine weitere Ebene, die Sie „Pfeile“ nennen. Am Eingang und am Ausgang des Labyrinths soll jeweils ein Pfeil positioniert werden. Diese Pfeile dienen zum einen dem besseren Überblick, zum anderen können wir sie zur Kollisionsabfrage nutzen. Erstellen Sie also zwei Movieclips, einen als Startpfeil und einen als Zielpfeil, und ziehen Sie beide im Bild 1 der Ebene „Pfeile“ auf die Bühne.


Screenshot Labyrinth-Spiel

Der Startpfeil bekommt folgendes Skript:

onClipEvent(enterFrame){
if(this.hitTest(_root.figur)){
   _root.figur._x = _root.figur._x + 1;
}
}


Sobald die Spielfigur den Startpfeil berührt wird die X-Koordinate um eins erhöht. So kann die Spielfigur das Labyrinth nicht verlassen.

Das Skript des Zielpfeils sieht folgendermaßen aus:

onClipEvent(enterFrame){
if(this.hitTest(_root.figur)){
   _root.gotoAndStop("geschafft");
}
}


Wenn die Spielfigur diesen Pfeil berührt ist Sie am Ziel angekommen und der Film springt ins Bild „geschafft“. Dort hatten Sie die Erfolgsmeldung ja schon vorbereitet.

In einer weiteren Ebene („Textfelder“) können Sie ein dynamisches Textfeld erzeugen, in welchem durch die Variable _root.zeitausgabe die noch verbleibende Zeit ausgegeben wird.

Da wir im ganzen Spiel nur einfache Formen und Schriften verwendet haben können wir nun noch ohne Verluste die Qualität herabsetzen. Fügen Sie den Skript im ersten Schlüsselbild der Ebene „Skript“ folgende Zeile hinzu:

_quality="LOW";

Damit haben Sie Ihr erstes Labyrinth-Spiel fertiggestellt.

  Download spiel_02.fla (7KB)

Pacman

Im Unterschied zum vorhergehenden Spiel ist dieses ein Labyrinth mit Gegnern. Aus diesem Grund sollte das Labyrinth sehr einfach sein und Möglichkeiten bieten den Gegnern zu entkommen.

  ansehen


Einfache Variante von „Pacman“

Vorbereitung

Erstellen Sie einen neuen Film der Größe 550x400 Pixel und einer Bildrate von 24 Bildern pro Sekunde. Als Hintergrundfarbe wählen Sie am Besten ein dunkles Grau.


Hintergrundfarbe einstellen

Um die vorgegebenen Objekte zu nutzen öffnen Sie die Datei „elemente_03.fla“ als Bibliothek. (Datei -> Als Bibliothek öffnen)

  Download elemente_03.fla (18KB)

Wir benötigen 7 Ebenen, die Sie folgendermaßen benennen:

-> Skript
-> Spielfigur
-> Monster
-> Punkte
-> Text
-> Labyrinth
-> Wendepunkte

Die Spielfigur und deren Steuerung

Zuerst ziehen Sie den Movieclip „labyrinth“ aus der Elemente-Bibliothek in der Ebene „Labyrinth“ auf die Bühne. Positionieren Sie das Labyrinth so, dass noch Platz für die Ausgabe der Zeit und der Punkte bleibt.
Den Movieclip „spielfigur“ ziehen Sie in der Ebene „Spielfigur“ auf die Bühne und positionieren ihn in einer Ecke des Labyrinths. Skalieren Sie die Instanz auf 25x25 Pixel.
Geben Sie der Spielfigur den Instanznamen „pacman“ und dem Labyrinth den Instanznamen „labyrinth“.

Das Skript für die Tastatursteuerung der Spielfigur bringen wir im Labyrinth-Movieclip unter. Markieren Sie das Labyrinth auf der Bühne und geben Sie im Aktionen-Fenster folgenden Code ein:

onClipEvent(enterFrame){

with(_root.pacman){

//Tastatursteuerung
   if(Key.isDown(Key.DOWN)){
      _y += 4;
      _rotation = 90;
   }
   if(Key.isDown(Key.UP)){
      _y -= 4;
      _rotation = 270;
   }
   if(Key.isDown(Key.RIGHT)){
      _x += 4;
      _rotation = 0;
   }
   if(Key.isDown(Key.LEFT)){
      _x -= 4;
      _rotation = 180;
   }
}
}


Dieses Skript sollte Ihnen mittlerweile bekannt vorkommen. Es wird jedes Mal ausgeführt, wenn der Movieclip abgespielt wird. Bei unserer Bildrate von 24 BpS ist das 24 Mal in einer Sekunde. Durch die Anweisung with(_root.pacman) beziehen sich die Eigenschaften die danach geändert werden alle auf die Instanz „pacman“ des Movieclips „spielfigur“. In den vier If-Anweisungen wird ermittelt, welche der vier Pfeiltasten gedrückt wird. Je nach dem welche Taste gedrückt wurde wird die Instanz „pacman“ um vier Pixel auf der X- bzw. Y-Achse verschoben und durch die Movieclip-Eigenschaft _rotation in Bewegungsrichtung gedreht. Die Zahlenangaben für die Eigenschaft _rotation sind in Grad (°) und beziehen sich auf den Ausgangszustand des Movieclips so wie er in der Bibliothek abgelegt ist. Die Drehung erfolgt im Uhrzeigersinn.

Kollision mit dem Labyrinth

Auch dieses Skript ist Ihnen nicht neu. Fügen Sie es unter die Tastatursteuerung im Labyrinth-Movieclip ein. Achten Sie darauf, dass es sich noch innerhalb der with()-Anweisung befindet!

//Kollisionsabfrage Wände
if(this.hitTest(getBounds(_root).xMax, _y, true)){
   _x -= 4;
}
if(this.hitTest(getBounds(_root).xMin, _y, true)){
   _x += 4;
}
if(this.hitTest(_x, getBounds(_root).yMax, true)){
   _y -= 4;
}
if(this.hitTest(_x, getBounds(_root).yMin, true)){
   _y += 4;
}


Bei dieser Kollisionsabfrage wird geprüft ob die Instanz „pacman“ mit dem Labyrinth zusammenstößt.
„this“ entspricht dem Labyrinth-Movieclip, die X- und Y-Koordinaten der Instanz „pacman“ werden über getBounds() und die Eigenschaften _x bzw. _y des Movieclips ermittelt. Formkennzeichen ist true, sodass die reale Form des Labyrinths als Kollisionsbereich dient. Jedes Mal wenn die Spielfigur nun auf eine Labyrinthwand triff bewegt sie sich um vier Pixel in die entgegengesetzte Richtung.

Punkte einsammeln

Pacman soll auf seinem Weg durchs Labyrinth Punkte einsammeln. Erzeugen Sie einen neuen Movieclip und nennen Sie diesen „punkt“. Zeichnen Sie in diesem Movieclip einen Kreis der ca. 10x10 Pixel groß ist. Schließen Sie den Symbolbearbeitungsmodus und verteilen Sie beliebig viele Instanzen dieses Movieclips auf der Bühne. Achten Sie darauf, dass die Ebene „Punkte“ markiert ist. Es wird Ihnen leichter fallen die Punkte regelmäßig zu positionieren, wenn Sie die Funktion „Am Raster ausrichten“ einschalten. (Ansicht -> Raster -> Raster einblenden, Ansicht -> Raster -> Am Raster ausrichten)
Geben Sie nun jedem einzelnen Punkt auf der Bühne einen eigenen Instanznamen. Der erste Punkt bekommt den Namen „futter1“, der zweite heißt „futter2“ usw. Der letzte Punkt trägt den Namen „futter79“, wobei es dazu 79 Punkte sein müssen.

Das Skript zum einsammeln der Punkte fügen wir ebenfalls dem Labyrinth-Movieclip hinzu. Wieder ist darauf zu achten, dass der Code innerhalb der with()-Anweisung eingefügt werden soll.

//Kollision mit "Futterpunkten"
for(i=1;i<80;i++){
if(hitTest(_root["futter"+i]) && _root["futter"+i]._visible==true){
   _root.plopp.Start();
   _root["futter"+i]._visible=false;
   _root.punkte+=1;
   _root.punktausgabe=_root.punkte+" Punkte";
}
}


Erklärung:

for(i=1;i<80;i++){

Eine for-Schleife mit der Zählervariablen i. Die folgenden Anweisungen werden ausgeführt wenn i kleiner als 80 ist, wobei i bei jedem Schleifendurchlauf um eins erhöht wird.

if(hitTest(_root["futter"+i]) &&
_root["futter"+i]._visible==true){


Eine If-Anweisung mit zwei und-Verknüpften Bedingungen. Es wird geprüft ob die Instanz „pacman“ mit einem Futterpunkt zusammengestoßen ist und ob dieser Punkt sichtbar ist. Der Instanzname des Futterpunktes wird dabei mittels eines Array-Zugriffsoperators angegeben. Der Instanzname wird aus dem String futter und der Zählervariablen i zusammengesetzt. So wird in 79 Schleifendurchläufen jeder Futterpunkt auf die Bedingung der If-Anweisung geprüft.
Sind beide Bedingungen wahr werden folgende Zeilen ausgeführt:

_root.plopp.Start();

Der Sound „plopp“ wird abgespielt.

_root["futter"+i]._visible=false;


Die aktuelle Instanz des Futterpunktes wird unsichtbar gesetzt.

_root.punkte+=1;

Die Variable „punkte“ wird um eins erhöht.

_root.punktausgabe=_root.punkte+" Punkte";


Die Punkteausgabe wird formatiert.

}
}


Um die Punkte und den Sound kümmern wir uns jetzt.
Ziehen Sie den Sound „Brick Drops“ aus der Elemente-Bibliothek im ersten Bild der Ebene „Skript“ auf die Bühne. Wenn Sie nun das erste Bild der Ebene „Skript“ markieren sollte im Eigenschafteninspektor als Ton „Brick Drops“ erscheinen.


Eigenschafteninspektor

Geben Sie dem Sound „Brick Drops“ in Ihrer Bibliothek den Bezeichner „plopp“. (rechte Maustaste auf dem Sound -> Verknüpfung… , Hacken vor Export für ActionScript)


Bezeichner vergeben

Im ersten Bild der Ebene Skript fügen Sie folgende Zeilen ein:

stop();
_root.punkte = 0;
_root.punktausgabe = _root.punkte + " Punkte";
plopp = new Sound();
plopp.attachSound("plopp");
_root.plopp.Stop();


Die ersten Zeilen sollten bekannt sein. Der Film wird gestoppt, die Punkte werden auf null gesetzt und die Punkteausgabe wird formatiert.
Danach wird mit den new-Konstruktor eine Instanz des Sound-Objekts erzeugt. Dieser Instanz wird mittels attachSound(„plopp“) der Sound mit dem Bezeichner „plopp“ hinzugeführt. Dieses Sound-Objekt ermöglicht es uns den Sound „plopp“ im Film zu steuern. Zunächst wird der Sound mit plopp.Stop() angehalten.
Durch dieses Objekt kann der Sound nun jedes Mal abgespielt werden, wenn pacman auf einen sichtbaren Punkt trifft.

Erstellen Sie nun noch ein dynamisches Textfeld, in dem Sie die Variable _root.punkteausgabe ausgeben.

Timer

In diesem Spiel wollen wir kein Zeitlimit vorgeben sondern die Sekunden seit Spielbeginn ausgeben. So kann sich der Spieler anhand der Zeit mit anderen Spielern messen.

Wählen Sie den Labyrinth-Movieclip auf der Bühne aus und fügen Sie im Aktionen-Fenster den folgenden Code ein.

Dieser Teil des Skripts soll ganz an den Anfang:

onClipEvent(load){
_root.zeit = 0;
_root.zeitausgabe = _root.zeit + " Sekunden";
}


Hier wird die Variable „zeit“ auf null gesetzt und die Zeitausgabe formatiert.

Diese Zeilen fügen Sie vor der letzten schließenden Klammer des enterFrame-Events ein:

//Timer
if(_root.punkte<79){
   sekunden++;
   if(sekunden == 24){
      _root.zeit += 1;
      sekunden = 1;
      _root.zeitausgabe = _root.zeit + " Sekunden";
   }
}
else{
   _root.gotoAndStop(10);
}


In diesem Fall nutzen wir nicht die Funktion getTimer().
Zuerst wird geprüft ob die Anzahl der Punkte kleiner als 79 ist. Da wir für jeden Futterpunkt einen Punkt vergeben, können wir davon ausgehen, dass das Spiel erst zuende ist wenn die Anzahl der Punkte der Anzahl der Futterpunkte entspricht. Ist das nicht der Fall, wird die Variable „sekunden“ um eins erhöht. In der folgenden If-Anweisung wird geprüft ob die Variable „sekunden“ 24 ist. Ist die Bedingung wahr, wird die Variable „zeit“ um eins erhöht und die Variable „sekunden“ wieder auf 1 gesetzt. Danach wird die Zeitausgabe neu formatiert. Diese Methode ist möglich weil uns bekannt ist, dass das Skript genau 24 Mal pro Sekunde ausgeführt wird. Die Variable „sekunden“ wird also 24 Mal pro Sekunde erhöht und wenn sie den Wert 24 erreicht ist eine Sekunde vergangen.
Ist die Bedingung der ersten If-Anweisung falsch, wird nur der else-Zweig ausgeführt, bei dem der Film ins Bild 10 springt.

Erzeugen Sie nun ein dynamisches Textfeld für die Variable „_root.zeitausgabe“ und erstellen Sie im Bild 10 eine Meldung an den Spieler, dass er gewonnen hat.
Das Textfeld und die Meldung bringen Sie bitte in der Ebene „Text“ unter. Erstellen Sie in diesem Bild ebenfalls eine Schaltfläche zum neustarten.
Der Code für die Schaltfläche ist folgender:

on(release){
gotoAndStop(1);
}



Erfolgsmeldung

Die Monster

Auch der Moster-Movieclip ist schon vorbereitet. Ziehen Sie ihn aus der Elemente-Bibliothek auf die Bühne. Dabei sollte Bild 1 der Ebene „Monster“ markiert sein. Skalieren Sie die Instanz auf 15x20 Pixel und platzieren Sie sie im Labyrinth. Lassen Sie die Instanz ausgewählt und öffnen Sie das Aktionen-Fenster. Geben Sie hier die folgenden Zeilen ein:

onClipEvent(load){
xGeschwindigkeit=4;
yGeschwindigkeit=0;
}


Wenn der Movieclip geladen ist werden die Variablen „xGeschwindigkeit“ und „yGeschwindigkeit“ gesetzt. Wozu diese beiden Variablen dienen sehen Sie im nächsten Skript. Aber vorher kopieren Sie die Instanz des Movieclips „monster“ und fügen diese an einer anderen Stelle im Labyrinth ein. Kopieren Sie das Monster noch zwei Mal, sodass sich nun vier Monster im Labyrinth befinden. Alle Monster sollten sich in der Ebene „Monster“ befinden. Doppelklicken Sie eines der Monster um in den Symbolbearbeitungsmodus zu gelangen.
Zuerst erzeugen wir eine Schleife innerhalb des Movieclips. Fügen Sie in Bild 2 ein Schlüsselbild ein, und belegen es mit folgender Zeile:

gotoAndPlay(1);

So wird von Bild 2 immer wieder ins Bild 1 gesprungen.
Bild 1 belegen Sie mit folgendem Skript:

_x = _x + xGeschwindigkeit;
_y = _y + yGeschwindigkeit;


//Kollisionsabfrage
if(_root.labyrinth.hitTest(getBounds(_root).xMax, _y, true)){
   _x = _x - 55;
   xGeschwindigkeit = xGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(getBounds(_root).xMin, _y, true)){
   _x = _x + 55;
   xGeschwindigkeit = xGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(_x, getBounds(_root).yMin, true)){
   _y = _y + 55;
   yGeschwindigkeit = yGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(_x,getBounds(_root).yMax, true)){
   _y = _y - 55;
   yGeschwindigkeit = yGeschwindigkeit * -1;
}

Erklärung:

_x = _x + xGeschwindigkeit;
_y = _y + yGeschwindigkeit;

Die Eigenschaften _x und _y des Movieclips stehen für seine X- und Y-Koordinaten. Diese werden neu berechnet, indem zum aktuellen Wert die Variablen „xGeschwindigkeit“ bzw. „yGeschwindigkeit“ hinzuaddiert werden.
Das passiert jedes Mal wenn Bild 1 betreten wird, sodass sich der Movieclip kontinuierlich bewegt.

//Kollisionsabfrage
if(_root.labyrinth.hitTest(getBounds(_root).xMax, _y, true)){
   _x = _x - 55;
   xGeschwindigkeit = xGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(getBounds(_root).xMin, _y, true)){
   _x = _x + 55;
   xGeschwindigkeit = xGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(_x, getBounds(_root).yMin, true)){
   _y = _y + 55;
   yGeschwindigkeit = yGeschwindigkeit * -1;
}
if(_root.labyrinth.hitTest(_x,getBounds(_root).yMax, true)){
   _y = _y - 55;
   yGeschwindigkeit = yGeschwindigkeit * -1;
}

Die Kollisionsabfrage ist die gleiche wie beim Pacman. Wenn ein Monster mit einer Mauer kollidiert, dann prallt es 55 Pixel von ihr ab und bewegt sich in die entgegengesetzte Richtung weiter. Die Zahl der Pixel ist so hoch gewählt, damit das Monster nicht gleich nach dem Abprallen in einem Wendepunkt landet. Um diese Wendepunkte kümmern wir uns später. Verlassen Sie zunächst den Symbolbearbeitungsmodus.

Geben Sie den Monstern im Eigenschafteninspektor die Instanznamen „gegner1“, „gegner2“, „gegner3“ und „gegner4“. Öffnen Sie nun das Skript des Labyrinth-Movieclips und fügen Sie noch innerhalb der with()-Anweisung folgende Zeilen ein:

//Kollision mit Monstern
for (i=1;i<5;i++){
   if(hitTest(_root["gegner"+i])==true){
      _root.gotoAndPlay(20);
   }
}


Es wird geprüft, ob die Instanz „pacman“ mit einem der Gegner kollidiert ist. Das ganze läuft wieder in einer for-Schleife ab und der Zugriff auf die Instanzen „gegner1“ bis „gegner4“ erfolgt wieder über ein Array. Ist die If-Bedingung wahr, wird ins Bild 20 gesprungen und das Spiel ist verloren.
Fügen Sie im Bild 20 der Ebene „Text“ ein Schlüsselbild ein und gestalten Sie die Meldung für das verlorene Spiel. Vergessen Sie nicht auch hier eine Schaltfläche zum neustarten einzufügen. Versehen Sie das Bild 10 und das Bild 20 mit einer stop()-Anweisung, damit der Film in diesen Bildern anhält.


Spielende

Der Zufall

Kommen wir nun zu unseren Wendepunkten. An diesen Stellen soll das Monster zufällig die Richtung wechseln.
Erzeugen Sie einen neuen Movieclip mit dem Namen „wendepunkt“ und zeichnen Sie einen Kreis der Größe 6x6 Pixel. Fügen Sie in Bild 2 ein Schlüsselbild ein. Geben Sie dem ersten Schlüsselbild folgendes Skript:

this._visible = false;
for(i=1;i<=4;i++){
   if(this.hitTest(_root["gegner"+i])){

//Zufallszahlen
      neueRichtung=Math.ceil(Math.random()*4);

//neue Richtung der Monster
      with(_root["gegner"+i]){

      if(neueRichtung==1){

//abstoßen
         _x = _x - 10;

//geraderichten
         _y = this. _y;

//bewegen
         xGeschwindigkeit = -4;
         yGeschwindigkeit = 0;
      }

      if(neueRichtung==2){
//abstoßen
         _x=_x+10;
//geraderichten
         _y=this._y;
//bewegen
         xGeschwindigkeit=4;
         yGeschwindigkeit=0;
      }

      if(neueRichtung==3){
//abstoßen
         _y=_y-10;
//geraderichten
         _x=this._x;
//bewegen
         xGeschwindigkeit=0;
         yGeschwindigkeit=-4;
      }

      if(neueRichtung==4){
//abstoßen
         _y=_y+10;
//geraderichten
        _x=this._x;
//bewegen
         xGeschwindigkeit=0;
         yGeschwindigkeit=4;
     }

   }
}
}
gotoAndPlay(2);

Eklärung:

this._visible = false;

Die Wendepunkte werden unsichtbar gesetzt.

for(i=1;i<=4;i++){

Eine for-Schleife mit der Zählervariablen i,die bei jedem Schleifendurchlauf um eins erhöht wird. Die folgenden Anweisungen werden ausgeführt, solange i kleiner als 4 ist.

if(this.hitTest(_root["gegner"+i])){

Diese If-Anweisung prüft, ob der Wendepunkt mit einem der Monster zusammenstößt.

//Zufallszahlen
neueRichtung=Math.ceil(Math.random()*4);


Da jeder Wendepunkt vier mögliche Richtungen bietet wird hier eine Zufallszahl aus der Menge {1, 2, 3, 4} ermittelt. Math.random() ermittelt einen Zufallswert zwischen 0 und 1. Math.ceil() rundet immer auf die nächst höhere ganze Zahl.

//neue Richtung der Monster
with(_root["gegner"+i]){


Diese with()-Anweisung wird aufgrund des Arrays für jeden einzelnen Gegner abgearbeitet.

if(neueRichtung==1){


Die folgenden Zeilen werden ausgeführt für den Fall, dass die ermittelte Zufallszahl 1 ist.

//abstoßen
_x = _x - 10;


Das Monster bewegt sich um 10 Pixel nach links.

//geraderichten
_y = this. _y;


Das Monster wird mit dem Wendepunkt vertikal zentriert aneinander ausgerichtet.

//bewegen
xGeschwindigkeit = -4;
yGeschwindigkeit = 0;


Diese Variablen legen die Bewegungsgeschwindigkeit und die Bewegungsrichtung fest. In diesem Fall bewegt sich das Monster kontinuierlich um vier Pixel nach links.
}

Für die Fälle dass die ermittelte Zufallszahl 2, 3 oder 4 ist funktionieren die If-Anweisungen analog zur beschriebenen.

Nach dem alle Anweisungen abgearbeitet sind springt der Film ins Bild 2 und von dort aus beginnt der Film von vorn. Es ist wieder eine Schleife entstanden.

Schließen Sie nun den Symbolbearbeitungsmodus und verteilen einige Instanzen des Movieclips „wendepunkt“ auf der Bühne.
Wo Sie diese günstig positionieren sehen Sie in dieser Abbildung.


mögliche Positionen der Wendepunkte

Damit wäre unser Pacman-Spiel voll funktionsfähig. Testen Sie ihr Spiel, und verschieben Sie gegebenenfalls ein paar Wendepunkte um den Schwierigkeitsgrad zu variieren.

Zur besseren Übersicht finden Sie hier noch einmal das vollständige Skript für den Labyrinth-Movieclip:

onClipEvent(load){
_root.zeit=0;
_root.zeitausgabe=_root.zeit+" Sekunden";
}
onClipEvent(enterFrame){
with(_root.pacman){
//Tastatursteuerung
   if(Key.isDown(Key.DOWN)){
      _y +=4;
      _rotation=90;
   }
   if(Key.isDown(Key.UP)){
      _y -=4;
      _rotation=270;
   }
   if(Key.isDown(Key.RIGHT)){
      _x +=4;
      _rotation=0;
   }
   if(Key.isDown(Key.LEFT)){
      _x -=4;
      _rotation=180;
   }
//Kollisionsabfrage Wände
   if(this.hitTest(getBounds(_root).xMax,_y,true)){
      _x-=4;
   }
   if(this.hitTest(getBounds(_root).xMin,_y,true)){
      _x+=4;
   }
   if(this.hitTest(_x, getBounds(_root).yMax,true)){
      _y-=4;
   }
   if(this.hitTest(_x,getBounds(_root).yMin,true)){
      _y+=4;
   }
//Kollision mit "Futterpunkten"
   for(i=1;i<80;i++){
      if(hitTest(_root["futter"+i]) && _root["futter"+i]._visible==true){
         _root.plopp.Start();
         _root["futter"+i]._visible=false;
         _root.punkte+=1;
         _root.punktausgabe=_root.punkte+" Punkte";
      }
   }
//Kollision mit Monstern
   for (i=1;i<5;i++){
      if(hitTest(_root["gegner"+i])==true){
         _root.gotoAndPlay(20);
      }
   }
}
//Timer
if(_root.punkte<79){
   sekunden++;
   if(sekunden==24){
      _root.zeit+=1;
      sekunden=1;
      _root.zeitausgabe=_root.zeit+" Sekunden";
   }
}
else{
   _root.gotoAndStop(10);
}
}

  Download spiel_03.fla (24KB)


 

   
 
© Saskia Bretschneider - CT01w1