Anzeige
Tutorialbeschreibung

Reaktionsspiel

Reaktionsspiel

Ein grundlegendes Spieleprinzip wird am Beispiel eines einfachen Geschicklichkeitsspiels (Auffangen von Objekten) erläutert



Version: ab Flash MX

Niveau: Einsteiger

Vorkenntnisse: Flash (Symbole, Zeitleisten), Farbmischer, Grundlagen Actionscript (Math.random(), attachMovie(), Arrays, Schleifen)

Lernziele: ein häufig verwendetes Spieleprinzip kennen lernen, Kollisionsabfrage kennen lernen, Timer kennen lernen

Eines der am häufigsten verwendeten Spieleprinzipien besteht im Auffangen von Objekten, die vom oberen Screenrand herunterfallen. Ob nun Hühner auf einer Stange sitzen und Eier legen, die der Spieler auffangen muß, ob Bonusobjekte von einem Raumschiff eingesammelt werden müssen, ob ein kleines Männchen Schneebälle fangen muß – das dahinter liegende Spieleprinzip ist immer gleich: am oberen Bildschirmrand werden zufallsbedingt Objekte eingeblendet, die sich mit einer Zufallsgeschwindigkeit nach unten bewegen. Aufgabe des Spielers ist es, diese Objekte zu sammeln, indem seine Spielfigur mit den Objekten kollidiert.

  1. Erstellen Sie einen neuen Film (800x600, weiß, 25 Bps).

Zunächst benötigen wir eine Spielfigur, z.B. einen Topf, der herunterfallende Eier aufsammelt.

  1. Nehmen Sie einen beliebigen Kochtopf (eine Pfanne tut’s auch), oder erstellen Sie einen, indem Sie ein 90 Pixel breites und 45 Pixel hohes Rechteck zeichnen.
  2. Als Füllung verwenden Sie einen linearen Farbverlauf von Weiß nach Blau.
  3. Mit dem Auswahlwerkzeug verbiegen Sie die obere Linie des Rechtecks leicht nach unten wie auf folgender Grafik gezeigt:

Bilder

  1. Kopieren Sie die gebogene Linie mit <strg><c> und fügen sie an derselben Stelle wieder ein mit <strg><shift><v>.
  2. Spiegeln Sie die Kopie über das Menü Modifizieren – Transformieren – Vertikal spiegeln.
  3. Verschieben Sie die gespiegelte Linie mit den Pfeiltasten soweit nach oben, daß sie zusammen mit der zuerst gebogenen Linie ein Oval bildet:

Bilder
 

Dieses Oval stellt die Öffnung unseres Topfes dar.

  1. Weisen Sie dem Oval eine hellblaue Füllung ohne Farbverlauf zu.
  2. Verbiegen Sie auch den unteren Rand des Topfes.

Am oberen rechten und oberen linken Rand wollen wir noch zwei Rechtecke als Henkel hinzufügen.

  1. Erstellen Sie dazu ein neues Rechteck (20x8, graue Füllung) mit abgerundeten Kanten. Um Kanten abzurunden, drücken Sie während des Zeichnens mit dem Rechtweckwerkzeug mehrfach die Pfeiltaste unten (abwärts gerichteter Pfeil).
  2. Verwandeln Sie das Rechteck in einen MovieClip („mc_henkel“, Registerierungspunkt mittig).
  3. Verschieben Sie es in die linke obere Ecke des Topfes.
  4. Weisen Sie dem Henkel mit Hilfe des Frei Transformieren-Werkzeugs (alternativ: Drehen und Neigen in der Standardsymbolleiste) eine leichte Drehung zu wie auf folgender Grafik:

Bilder

  1. Für den zweiten Henkel kopieren Sie den ersten mit <strg><c> und fügen ihn an derselben Stelle mit <strg><shift><v> wieder ein. Auf diese Weise erhalten wir direkt den korrekten y-Wert für den zweiten Henkel.
  2. Wie zuvor bei der gebogenen Linie spiegeln Sie den kopierten Henkel, allerdings diesmal in horizontaler Richtung.
  3. Verschieben Sie ihn noch nach rechts.
  4. Wenn Sie wollen, können Sie noch die Eckpunkte der Topfunterkante etwas nach innen verschieben, so daß die Topfwand einen kunstvoll abgeschrägten Eindruck vermittelt – primstens!

Damit ergibt sich folgendes Prachtexemplar eines Topfes, das selbst IKEA vor Neid erblassen läßt:

Bilder

  1. Anschließend verwandeln Sie dieses Beispiel allerfeinster Handwerkskunst in einen MovieClip („mc_topf“, Instanzname „topf“, Registrierungspunkt mittig).

