MovieClip in Array und dann mit hitTest prüfen

[TheChucky]

Hallo Community,
bin neu hier und hoffe mal auf eure Hilfe
Ich hab mich jetzt 2 Tage durch alle möglichen Foren und Hilfen gewühlt, aber ich komm leider nicht auf die Lösung

Situation:
Ich lese ein XML ein, das mehrere Werte (x, y, width, height) beinhaltet. Wenn die eingelesen sind, erstelle ich in einer for-Schleife für jedes Element zwei MCs (einer wird angezeigt und der andere dient als Kollisionsfeld und liegt über dem ersten).
Des weiteren existiert bereits ein MC 'box' (hier im Beispiel statisch; In der richtigen Anwendung wird dieser MC durch Mausziehen erzeugt).
Da in der XML mehrere Elemente stehen werden, wollte ich diese in ein Array schreiben (oder zumindest die Namen, aber ging auch nicht) um dann zu überprüfen ob diese erstellten mit dem MC 'box' kollidieren.
Doch soweit komm ich gar nicht erst. Da mir immer 'undefined' ausgegeben wird.
Ich weiss, dass es an der Übergabe des dynamisch erstellten Namen des MC scheitert, denn wenn ich händisch die Namen vergeb, funktioniert es.
Mir ist klar was Arrays sind und wie diese funktionieren, aber wie das mit MCs funktioniert hab ich noch nicht ganz überrissen
Auch mit eval() komm ich hier irgendwie nicht weiter.

Frage:
1. Wie vergeb ich am vernünftigsten die Namen der dyn. erstellten MCs?
2. Wie soll ich die am besten in ein Array speichern? Nur die Namen oder das ganze MC?
3. Wie kann ich auf die Elemente im Array zugreiffen, so dass ich hitTest() verwenden kann?

Mein gesamter, aktuelles AS2 Code:

PHP-Code:

stop();

// 1. Variablen
var mouseListener:Object = new Object();
var collitionArray:Array = new Array();
var XMLdaten = new XML();
var XMLdaten_posx = [];
var XMLdaten_posy = [];
var XMLdaten_width2 = [];
var XMLdaten_height2 = [];
var XMLdone = false;

// 2. XML -> Boxen anzeigen
XMLdaten.ignoreWhite=true;
XMLdaten.load("pixel.xml"); // Hier befindet sich momentan nur ein Eintrag
XMLdaten.onLoad = function(success) {
    if(success) {
        anzahl = XMLdaten.firstChild.childNodes.length;
        // Daten aus der XML Datei werden in mehrere Arrays geschrieben
        for (var i=0; i<anzahl; i++) {
            XMLdaten_posx[i] = XMLdaten.firstChild.childNodes[i].attributes.posx;
            XMLdaten_posy[i] = XMLdaten.firstChild.childNodes[i].attributes.posy;
            XMLdaten_width2[i] = XMLdaten.firstChild.childNodes[i].attributes.width2;
            XMLdaten_height2[i] = XMLdaten.firstChild.childNodes[i].attributes.height2;
        }
        // Dann wird für jeden Eintrag ein Movieclip erzeugt
        // Das erste ist ein Rechteck das angezeigt wird
        // Das zweite ist ein transparentes Rechteck (ein wenig kleiner als das erste), 
        // das nur als Kollisionsbox nötig ist
        for (var i=0; i<anzahl; i++) {
            // Rechteck zeichnen
            this.createEmptyMovieClip("bild"+i, this.getNextHighestDepth());
            quadrat(bild+i, parseFloat(XMLdaten_posx[i]), parseFloat(XMLdaten_posy[i]), 
                    parseFloat(XMLdaten_width2[i]), parseFloat(XMLdaten_height2[i]));
            // Kollisionsfeld zeichnen und in Array schieben
            collitionArray[i] = this.createEmptyMovieClip("collision"+[i],
                                this.getNextHighestDepth());
            creatCollition("collision"+[i], parseFloat(XMLdaten_posx[i]), 
            parseFloat(XMLdaten_posy[i]), parseFloat(XMLdaten_width2[i]), 
            parseFloat(XMLdaten_height2[i]));
            // Namen der Kollisionen in Array
            //collitionArray[i] = "collision"+[i];
        }
        trace("Ausgabe1: "+collitionArray[0]); // -> Ausgabe1: undefined
        trace("Länge: "+collitionArray.length); // -> Länge: 1
        XMLdone = true;
    }
}
// 3. Der MovieClip, auf den die Kollision getestet werden soll
this.createEmptyMovieClip("box", this.getNextHighestDepth());
quadrat(box, 270, 250, 50, 40); 

