15 Kollisionstest

Sie werden lernen:

• Wie führen Sie einen Kollisionstest durch?
• Wie lässt sich die Kollision exakt feststellen?
• Welche Nachteile haben handgeschriebene Lösungen?

Fahre wie der Teufel und du wirst ihn bald treffen. – Robert Lembke

Interaktiv wird ein Flash-Film, wenn der Nutzer mit Objekten interagiert. Aber auch Objekte können zueinander in Beziehung stehen. Damit aus vormals gesitteten Beziehungen nicht totales Chaos wird, müssen Sie Kollisionen zwischen den Objekten abfangen. Kollision heißt, dass sich zwei Objekte treffen. Und wie meist bei ActionScript handelt es sich bei diesen Objekten um MovieClips.

15.1 Kollisionen abfangen 

Für das Abfangen von Kollisionen gibt es zwei Möglichkeiten:

• Die Methode hitTest() des MovieClip-Objekts liefert einen Wahrheitswert, ob eine Kollision vorliegt (true) oder nicht (false).

• Eine handgeschriebene Lösung, die die Koordinaten von Objekten vergleicht.

Um die zweite Alternative drückt sich der Programmierer gerne, außer es geht wirklich nicht anders. Insofern ist von Interesse, was Sie mit hitTest() bewerkstelligen können und was nicht.

hitTest() ist in zwei Varianten einsetzbar:

movieclip_mc.hitTest(x, y, Form)

• • Als Parameter geben Sie die x- und y-Koordinate des Punktes an. Form enthält einen Boolean. Beim Wert true wird nur die Form des MovieClips (der gefüllte Bereich) zum Testen herangezogen. Das heißt, nur wenn der Punkt innerhalb der Form des MovieClips liegt, liefert hitTest() den Wert true zurück. Ist der Wert false, zählt die Begrenzung um den Inhalt des MovieClips. Die Begrenzung ist der kleinstmögliche rechteckige Bereich, der sich um alle Inhalte des MovieClips legen lässt. In diesem Fall zählt also auch der transparente Bereich zwischen dem Inhalt und der Begrenzung dazu.

Abbildung 15.1 Form und Begrenzung eines MovieClips.

movieclip_mc.hitTest(Ziel);

• • In diesem Fall ist das Ziel ein beliebiger anderer MovieClip, dessen Instanznamen Sie angeben. Relevant sind allerdings die Begrenzungen der beiden MovieClips, nicht der Inhalt selbst.

hitTest() im Test

Das Kernproblem bei hitTest() ist, dass beim Kollisionstest zweier MovieClips nur die Begrenzungen, nicht aber der Inhalt relevant sind.

Dies können Sie ganz einfach ausprobieren: Erzeugen Sie einen Kreis und wandeln Sie ihn in einen MovieClip um. Duplizieren Sie den MovieClip und geben Sie beiden einen Instanznamen (bei uns test1_mc und test2_mc). Einer der beiden Kreise wird nun per Drag & Drop beweglich, wenn Sie folgenden Code in die Aktion einfügen:

on (press) {

startDrag(this);

}

on (release, releaseOutside) {

stopDrag();

}

Ab nächstem Schritt müssen Sie im ersten Schlüsselbild des Hauptfilms mit einer Ereignisprozedur testen, ob sich die zwei MovieClips berühren:

_root.onEnterFrame = function() {
   if (this.test1_mc.hitTest(test2_mc)) {
      trace("Hit");
   }
};

Abbildung 15.2 Wie Sie sehen, treffen sich die beiden MovieClips schon am Rand der Begrenzungen.

Das Beispiel zeigt: Wenn absolute Genauigkeit zählt und die MovieClips ungewöhnlich geformt sind, hilft nur eine handgeschriebene Lösung. Überlegen Sie sich aber von Fall zu Fall, ob die hitTest()-Variante nicht doch ausreicht. Zum einen ist sie schneller, zum anderen wird sie auch mit Größenänderungen fertig.

Sie finden unser kleines Beispiel unter dem Namen hittest.fla für Flash MX 8 bzw. 2004 (Ordner Flash8 bzw. FlashMX2004) und Flash MX (Ordner FlashMX) auf der CD-ROM.

Handgeschriebene Lösungen

Bei den handgeschriebenen Lösungen schwirrt eine Unzahl an Varianten durch das Netz. Fischt man etwas intensiver, wird die Ähnlichkeit vieler Varianten offensichtlich. Im Kern gibt es drei Ideen, die Sie verfolgen könne:

• Sie überprüfen jeden einzelnen Punkt eines Objekts. Diese Lösung kommt am seltensten zum Einsatz, da sie viel zu aufwendig ist.

• Sie verwenden eine geometrische Formel, um den Abstand zwischen zwei Elementen festzustellen. Wird der Abstand zu gering, meldet das Skript eine Kollision.

• Sie erzeugen leere, unsichtbare MovieClips, um die Form des MovieClips, der geprüft werden soll, näherungsweise darzustellen. Die kleinen MovieClips sind dabei dem eigentlich zu testenden MovieClip untergeordnet.