Als nächstes benötigen wir Eier zum Auffangen.

  1. Erstellen Sie eine Ellipse (24x40).
  2. Weisen Sie ihr einen weiß-blauen, radialen Farbverlauf zu. Stellen Sie dabei den Farbverlauf über den Farbmischer her, so daß wir später einfach wieder darauf zugreifen können.
  3. Verschieben Sie mit Hilfe des Füllungstransformationswerkzeugs den weißen Glanzpunkt nach links oben, um einen leichten räumlichen Eindruck zu erwecken. Klicken Sie dazu mit dem Werkzeug in die Füllung. Damit das funktioniert, darf die Füllung vorher nicht ausgewählt sein. Mit dem angezeigten nichtgefüllten Kreis können Sie den Mittelpunkt des Farbverlaufs verschieben.

Bilder

  1. Anschließend verformen Sie das Ei etwas, indem Sie mit Hilfe des Auswahlwerkzeugs sowohl die Unterkante wie auch die Oberkante jeweils leicht nach oben verschieben. Das resultierende Straußenei könnte beispielsweise so aussehen:

Bilder

  1. Verwandeln Sie es in einen MovieClip (Bibliotheks- und Verknüpfungsname „mc_ei1“, Registrierungspunkt mittig) und löschen es anschließend von der Bühne. Es wird später bei Bedarf mit Actionscript eingeblendet.
  2. Duplizieren Sie es in der Bibliothek insgesamt dreimal und weisen ihm als Namen eine fortlaufende Nummer zu (jeweils Bibliotheks- und Verknüpfungsname „mc_ei2“ bis „mc_ei4“).
  3. Öffnen Sie die Duplikate im Symbolbearbeitungsmodus durch Doppelklick auf ihr Icon in der Bibliothek.
  4. Ändern Sie jeweils den Farbverlauf mit Hilfe des Farbmischer-Bedienfelds.

Bilder

  1. Ändern Sie den Namen der Ebene, in der sich der Topf auf der Hauptzeitleiste befindet, um in „spieler“.
  2. Fügen Sie eine neue Ebene namens „actions“ hinzu.
  3. Verschieben Sie den Topf auf die Position x = 400 und y = 480.
  4. Ändern Sie die Hintergrundfarbe des Films auf schwarz. Wir haben zuerst mit einem weißen Hintergrund gearbeitet, um so einfacher die einzelnen Objekte zu erstellen.

Damit sind alle Vorbereitungen getroffen und wir können mit dem Skripting beginnen.

Zuerst wollen wir den Topf mit der Maus steuern. Der Einfachheit halber verwenden wir die gesamte Bildschirmbreite als Spielfeld.

  1. Erstellen Sie in Frame 1 der Ebene „actions“ folgendes Skript:

topf.onPress = function(){
   Mouse.hide();
   topf._x = _root._xmouse;
   topf.onMouseMove = function() {
      this._x = _root._xmouse;
   };
}

Sobald man auf den Topf klickt, wird die Maus unsichtbar geschaltet und der Topf auf die x-Position der Maus gesetzt. Die y-Position verändern wir nicht, der Topf wird also lediglich in horizontaler Richtung bewegt. Dann weisen wir dem Topf ein MouseMove-Ereignis zu, das dafür sorgt, daß bei jeder Mausbewegung seine x-Position auf die x-Position der Maus gesetzt wird.

Für die Eier richten wir einen eigenen MovieClip als Behälter ein. Das bietet größere Flexibilität als wenn wir die Objekte direkt auf _root einfügen würden. Wollen wir z.B. die Position aller Eier auf einmal ändern, müssen wir nur den Behälter verschieben. Außerdem können wir alle Variablen, die sich auf das Fallen beziehen, diesem Behälter zuweisen. Werden Sie nicht mehr benötigt, löschen wir einfach den Behälter.

  1. Schreiben Sie daher innerhalb des onPress-Ereignisses vor der letzten, schließenden Klammer:

_root.createEmptyMovieClip("eier", 1);
eier.wieviel = 20;
eier.nr = 1;
eier.anzahl = 4;
eier.wahrsch = 5;
eier.tempo = 8;

Zunächst wird ein leerer MovieClip namens “eier” als Behälter für alle Objekte erzeugt. Die Variable wieviel legt die Gesamtanzahl der Eier fest, während anzahl definiert, weiviele verschiedene Eier es gibt. Sie erinnern sich: wir hatten vier verschiedenfarbige MovieClips für die Eier erstellt. Nr legt die für attachMovie notwendige Tiefe fest, auf der die jeweiligen Eier eingeblendet werden. Wir verwenden sie gleichzeitig auch für die Instanznamen, um sicherzustellen, daß jedes Objekt einen eindeutigen Instanznamen besitzt. Mit der Variablen wahrsch wird das Einblenden an einen Zufallswert gebunden. Die letzte Variable tempo wird verwendet, um das Mindesttempo für die Fallgeschwindigkeit zu definieren.