// 4. Bei Mausbewegung wird auf Kollision getestet
mouseListener.onMouseMove = function() {
    if(XMLdone == true) {
        // Kollisionsabfrage
        // Eigentlich sollte hier das Array mit for durchlaufen werden
        // und überprüft werden, ob es kollidiert
        trace("Ausgabe2: "+collitionArray[0]); // -> Ausgabe2: undefined
        if(collitionArray[0].hitTest(box)) {
            trace("Hit");
        } else {
            trace("No Hit");
        }
    }
};
Mouse.addListener(mouseListener);

// Funktion zum Erstellen eines Quadrates
function quadrat(ziel_mc, q_x, q_y, q_width, q_height) {
    with(ziel_mc) {
        lineStyle(1, 0xFF0000, 100);
        beginFill(0xFF0000, 50);
        moveTo(q_x, q_y);
        lineTo(q_x + q_width, q_y);
        lineTo(q_x + q_width, q_y + q_height);
        lineTo(q_x, q_y + q_height);
        lineTo(q_x, q_y);
        endFill();
    }
}

// Funktion zum Erstellen eines transparenten Quadrates, dass etwas kleiner ist
function creatCollition(ziel_mc, q_x, q_y, q_width, q_height) {
    //trace("Ziel: "+ziel_mc);
    with(ziel_mc) {
        lineStyle(1, 0x3F8536, 0);
        beginFill(0x3F8536, 0);
        moveTo(q_x+1.1, q_y+1.1);
        lineTo(q_x + q_width-1.2, q_y+1.1);
        lineTo(q_x + q_width-1.2, q_y + q_height-1.2);
        lineTo(q_x+1.1, q_y + q_height-1.2);
        lineTo(q_x+1.1, q_y+1.1);
        endFill();
    }
} 


XML Datei

PHP-Code:

<?xml version="1.0" encoding="utf-8"?>
<pixel>
    <pix posx="230" posy="240" width2="50" height2="60" />
</pixel>

Ausgabe der AS2-Datei

Ausgabe1: undefined
Länge: 1
Ausgabe2: undefined
No Hit
Ausgabe2: undefined
No Hit
...

Ich hoffe ich hab mein "Anliegen" gut verdeutlichen können und hoffe, dass mir hier jemand helfen kann!

Vielen Dank schon mal!

Lg,
Tom

[headgrowe]

genau das gleiche prob habe ich auch....bzw. sind immer wieder die dynamischen sachen ein prob. .... probier das ganze mit MC.ID = i; in der schleife....weiß jt nicht wie und ob dich das weiterbringt...ich freu mich schon auf eine kompetente antwort auf dieses thema

[RustyCake]

Du hattest ein kleines Problem mit Pfaden, ich hab jetzt alles auf die Timeline getackert, ("var tl:MovieClip = this;") und doe Box an die Mouse geklebt, das man den Hit auch testen kann!

PHP-Code:

stop();
// 1. Variablen
var mouseListener:Object = new Object();
var collitionArray:Array = [];
var XMLdaten = new XML();
var XMLdaten_posx = [];
var XMLdaten_posy = [];
var XMLdaten_width2 = [];
var XMLdaten_height2 = [];
var XMLdone = false;
var tl:MovieClip= this;
// 2. XML -> Boxen anzeigen
XMLdaten.ignoreWhite=true;
XMLdaten.load("pixel.xml"); // Hier befindet sich momentan nur ein Eintrag
XMLdaten.onLoad = function(success) {
    if(success) {
        anzahl = XMLdaten.firstChild.childNodes.length;
        // Daten aus der XML Datei werden in mehrere Arrays geschrieben
        for (var i=0; i<anzahl; i++) {
            XMLdaten_posx[i] = XMLdaten.firstChild.childNodes[i].attributes.posx;
            XMLdaten_posy[i] = XMLdaten.firstChild.childNodes[i].attributes.posy;
            XMLdaten_width2[i] = XMLdaten.firstChild.childNodes[i].attributes.width2;
            XMLdaten_height2[i] = XMLdaten.firstChild.childNodes[i].attributes.height2;
        }
        // Dann wird für jeden Eintrag ein Movieclip erzeugt
        // Das erste ist ein Rechteck das angezeigt wird
        // Das zweite ist ein transparentes Rechteck (ein wenig kleiner als das erste), 
        // das nur als Kollisionsbox nötig ist
        for (var i=0; i<anzahl; i++) {
            // Rechteck zeichnen
            tl.createEmptyMovieClip("bild"+i, tl.getNextHighestDepth());
            quadrat(bild+i, parseFloat(XMLdaten_posx[i]), parseFloat(XMLdaten_posy[i]), 
                    parseFloat(XMLdaten_width2[i]), parseFloat(XMLdaten_height2[i]));
            // Kollisionsfeld zeichnen und in Array schieben
           collitionArray[i] = tl.createEmptyMovieClip("collision"+i, tl.getNextHighestDepth());
                              
            creatCollition(tl["collision"+i], parseFloat(XMLdaten_posx[i]), 
            parseFloat(XMLdaten_posy[i]), parseFloat(XMLdaten_width2[i]), 
            parseFloat(XMLdaten_height2[i]));
            // Namen der Kollisionen in Array
            //collitionArray[i] = "collision"+[i];
        }
        trace("Ausgabe1: "+collitionArray[0]); // -> Ausgabe1: undefined
        trace("Länge: "+collitionArray.length); // -> Länge: 1
        XMLdone = true;
    }
}
// 3. Der MovieClip, auf den die Kollision getestet werden soll
tl.createEmptyMovieClip("box", tl.getNextHighestDepth());
quadrat(tl.box, 270, 250, 50, 40); 
// 4. Bei Mausbewegung wird auf Kollision getestet
mouseListener.onMouseMove = function() {
    box._x = tl._xmouse-270;
    box._y = tl._ymouse-250;
    if(XMLdone == true) {
        // Kollisionsabfrage
        // Eigentlich sollte hier das Array mit for durchlaufen werden
        // und überprüft werden, ob es kollidiert
        trace("Ausgabe2: "+collitionArray[0]); // -> Ausgabe2: undefined
        if(collitionArray[0].hitTest(box)) {
            trace("Hit");
        } else {
            trace("No Hit");
        }
    }
};
Mouse.addListener(mouseListener);

// Funktion zum Erstellen eines Quadrates
function quadrat(ziel_mc, q_x, q_y, q_width, q_height) {
    with(ziel_mc) {
        lineStyle(1, 0xFF0000, 100);
        beginFill(0xFF0000, 50);
        moveTo(q_x, q_y);
        lineTo(q_x + q_width, q_y);
        lineTo(q_x + q_width, q_y + q_height);
        lineTo(q_x, q_y + q_height);
        lineTo(q_x, q_y);
        endFill();
    }
}

// Funktion zum Erstellen eines transparenten Quadrates, dass etwas kleiner ist
function creatCollition(ziel_mc, q_x, q_y, q_width, q_height) {
 
    with(ziel_mc) {
        lineStyle(1, 0x3F8536, 0);
        beginFill(0x3F8536, 0);
        moveTo(q_x+1.1, q_y+1.1);
        lineTo(q_x + q_width-1.2, q_y+1.1);
        lineTo(q_x + q_width-1.2, q_y + q_height-1.2);
        lineTo(q_x+1.1, q_y + q_height-1.2);
        lineTo(q_x+1.1, q_y+1.1);
        endFill();
    }
} 


[TheChucky]

Hey RustyCake super vielen Dank