Sehen Sie sich die letzten zwei Ideen für handgeschriebene Lösungen einmal an Beispielen an. Wir verwenden dazu die beiden Kreise aus dem vorigen Abschnitt. An Drag & Drop ändert sich nichts, dieses Mal soll die Kollisionsabfrage aber exakt erfolgen.

Werfen Sie zuerst einen Blick auf die geometrische Lösung (kollision_handgeschrieben.fla), die aus mehreren Teilen besteht:

var i:Number = 0;
_root.onEnterFrame = function() {

var entX_num:Number = this.test1_mc._x – this.test2_mc._x;
var entY_num:Number = this.test1_mc._y – this.test2_mc._y;

var entfernung_num:Number = Math.pow(entX_num, 2) + Math.pow(entY_num, 2);

var radius1_num:Number = this.test1_mc._height / 2;
var radius2_num:Number = this.test2_mc._height / 2;

var minEntfernung_num:Number = Math.pow((radius1_num + radius2_num), 2);

   if (entfernung_num < minEntfernung_num) {
      trace("Hit" + ++i);
   }
};

Abbildung 15.3 Dank geometrischer Berechnung funktioniert der Kollisionstest nun exakt.

Als Nächstes widmen wir uns der Lösung mit den leeren, unsichtbaren MovieClips (kollision_handgeschrieben2.fla). Hier müssen Sie einiges an Vorbereitungsarbeit erledigen:

Abbildung 15.4 Der Kreis wird von leeren MovieClips umrahmt. Ein leerer MovieClip besteht nur aus einem weißen Kreis. Wird er angeklickt, erhält der weiße Kreis ein schwarzes Kreuz.

Nach diesen Vorbereitungen kommen wir zu ActionScript. Der Code landet im ersten Schlüsselbild des Hauptfilms auf der Ebene ActionScript. Nun erledigen Sie die weiteren Schritte:

var i:Number = 0;
_root.onEnterFrame = function() {

var name_str:String;

for (name_str in this.test2_mc) {

• • Eine for-in-Schleife geht nach und nach alle MovieClips durch, die test2_mc direkt untergeordnet sind. Es handelt sich hier um die leeren MovieClips. Ihre Namen werden in die Variable name_str gespeichert. Das funktioniert, obwohl die MovieClips keine Instanznamen besitzen. Nun haben Sie vollen Zugriff auf die leeren, unsichtbaren MovieClips.

var punkt = new Object();
punkt.x = this.test2_mc[name_str]._x;
punkt.y = this.test2_mc[name_str]._y;

this.test2_mc.localToGlobal(punkt);

if (this.test1_mc.hitTest(punkt.x, punkt.y, true)) {
         trace("Hit" + ++i);
      }
   }
};

• • Da ein Punkt mit der exakten Form getestet werden kann, benötigen Sie die leeren MovieClips immer nur für einen der beiden MovieClips, deren Kollision Sie testen möchten.

Abbildung 15.5 Die Lösung mit leeren MovieClips ergibt ebenfalls eine exakte Kollisionsabfrage.

Prinzipiell gilt: Wenn es eine geometrische Lösung gibt, sollten Sie diese in der Regel vorziehen, da sie einfacher ist und eine bessere Performance besitzt.

Die geometrische Lösung scheitert allerdings dann, wenn es sich nicht um eine überprüfbare Form handelt. Deswegen ist in der Praxis die Lösung mit leeren, unsichtbaren MovieClips wesentlich häufiger.

hitArea – Kollision für Schaltflächen-MovieClips

Ab Flash MX können Sie MovieClips wie Schaltflächen behandeln. Eine neue Eigenschaft in der MovieClip-Klasse ist Ihnen dabei behilflich: hitArea. Diese Eigenschaft gibt für einen MovieClip an, welcher MovieClip seine Hitarea ist, also der Bereich, an dem er gedrückt wird:

movieclip_mc.hitArea = andererMovieclip_mc;

Was heißt das? Sie können Funktionalität mit einem MovieClip verbinden und sie wird nur aufgerufen, wenn der Nutzer einen anderen MovieClip drückt.

Auf der CD-ROM finden Sie unter dem Namen hitarea.fla ein Beispiel, bei dem die linke Schaltfläche (schalt1_mc) die rechte Schaltfläche (schalt2_mc) als Hitarea besitzt. Der linken Schaltfläche ist eine Ereignisprozedur zugeordnet, die etwas ausgibt, wenn der Nutzer auf die rechte Schaltfläche drückt (onPress):

this.schalt1_mc.hitArea = this.schalt2_mc;
this.schalt1_mc.onPress = function() {
   trace("Hit");
};

Der Effekt: Die linke Schaltfläche ist für den Nutzer funktionslos, wenn er aber die rechte drückt, wird die mit der linken verknüpfte Meldung ausgegeben.

Abbildung 15.6 Die linke Schaltfläche besitzt die Funktionalität, aber aufgerufen wird sie, wenn der Nutzer auf die rechte Schaltfläche klickt.

Ihre Meinung

Wie hat Ihnen das Openbook gefallen? Wir freuen uns immer über Ihre Rückmeldung. Schreiben Sie uns gerne Ihr Feedback als E-Mail an kommunikation@rheinwerk-verlag.de.