Da die gesamte Aktion durch den Mausklick auf den Topf – alternativ durch einen eigens erstellten Startbutton – ausgelöst wird, befinden sich diese und auch alle nachfolgenden Anweisungen innerhalb des onPress-Ereignisses.

Ein einsames Ei läßt sich einfach einblenden.

  1. Fügen Sie nach den Variablendefinitionen folgende Zeilen ein:

var welches = Math.ceil(Math.random()*eier.anzahl);
eier.attachMovie("mc_ei"+welches, "ei"+eier.nr+"_"+welches, eier.nr);
var obj = eier["ei"+eier.nr+"_"+welches];
obj._x = Math.ceil(Math.random()*699)+49;

Wenn Sie testen, wird ein Ei an einer zufälligen Position am oberen Bildschirmrand eingeblendet.

Die Variable welches enthält einen Zufallswert zwischen 1 und 4. Mit Hilfe dieser Zahl fügen wir dann eines der Eier, deren Verknüpfungsnamen ja „mc_ei1“ bis „mc_ei4“ lauten, ein. Beim Mausklick läßt sich nicht vorhersagen, welches Ei angezeigt wird, da welches jedesmal einen neuen Zufallswert erhält. Wenn Sie mehr Objekte verwenden wollen, dann müssen Sie dementsprechend lediglich die Variable eier.anzahl ändern.

Da der Instanzname des neu erzeugten Eis recht lang ist, speichern wir ihn in der lokalen Variablen obj. Die letzte Zeile schließlich weist ihm eine zufällige x-Position zwischen 50 und 650 zu. Wenn wir keine y-Position definieren, dann weist Flash automatisch 0 zu. Daher erscheint das Ei jeweils am oberen Bildschirmrand.

Die Bewegung des Eis macht noch einen ziemlich statischen Eindruck.

  1. Daher schreiben Sie nach den eben eingefügten Zeilen:

obj.tempo = Math.ceil(Math.random()*eier.tempo)+5;
   obj.onEnterFrame = function(){
   this._y += this.tempo;
}

Das ganze Skript sieht jetzt so aus:

Bilder

Beim Testen bewegt sich das eingeblendete Ei unaufhaltsam nach unten.

Dem Ei wird eine eigene tempo-Variable zugewiesen, die einen Zufallswert zwischen 8 und 13 enthält. Anschließend erhält es ein enterFrame-Ereignis, das für die Bewegung nach unten sorgt, indem zu seiner aktuellen y-Position permanent die zuvor berechnete tempo-Variable addiert wird.

Einmal auf den Weg gebracht, wird unser Ei allerdings endlos nach unten fallen.

  1. Ergänzen Sie daher das enterFrame-Ereignis des Eis nach der Zeile mit der Addition von this.tempo:

if(this._y > 600){
   this.removeMovieClip();
}
if(this.hitTest(topf)){
   trace("getroffen");
   this.removeMovieClip();
}

Beim Testen ereilt unser Ei ein jähes Ende, sobald seine y-Position größer als 600 ist, es also den unteren Screenrand erreicht hat. Dann benötigen wir es nicht mehr weiter und es wird einfach gelöscht. Nicht besser ergeht es ihm, wenn wir es beim Fallen mit dem Topf berühren. Dann erfolgt eine Kollision, d.h., die if-Abfrage, die mit hitTest nach einem Zusammenstoß mit dem MovieClip topf fragt, gibt true zurück. In dem Fall lassen wir uns im Nachrichtenfenster eine entsprechende Meldung ausgeben und löschen anschließend das Ei.

Die Methode hitTest() kontrolliert in der von uns verwendeten Schreibweise, ob sich das Begrenzungsrechteck des Objektes, dem die Methode zugeordnet ist – von der Schreibweise her ist damit der MovieClip gemeint, an den die Methode mit einem Punkt drangehängt wird -, mit dem Begrenzungsrechteck des Objekts, das in der runden Klammer genannt wird, überlappt. Unter Begrenzungsrechteck versteht man ein Rechteck, das ein Objekt vollständig umschließt. Es ist normalerweise unsichtbar, wird aber angezeigt, wenn man ein Objekt auf der Bühne markiert.

Bilder

Aus der Grafik wird zugleich ein entscheidender Nachteil der Methode, wie Flash Kollisionen feststellt, ersichtlich. Lediglich bei perfekten Rechtecken ist sie zuverlässig. Sobald die Objekte eine unregelmäßige oder eine runde Form besitzen, stellt hitTest() nur eine Näherung dar. Stellen Sie sich beispielsweise vor, Sie würden das orangene Ei um einige Pixel in horizontaler Richtung verschieben, gerade soweit, daß sich die Grafiken von Ei und Topf nicht mehr berühren. Dann würden wir zwar optisch keine Kollision mehr wahrnehmen, für Flash dagegen wäre sie gleichwohl vorhanden, da sich die Begrenzungsrechtecke weiterhin berühren würden – eine sehr unbefriedigende Situation, die Macromedia schon vor Jahren bei Director galant gelöst hat.