Es funktioniert wunderbar, doch ganz hab ich das noch nicht verstanden.
Was ist der Unterschied zwischen "tl.createEmptyMovieClip(...)" und "this.createEmptyMovieClip(...)"?
Auf was bezieht sich das "this" dann?

Schönen Gruß aus München,
Tom

[rendner[i]]

Zitat von TheChucky

Es funktioniert wunderbar, doch ganz hab ich das noch nicht verstanden.
Was ist der Unterschied zwischen "tl.createEmptyMovieClip(...)" und "this.createEmptyMovieClip(...)"?
Auf was bezieht sich das "this" dann?

Trace dir doch einfach mal das this und tl.
Das this bezieht sich auf dein XML Objekt, tl dagegen ist der MovieClip in dem du den Code "gelegt" hast.

[TheChucky]

Ah, jetzt macht das Ganze langsam Sinn. Danke für die schnelle Antwort

Ich glaub ich muss da einfach noch bisschen mehr "rumspielen".

Gruß

[TheChucky]

So, bin ein gutes Stück weiter, aber nun hänge ich wieder an einer "undefined"-Stelle fest.
Ich möchte nun, wenn ich mit der Maus über eine der Boxen fahre eine Funktion aufrufen, bzw. etwas machen (Kleine Infobox mit einem Text anzeigen).
Doch komischerweise funktioniert "collitionArray[i]" unten bei der Kollisionsabfrage wunderbar, beim onRollOver jedoch nicht. Woran liegt das?

Performancefrage: Wie ihr seht frage ich bei jeder Mausbewegung in mehreren for-Schleifen ab, ob die Maus irgendwo drüber ist und ob eine Kollision vorhanden ist. Wenn ich mir vorstelle, das ich später mal vielleicht 100 und mehr Einträge in so einem Array hab, wird das ganze doch ziemlich langsam oder nicht?
Kennt ihr vielleicht eine bessere Alternative so etwas "gezielter" und effektiver abzufragen? Meins ist ja eher die Brutal-Methode

Quelltext ist der gleiche wie oben, nur wurde er um folgendes erweitert:

PHP-Code:

mouseListener.onMouseMove = function() {
    if(XMLdone == true) {

        // MouseOver, der NICHT funktioniert
        for(var i=0; i<anzahl; i++) {
            collitionArray[i].onRollOver = function(){
                trace("Over: "+collitionArray[i]); // -> Over: undefined
            }
        }
        
        // Kollisionsabfrage, die wunderbar FUNKTIONIERT, wie sie soll
        if(startSet == true) {
            for(var i=0; i<anzahl; i++) {
                if(collitionArray[i].hitTest(box)) {
                    trace("Hit mit: "+collitionArray[i]._name);
                } else {
                    //trace("No Hit");
                }
            }
        }
    }
}; 


Vielen Dank und schönen Abend noch,
Tom

[RustyCake]

PHP-Code:

for(var i=0; i<anzahl; i++) {
        collitionArray[i].id=i;
            collitionArray[i].onRollOver = function(){
                trace("Over: "+collitionArray[this.id]); // -> Over: _level0.collision0
            }
        } 


[TheChucky]

Hey super, funktioniert; vielen Dank!

Hat vielleicht noch einer ne Idee zu meiner Performancefrage?

Lg,
Tom

[Der Frager]

Du kannst z.B. bei - sagen wir mal 100 MCs - jeweils 25 Stück in einen weiteren MC verpacken. Dann machst du erstmal den hitTest nur für diese 4 "großen" MCs und erst wenn davon einer berührt wurde, "guckst du da rein" welcher MC konkret es war.

[TheChucky]

Gute Idee, danke! Werde ich die Tage mal ausprobieren.

Gruß und schönen Abend,
Tom

[TheChucky]

Zitat von Der Frager

Du kannst z.B. bei - sagen wir mal 100 MCs - jeweils 25 Stück in einen weiteren MC verpacken. Dann machst du erstmal den hitTest nur für diese 4 "großen" MCs und erst wenn davon einer berührt wurde, "guckst du da rein" welcher MC konkret es war.