Die tatsächliche Form eines Objektes kann zwar auch mit hitTest() abgefragt werden, aber dann ist nur ein Kollisionstest mit einem einzelnen Punkt, nicht dagegen mit einem anderen Objekt möglich. Bei komplexeren Kollisionstests muß man sich daher mit einigen Tricks und workarounds behelfen.

Für unsere Zwecke reicht der bestehende hitTest() allerdings aus (puuh, noch mal Glück gehabt!).

Für die geleistete Arbeit erwartet man auch eine Belohnung.

  1. Daher fügen Sie direkt nach der Zuweisung des onPress-Ereignisses folgende Zeile ein:

punkte = 0;

  1. In den hitTest() fügen Sie vor die remove-Aktion folgende Zeilen ein:

punkte += 50;
trace(punkte);

Wenn der Topf jetzt mit einem Ei kollidiert, erhält der Spieler 50 Punkte, die in der Variablen punkte gespeichert und mit trace im Nachrichtenfenster ausgegeben werden. Mehr Punkte gibt es allerdings nicht, auch dann nicht, wenn mit einem erneuten Klick ein weiteres Ei erscheint – denn die Variable punkte wird ja dabei wieder mit dem Startwert 50 initialisiert.

Das Skript sieht jetzt so aus:

Bilder

Zugegeben, das ist schon ausgesprochen spannend: ein einzelnes Ei, das von oben herunterfällt! Spongebob Schwammkopf z.B. könnte damit einen ganzen Tag verbringen. Uns dagegen verlangt es nach mehr, also fügen wir weitere Eier ein.

Dazu sind einige Vorüberlegungen nötig:

Spielziel ist es, von einer fest vorgegebenen Anzahl an Eiern möglichst viele aufzufangen

Aus Ressourcengründen wollen wir nur mit einem einzigen enterFrame-Ereignis arbeiten anstatt jedem herabfallenden Ei ein eigenes zuzuweisen.

Gegenüber dem bisherigen Skript sind einige Änderungen notwendig. Bitte orientieren Sie sich an der vorhergehenden Abbildung mit der Zeilennummerierung.

  1. Um uns beim Verschieben einzelner Zeilen Fehler zu ersparen, wollen wir alle Zeilen von 14 bis einschließlich 30 löschen. Einiges werden wir zwar noch mal benötigen, aber wir schreiben es neu, da mehrfaches copy and paste entsprechend Murphys Law unweigerlich zu unerwünschten Ergebnissen führt.
  2. Fügen Sie vor der letzten schließenden Klammer folgende Zeilen ein:

eier.objekte = [];
eier.onEnterFrame = function() {
   this.zufall = Math.ceil(Math.random()*this.wahrsch);
   if (this.zufall == 1) {
      var welches = Math.ceil(Math.random()*eier.anzahl);
      eier.attachMovie("mc_ei"+welches, "ei"+eier.nr+"_"+welches, eier.nr);
      var obj = eier["ei"+eier.nr+"_"+welches];
      obj._x = Math.ceil(Math.random()*699)+49;
      obj.tempo = Math.ceil(Math.random()*eier.tempo)+5;
      this.objekte.push(obj);
      eier.nr++;
   }
for (e in this.objekte) {
      this.objekte[e]._y += this.objekte[e].tempo;
   }
};

Nicht erschrecken, da steckt ja schon einiges drin, was wir zuvor bereits verwendeten. Beim Testen werden jetzt in unregelmäßigen Abständen endlos Eier von oben herabregnen.

Zunächst wird objekte als leeres Array initialisiert. Es dient dazu, später die Instanznamen der eingeblendeten Eier aufzunehmen. Der Behälter eier erhält ein enterFrame-Ereignis, das prinzipiell zwei Funktionen übernimmt: erstens dient es dazu, eine Zufallszahl zu ermitteln, von der es abhängt, ob ein Ei eingeblendet wird oder nicht. Steuern können wir dies Zufallszahl mit Hilfe der bereits vorher eingerichteten Variablen wahrsch: je höher diese Zahl, desto niedriger ist die Wahrscheinlichkeit des Einblendens von Objekten. Beträgt sie beispielsweis 5, liegt die Chance bei 20% (1 aus 5 Fällen), denn nur, wenn die Zahl 1 ergibt, erfolgt attachMovie. Beträgt wahrsch dagegen 10, sinkt die Chance auf 10% (1 aus 10) etc. Die Zeilen, die für das Einblenden sorgen, sind identisch mit dem vorhergehenden Skript. Hier wird lediglich zusätzlich jeder Instanzname in ein Array eingetragen und die Variable nr inkrementiert, so daß beim nächsten Durchlauf auch wieder ein neues Ei eingeblendet werden kann. Ohne Inkrementieren würde jedes Ei auf der Ebene eier.nr, also 1, eingeblendet, und wir könnten immer nur ein einziges Ei sehen.