Gut, ich habe das mal ausprobiert. Theoretisch funktioniert das auch, aber praktisch bin ich da auf ein Problem gestoßen. Wenn ich nun mehrere MCs in ein "großen" MC packe, dann ist das "große" MC immer so groß wie alle anderen MCs zusammen. Wenn ich nun einen hitTest() darauf mache, löst er schon viel früher aus, als er sollte (rosa Bereich in der Grafik). Um dies zu verdeutlichen, hab ich mal eine Grafik und den Code angehängt.

AS2 Code:

PHP-Code:

// 1. MCs erstellen
var tl:MovieClip= this;
var mouseListener:Object = new Object();
// MC-Container
tl.createEmptyMovieClip("mcContainer", tl.getNextHighestDepth());

// Diese MCs befinden sich im MC Container
tl.mcContainer.createEmptyMovieClip("mc1", tl.mcContainer.getNextHighestDepth());
quadrat(mcContainer.mc1, 120, 130, 50, 50);
tl.mcContainer.createEmptyMovieClip("mc2", tl.mcContainer.getNextHighestDepth());
quadrat(mcContainer.mc2, 220, 230, 50, 50);

// 2. Der MovieClip, auf den die Kollision getestet werden soll
tl.createEmptyMovieClip("box", tl.getNextHighestDepth());
quadrat2(tl.box, 20, 20, 50, 50); 

// 3. Bei Mausbewegung wird auf Kollision getestet
mouseListener.onMouseMove = function() {
    box._x = _xmouse;
    box._y = _ymouse;
        // Kollisionsabfrage
        if(tl.mcContainer.hitTest(tl.box)) {
            trace("Hit");
        }
};
Mouse.addListener(mouseListener); 


// 4. Funktionen um die Quadrate zu erstellen
function quadrat(ziel_mc, q_x, q_y, q_width, q_height) {
    with(ziel_mc) {
        lineStyle(1, 0xFF0000, 100);
        beginFill(0xFF0000, 50);
        moveTo(q_x, q_y);
        lineTo(q_x + q_width, q_y);
        lineTo(q_x + q_width, q_y + q_height);
        lineTo(q_x, q_y + q_height);
        lineTo(q_x, q_y);
        endFill();
    }
}

function quadrat2(ziel_mc, q_x, q_y, q_width, q_height) {
    with(ziel_mc) {
        lineStyle(1, 0x0C3814, 100);
        beginFill(0x1F9C37, 50);
        moveTo(q_x, q_y);
        lineTo(q_x + q_width, q_y);
        lineTo(q_x + q_width, q_y + q_height);
        lineTo(q_x, q_y + q_height);
        lineTo(q_x, q_y);
        endFill();
    }
} 


Bild:
Der grüne Quader folgt der Maus und sollte eigentlich erst auslösen, wenn er auf einen der anderen roten Quader trifft und nicht auf den rosa Bereich des übergeordneten MCs.




Schönes Osterfest und danke für Tipps,

Tom

[RustyCake]

Du mußt mit eine for-schleife die mc's in dem container abgreifen, und mit denen den hitTest machen

[TheChucky]

Zitat von RustyCake

Du mußt mit eine for-schleife die mc's in dem container abgreifen, und mit denen den hitTest machen

Ja so hab ich es ja vorher gemacht, aber ich wollte das etwas Resourcen schonender machen, indem ich wie "Der Frager" meinte, mehrere MCs in einen größeren schiebe.
Gibts da keine Möglichkeit?
Bzw. denkst du nicht, dass das Ganze dann irgendwann sehr langsam wird, wenn ich bei jeder Mausbewegung die Schleife durch sagen wir vielleicht 100 oder 150 MCs laufen lassen muss?
Kennst du einen Alternative, wie man sowas "intelligent" lösen kann?

Danke

[RustyCake]

Mit der Mouse kann ich mir nicht vorstellen das es so viel Performance kostet wie mit enterFrame oder setInterval, käme auf eine Test an
Aber Du mußt trotzdem alle enthaltenen mc's eines Containers abgreifen, sonst mach der hit ja keinen sinn