Zweitens sorgt das enterFrame-Ereignis für eine Bewegung der Objekte, indem es einfach alles, was sich innerhalb des Arrays objekte befindet, über eine for-Schleife ausliest und bewegt. Wichtig ist, daß dabei nicht eine allgemeine Variable tempo verwendet wird, sondern daß jedes Ei auf seine eigene tempo-Variable zugreift. So kann jedes Ei mit einer anderen Geschwindigkeit bewegt werden.

  1. Der Kollisionstest wiederum ist einfach. Schreiben Sie innerhalb der for-Schleife nach der Addition der tempo-Variablen:

if (this.objekte[e].hitTest(topf)) {
   punkte += 50;
   trace(punkte);
   this.objekte[e].removeMovieClip();
   this.objekte.splice(e, 1);
}

Vom Prinzip her entspricht es dem Kollisionstest, wie wir ihn bereits zuvor definiert hatten, nur daß wir jetzt jedes Objekt innerhalb des Arrays auf einen Zusammenstoß mit dem Topf testen müssen. Nach dem Löschen des Objektes mit der remove-Methode entfernen wir es mit splice aus dem Array, da es nicht mehr weiter benötigt wird.

  1. Ebenso einfach ist das Löschen der Objekte, wenn sie den unteren Rand erreichen. Schreiben Sie nach der eben erstellten if-Abfrage:

if (this.objekte[e]._y>600) {
   this.objekte[e].removeMovieClip();
   this.objekte.splice(e, 1);
}

Auch hier wird wie zuvor gelöscht, allerdings gilt die Bedingung nun korrespondierend zu unserem vorherigen hitTest für alle Objekte, die im Array eier.objekte erfasst sind.

  1. Es fehlt noch die Beschränkung auf eine gewisse Anzahl an Objekten. Ergänzen Sie daher das enterFrame-Ereignis wie folgt (Fettdruck):

if (this.nr<=this.wieviel) {
   this.zufall = Math.ceil(Math.random()*this.wahrsch);
   if (this.zufall == 1) {
      var welches = Math.ceil(Math.random()*eier.anzahl);
      eier.attachMovie("mc_ei"+welches, "ei"+eier.nr+"_"+welches, eier.nr);
      var obj = eier["ei"+eier.nr+"_"+welches];
      obj._x = Math.ceil(Math.random()*699)+49;
      obj.tempo = Math.ceil(Math.random()*eier.tempo)+5;
      this.objekte.push(obj);
      eier.nr++;
   }
}

Beim Testen taucht nur noch eine begrenzte Anzahl an Objekten auf. Sie hängt von der Höhe der Variable eier.wieviel ab. Da bei jedem Einblenden eier.nr inkrementiert wird, ist in unserem Beispiel nach 20 Eiern Schluß.

Wir können das Spiel etwas spannender gestalten, indem wir Punkte in Abhängigkeit des eingefangenen Eis vergeben, und für Eier, die uns entwischen, Punkte abziehen.

  1. Ergänzen und ändern Sie den hitTest folgendermaßen (Fettdruck):

if (this.objekte[e].hitTest(topf)) {
   var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
   punkte += Number(multi)*50;

   trace(punkte);
   this.objekte[e].removeMovieClip();
   this.objekte.splice(e, 1);
}

Wenn Sie jetzt bei einem Test Eier auffangen, erhalten Sie je nach Typ (nein, nicht Sie, sondern das aufgefangene Objekt ist gemeint!) verschiedene Punkte.

Bei einer Kollision wird das letzte Zeichen des Instanznamens extrahiert. Sie erinnern sich: beim attachMovie haben wir an dieser Stelle unsere Zufallszahl zwischen 1 und 4 gespeichert. Die zu addierenden Punkte ergeben sich dann aus einer Multiplikation dieser Zahl mit 50. Wenn beispielsweise das ei1 eingeblendet wird, erhält der Spieler 1 x 50 Punkte, bei dem ei4 dagegen 4 x 50 = 200 Punkte. Da die Variable multi aufgrund der Methode substring einen String, also Text, extrahiert, arbeiten wir bei der Addition in der folgenden Zeile mit einer temporären Typumwandlung in eine Number, also Zahl.

Ähnlich realisieren wir den Punkteabzug für den Fall, daß uns ein Ei entwischt.

  1. Erweitern Sie innerhalb der for-Schleife die if-Abfrage, die kontrolliert, ob das Ei den unteren Bühnenrand überschreitet (Fettdruck):

if (this.objekte[e]._y>600) {
   var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
   punkte -= Number(multi)*20;
   trace(punkte);

   this.objekte[e].removeMovieClip();
   this.objekte.splice(e, 1);
}

Verlassen die Eier den Screen, ermitteln wir wie bei der Kollision das letzte Zeichen und subtrahieren von der aktuellen Punktezahl ein Vielfaches von 20.

Da auf einer Webseite die trace-Anweisung ignoriert würde, lassen wir uns die Punkte in einem Textfeld anzeigen.

  1. Fügen Sie daher in der Hauptzeitleiste eine neue Ebene namens „o_punkte“ („o“ symbolisiert nicht einen Ausdruck leichten Erstaunens, sondern meint output) ein.
  2. Erstellen Sie in dieser Ebene ein dynamisches Textfeld (Instanzname ebenfalls „o_punkte“, beliebige Systemschriftart, 14, rot, fett, nicht auswählbar, linksbündig) in der linken oberen Ecke.
  3. Ersetzen Sie alle trace(punkte)-Anweisungen durch:

o_punkte.text = punkte + „ Punkte“;

Wenn Sie testen, werden die erworbenen Punkte in dem Textfeld angezeigt.

Last not least fehlt noch die Kontrolle, ob das Spiel zu Ende ist.

  1. Fügen Sie daher innerhalb der for-Schleife jeweils nach den beiden Zeilen, in denen die splice-Methode aufgerufen wird, folgendes ein:

if (this.objekte.length<1) {
   trace("habefertisch");
   delete topf.onMouseMove;
   Mouse.show();
}

Wenn Sie testen, wird sich Flash, sobald alle Eier verschwunden sind, mit einer entsprechenden Nachricht melden.

Die Kontrolle des Spielendes ist simpel: wenn das Array eier.objekte leer ist, gibt es keine Eier mehr, die noch zu bewegen sind, und das Spiel ist zu Ende. Wichtig ist die Stelle, an der die Kontrolle erfolgt: sie ist nur dann sinnvoll, wenn ein Ei gelöscht wurde. Anstelle des trabatonischen „habefertisch“ würden Sie in einem Spiel auf Ihrer Webseite natürlich den Programmcode einfügen, der bei Spielende aufgerufen werden soll. Mit dem delete-Befehl löschen wir das mouseMove-Ereignis, so daß der Topf nicht mehr von der Maus gesteuert wird. Anschließend blenden wir die Maus wieder ein.

Der gesamte Programmcode sieht jetzt wie folgt aus:

topf.onPress = function() {
   punkte = 0;
   Mouse.hide();
   topf._x = _root._xmouse;
   topf.onMouseMove = function() {
      this._x = _root._xmouse;
   };
   _root.createEmptyMovieClip("eier", 1);
   eier.wieviel = 20;
   eier.nr = 1;
   eier.anzahl = 4;
   eier.wahrsch = 5;
   eier.tempo = 8;
   eier.objekte = [];
   eier.onEnterFrame = function() {
      if (this.nr<=this.wieviel) {
         this.zufall = Math.ceil(Math.random()*this.wahrsch);
         if (this.zufall == 1) {
            var welches = Math.ceil(Math.random()*eier.anzahl);
            eier.attachMovie("mc_ei"+welches, "ei"+eier.nr+"_"+welches, eier.nr);
            var obj = eier["ei"+eier.nr+"_"+welches];
            obj._x = Math.ceil(Math.random()*699)+49;
            obj.tempo = Math.ceil(Math.random()*eier.tempo)+5;
            this.objekte.push(obj);
            eier.nr++;
         }
      }
      for (e in this.objekte) {
         this.objekte[e]._y += this.objekte[e].tempo;
         if (this.objekte[e].hitTest(topf)) {
            var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
            punkte += Number(multi)*50;
            o_punkte.text = punkte + " Punkte";
            this.objekte[e].removeMovieClip();
            this.objekte.splice(e, 1);
            if (this.objekte.length<1) {
               trace("fertisch");
               delete topf.onMouseMove;
               Mouse.show();
            }
         }
         if (this.objekte[e]._y>600) {
            var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
            punkte -= Number(multi)*20;
            o_punkte.text = punkte + " Punkte";
            this.objekte[e].removeMovieClip();
            this.objekte.splice(e, 1);
            if (this.objekte.length<1) {
               trace("fertisch");
               delete topf.onMouseMove;
               Mouse.show();
            }
         }
      }
   };
};

Anstelle einer vorgebenen Anzahl an Objekten kann man auch alternativ eine Zeitspanne angeben, innerhalb der möglichst viele Objekte einzusammeln sind.

Dazu sind folgende Änderungen notwendig:

  1. Fügen Sie unmittelbar vor das eier.onEnterFrame folgende Zeilen ein:

eier.dauer = 5000;
eier.beginn = getTimer();

Die Spieldauer legen wir auf 5000 Millisekunden fest. Sie können hier natürlich beliebige andere Werte verwenden. Anschließend speichern wir mit der Funktion getTimer() die aktuelle Zeit. Diese Funktion liest die Zeit, die seit Start des Players vergangen ist, in Millisekunden aus. Wir benötigen sie, um später nachschauen zu können, ob seit dem Klick auf den Topf, der ja unser Spiel startet, bereits mindestens 5000 Millisekunden vergangen sind.

  1. Unmittelbar nach eier.onEnterFrame fügen Sie ein:

if(getTimer()>=this.beginn + this.dauer){
   trace("habefertisch");
   eier.removeMovieClip();
   delete topf.onMouseMove;
   Mouse.show();
}

Bevor irgendetwas anderes im enterFrame ausgeführt wird, kontrollieren wir, ob die aktuelle Zeit größer oder gleich der Startzeit plus der Pausendauer ist. Nehmen wir an, das Spiel wurde zum Zeitpunkt 3000 Millisekunden gestartet. Dann müßte es enden, sobald die aktuelle Zeit 3000 + 5000 = 8000 Millisekunden beträgt. Und genau das kontrolliert die eben definierte if-Abfrage.

Ist sie wahr, dann erfolgt Trabatonis Vollzugsmeldung und der MovieClip eier wird gelöscht – was automatisch auch alle darin enthaltenen und noch eventuell in fröhlichem Flug befindlichen Eier ebenfalls verschwinden läßt. Wie zuvor werden dann das mouseMove-Ereignis gelöscht und die Maus wieder eingeblendet.

  1. Vor dem ultimativen Test bleibt noch eine Kleinigkeit zu tun: wir benötigen nun nicht mehr die Abfrage, ob bereits 20 Eier eingeblendet wurden, denn ihre Anzahl soll ja prinzipiell unbegrenzt sein. Löschen Sie daher in dem Skript die Definition der Variablen eier.wieviel sowie innerhalb des enterFrame die Abfrage if (this.nr<=this.wieviel) {. Vergessen Sie nicht, auch die zu dieser Abfrage gehörende schließende Klammer zu löschen. Sie befindet sich zwei Zeilen nach dem Inkrementieren von eier.nr.

Das resultierende Skript sieht so aus:

topf.onPress = function() {
   punkte = 0;
   Mouse.hide();
   topf._x = _root._xmouse;
   topf.onMouseMove = function() {
      this._x = _root._xmouse;
   };
   _root.createEmptyMovieClip("eier", 1);
   eier.nr = 1;
   eier.anzahl = 4;
   eier.wahrsch = 5;
   eier.tempo = 8;
   eier.objekte = [];
   eier.dauer = 5000;
   eier.beginn = getTimer();
   eier.onEnterFrame = function() {
      if (getTimer()>=this.beginn+this.dauer) {
         trace("habefertisch");
         eier.removeMovieClip();
         delete topf.onMouseMove;
         Mouse.show();
      }
      this.zufall = Math.ceil(Math.random()*this.wahrsch);
      if (this.zufall == 1) {
         var welches = Math.ceil(Math.random()*eier.anzahl);
         eier.attachMovie("mc_ei"+welches, "ei"+eier.nr+"_"+welches, eier.nr);
         var obj = eier["ei"+eier.nr+"_"+welches];
         obj._x = Math.ceil(Math.random()*699)+49;
         obj.tempo = Math.ceil(Math.random()*eier.tempo)+5;
         this.objekte.push(obj);
         eier.nr++;
      }
      for (e in this.objekte) {
         this.objekte[e]._y += this.objekte[e].tempo;
         if (this.objekte[e].hitTest(topf)) {
            var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
            punkte += Number(multi)*50;
            o_punkte.text = punkte+" Punkte";
            this.objekte[e].removeMovieClip();
            this.objekte.splice(e, 1);
            if (this.objekte.length<1) {
               trace("fertisch");
            }
         }
         if (this.objekte[e]._y>600) {
            var multi = this.objekte[e]._name.substring(this.objekte[e]._name.length-1);
            punkte -= Number(multi)*20;
            o_punkte.text = punkte+" Punkte";
            this.objekte[e].removeMovieClip();
            this.objekte.splice(e, 1);
            if (this.objekte.length<1) {
               trace("fertisch");
            }
         }
      }
   };
};


DVD-Werbung
Kommentare
Achtung: Du kannst den Inhalt erst nach dem Login kommentieren.
Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 15.02.2013 - 13:52

Vielen Dank für den Beitrag.

Portrait von luciaf
  • 06.07.2012 - 10:07

Hi,
ich find es auch super beschrieben, aber leider gibt es Starschwierigkeiten.
Mit Actionscript3 gab es viele Compiler-Fehler und um das zu umgehen habe ich es nochmal mit Actionscript2 gemacht. Compiler-Fehler sind weg, aber es tut sich absolut nichts beim Testen. Schon die Hide-Mouse-On-Press geht nicht Bewegen und Eier einblenen demnach auch nicht.
Muss ich vielleicht irgend eine Startfunktion aufrufen?
vlg

Portrait von luciaf
  • 06.07.2012 - 11:42

Hi, falls nochjemand das gleiche Problem wie ich hatte ... prüft ob ihr eurem Topf auch den Instanznamen Topf gegeben habt!!! ^^

Portrait von koernchen
  • 04.04.2011 - 11:39

Es klappt so nicht. Mit welchem ActionScribt hast du das gemacht?
Zu erst sind die Eier nur am Rand runter gefallen und man konnte auch nicht alle "einfangen". Und wenn ich deinen Text kopiere, dann kann ich den "topf" gar nicht mehr anklicken.

Würde mich sehr über eine Rückmeldung freuen!

Für einen Anfänger in Flash wie mich finde ich es ein bisschen kompliziert und umständlich geschrieben.

Ansonsten finde ich die Idee sehr witzig. Man könnte sicher mehr daraus machen. Dankeschön für das Tut!

Portrait von VroniZeh
  • 12.01.2011 - 10:11

Super Anleitung! Ich hab nur das Problem, dass keine Eier eingeblendet werden (Ab Schritt 32. funktioniert gar nix mehr irgendwie) und leider keine Ahnung was ich falsch mach... jemand das gleiche Problem?

Portrait von luciaf
  • 06.07.2012 - 12:21

Hi,
hast du beim Erstellen des MoviClips für die Eier jeweis ein Häckchen bei "Export für ActionScript" gesetzt?
Ohne das kann nämlich nicht auf die MCs zugegriffen werden.
Nachholen kannt du das mit Rechtsklick auf das jeweilige Ei in deiner Bibliothek - Eigenschaften
lg

Portrait von socken1952
  • 10.01.2011 - 12:29

Super Tutorial, danke. Habe es auch mit meinen Schülern ausprobiert. Alles hat gut funktioniert.

Portrait von dsyl
  • 08.12.2010 - 11:04

Super Tutorial! Vielen Dank.
Ich wüsste nun noch gern, wie man kontrollieren kann, dass bei allen Spielern die gleiche Anzahl an Eiern 1, 2, 3 und 4 herunterfallen. Das beeinflusst ja auch die Punkte - und da werden sich Spieler wahrscheinlich ungerecht behandelt fühlen ....

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 11.11.2010 - 12:03

Können Sie mir sagen welchen Instanz namen die "eier" denn nun bekommen? Und WO genau man diese einfügt??auf welcher ebene?
Das wäre sehr lieb weil ich hier langsam ausflippe....

Portrait von DopeXxX
  • 27.08.2010 - 18:21

Super beschrieben! Danke!

Portrait von Patrickes
  • 09.08.2010 - 20:58

interessante sache für mich vielleicht nicht ganz einfach

Portrait von Nagliato
  • 03.08.2010 - 17:02

Seht tolles Tut, hat eigentlich alles Wunderbahr geklapt. Gab hin und wieder ein paar fehler meinerseites, aber funktioniert 1a :)

Portrait von Lord_of_Hate
  • 04.07.2010 - 18:05

geiles tut gute erklärung thx

Portrait von melnitsc
  • 31.05.2010 - 11:01

ich kenn mich noch nicht so gut mit flash aus aber mit solchen tips klappts bestimmt bald wie geschmiert.echt gut erklärt :-D

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 04.05.2010 - 17:21

funktioniert fast...außer das die Eier zu schnell kommen und den Zähler nicht funktionert :(

Portrait von mistajam
  • 01.05.2010 - 01:53

A subber sach ... Dankeschön :)

Alternative Portrait

-versteckt-(Autor hat Seite verlassen)

  • 14.09.2009 - 18:43

huhu hab das problem das bei mir keine eier angezeigt werden^^

bitte um hilfe :D

Portrait von Vitozz
  • 10.09.2009 - 20:02

coole sache. dankeschön an dich

Portrait von SnowDragon
  • 26.08.2009 - 14:41

Is echt gut geworden, ein großes Dankeschön an dich

Portrait von kady113
  • 10.06.2009 - 08:58

klingt interessant. das werde ich gleich mal ausprobieren :)

x
×
×