Tabelle ..Leere Zeile gelöscht .. wie rutscht der Rest der Tabelle nach oben. ?

[maxiW]

Hi, Tetris anders rum

Meine Objecte auf der Stage haben einen y Wert. beginnend beim ersten von 70 beim Letzten 300.
Dazwischen sind Lücken. Das erstellen mit einer For-Schleife klappt. Mit dem point.x und point.y verteile ich die Objecte wunderbar.

PHP-Code:

rivate function getThumbsPosition(index:Number):Point
        {
            var rowCount:Number = 1;
            var imageWidthHeight:Number = 40;
            var imageGap:Number = 5;
            var thumbX:Number;
            var thumbY:Number;
            thumbX = (index % rowCount) * (imageWidthHeight + imageGap);
            thumbY = Math.floor(index / rowCount) * (imageWidthHeight/2 + imageGap);
            
            return new Point(thumbX, thumbY);
        } 


In einer Funktion zum Löschen eines in der Row befindlichen Objecte klicke ich auf das Object. Das Object gibt mir seinen y wert. Ich frage dann danach ab, ob es auf der Stage weitere Objecte gibt. Wenn ja dann bekommen die Objecte mit einem größeren Y-Wert 50px abgezogen. Sprich alles soll so nach oben rutschen. Klappt manchmal..

PHP-Code:

private function AnzeigeAufrückung():void
        
        {
            //var eTARGETyPos:Number = mouseY;
            trace("this.mouseY         "+this.mouseY);
            trace(getThumbsPosition(fileCount)); // fileCount ist die Anzahl der Objecte auf der Stage
            trace("eTARGETyPos" + eTARGETyPos);
            //eTARGETyPos Variable, Nummer, global. Speichter den y Wert des Objectes das ich angeklickt habe und was erfolgreich gelöscht wurde. 


            var point:Point = getThumbsPosition(fileCount);
            
            for (var i:int = 0; i < this.numChildren; i++)
            {
                var pno_:* = this.getChildAt(i);
                if (pno_ == null ) { continue };
                
                trace("pno_.name:   " + pno_.name + "     pno_Ypos:" + pno_.y + "    eDeletedFILE.Name:    " );
                
                try
                {
                    
                
                
                    
                //    pno_.y -= 50; 
                
                // Position 2 (gelöscht ist) neue position für 3
                // Wenn No2 gelöscht ist schiebe no3....etc auf pos.2
                    
                if (pno_.y != eTARGETyPos && pno_.y > eTARGETyPos ) {
                
                trace("E-point" + point.y);
                pno_.x = point.x; 
                pno_.y = point.y;
                    
                
                }
                
                    
                trace("eTARGETyPos" + eTARGETyPos);    
                trace("eTARGETyPos" + eTARGETyPos);    
                    
                /*        // Klappt beschissen!
                    if (pno_.y > eTARGETyPos )
                    {
                        trace("pno_Ypos:   " + pno_.y)
                        pno_.y -= 50;
                        trace("PNO:   " + pno_.y);
                    }
                    */ 
                
                }
                catch (e:Error)
                {
                    
                    trace("ERROR Position>>" + e.toString());
                }
                
                
            }
            
        
        } 


Bin am ende.. mit dem f.latei
chees Nik

[badnoob]

wuerde dir vorschlagen saemtliche teile in einem mehrdimensionalen array/vector zu speichern. so kannst du einfacher auf ganze zeilen zugreifen.

kann mir nicht vorstellen, dass du in 3 wochen noch weisst, was du da eigentlich versucht hast. probier deinen ansatz zu ueberdenken

[hgseib]

Zitat von maxiW

die Objecte mit einem größeren Y-Wert 50px abgezogen. Sprich alles soll so nach oben rutschen. Klappt manchmal..

wenn du z.b. 10 objekte hast, dann werden die 'so' positioniert,
wenn du z.b. 30 objekte hast, dann werden die 'so' positioniert, ..

es ist vollkommen unwichtig, ob in der vergangenheit objekte dazu- oder weggekommen sind.
positioniere alle aktuell vorhandene objekte neu. dabei ist es egal, ob ein objekt bereits auf der richtigen position sitzt oder erst da hin gebracht werden muss.

animiert
zuerst jedem objekt eine zielposition geben. danach in einer enter_frame schleife jeden ein stück näher an sein ziel bringen. sind alle am ziel, dann das enter_frame beenden.

[Omega Psi]

Ist das alles Code von dir?

[maxiW]

EnterFrame oder nen Timer der immer die pos. überprüft ist leider aus performance gründen != möglich.


Klar ist der Code von mir,. der ganz obere mit dem Point, hab ich aus ner bibl,.
um aus dem FileRef obj mir loader instanzen zu ziehen.

Okay die Lösung.:

PHP-Code:

    private function AnzeigeAufrückung(s:DisplayObject):void
        {
//    trace("Delete Element: " + s.name + " - " + s.getRect(stage));
            for (var i:int = 0; i < this.numChildren; i++)
            {
                var s2:DisplayObject = this.getChildAt(i);
                if (s2 == null)
                {
                    continue
                }
            else if (s2.getRect(stage).top > s.getRect(stage).top)
                {
                    //s2.getRect(stage).offset(0, -50);
                    TweenLite.to(s2, .5, {y: "-60"});
                    
                    //s2.y -= 40;
                    stage.invalidate();
                }
//trace("Stage Element: " + s2.name + " - " + s2.getRect(stage))
            }
        } 


Meine Learnings waren dass man mit getRect und top und offset ne menge spass haben kann.

[hgseib]

Zitat von maxiW

EnterFrame oder nen Timer der immer die pos. überprüft ist leider aus performance gründen != möglich.

EnterFrame natürlich nur für eine animation, wenn die objekte animiert zu ihrer neuen position wandern sollen.
also ein EnterFrame anstatt deinen TweenLite's. je eins für jedes zu bewegende object.

aber egal, wenn du eine lösung hast ...

[Martin Kraft]

Zitat von hgseib

EnterFrame natürlich nur für eine animation, wenn die objekte animiert zu ihrer neuen position wandern sollen.
also ein EnterFrame anstatt deinen TweenLite's. je eins für jedes zu bewegende object.

Das dürfte IMHO kaum einen Vorteil gegen über einer performanceoptimierten Tweening-Engine, wie TweenLite bringen. Oder seht Ihr das anders?

[andrelehnert]

@ Martin: Jau ganz Deiner Meinung.
hier ein kleiner Test mit 10000 Shapes...


LG ANdré

Und in der onEnterFrame wird noch nicht mal ein easing berechnet.

EDIT: Und noch die FLA. Hab' nicht geschummelt...

[hgseib]

beruhigt euch mal wieder ;-)

maxiW hatte geschrieben: "..immer die pos. überprüft.."
ich vermute da wurde was missverstanden, so als ob ständig und ununterbrochen die position überprüft werden sollte, dabei hatte ich genau das gegenteil vorgetragen: nämlich nicht überprüfen. darauf habe ich geantwortet (versucht).
und an geschwindigkeitsoptimierung bei 10 (?) objekten untereinander zu denken ist auch irgendwie übertrieben, finde ich.


ich kann die fla von andrelehnert nicht öffnen, habe nur CS3
aber TweenLite kocht auch nur mit wasser. siehe:
timingSprite.addEventListener(Event.ENTER_FRAME, updateAll, false, 0, true);

TweenLite das ein Event.ENTER_FRAME ausführt kann nicht schneller sein als ein script mit nur einem Event.ENTER_FRAME.
der vorteil von TweenLite liegt darin, das es schlanker ist als das Tween von flash.

[andrelehnert]

Bin ruhig - trinke schon den ganzen Tag Baldrian-Tee

Daß das konkret nichts mit dem Problem zu tun hat, ist klar. Aber MArtin hatte ja ne Frage gestellt...

TweenLite das ein Event.ENTER_FRAME ausführt kann nicht schneller sein als ein script mit nur einem Event.ENTER_FRAME.

Aber wie erklärst Du Dir dann die Unterschiede?
Berechnet TweenLite den Tweenverlauf vielleicht am Anfang komplett im Voraus?
Immerhin ist die oEF in meinem Test mit 10000 Shapes ca. 3-4x langsamer(!)

Hier das Script, damit Du das selbst mal testen kannst.

PHP-Code:

import com.greensock.TweenLite;
import net.hires.debug.Stats;

const NUM_SHAPES:int = 10000;
const PIXEL_TO_MOVE:int = 500;
const TWEEN_TIME:int = 2;//sec
const SPEED:int = PIXEL_TO_MOVE / (TWEEN_TIME * stage.frameRate);

var shapes:Vector.<Shape >  = new Vector.<Shape > (NUM_SHAPES);
var numShapesReady:int = 0;
var startTime:int = 0;

var tf:TextField = new TextField();

function init():void
{
    for (var i:int=0; i<NUM_SHAPES; i++)
    {
        var sh:Shape= new Shape();
        var g:Graphics = sh.graphics;
        g.beginFill(Math.random()*0xFFFFFF);
        g.drawCircle(0,0,10);
        g.endFill();
        sh.x = stage.stageWidth / NUM_SHAPES * i;
        addChild(sh);
        shapes[i] = sh;
    }
    addChild(new Stats());
    tf.x = 100;
    tf.text = "Wir bewegen 10000 Objecte in 2 Sekunden über 500 Pixel";
    tf.border = true;
    tf.width = 300;

    addChild(tf);
    chronometerStart();
    addEventListener(Event.ENTER_FRAME, loop);
}

function loop(e:Event):void
{

    for each (var sh:Shape in shapes)
    {
        if (sh.y < PIXEL_TO_MOVE - SPEED)
        {
            sh.y +=  SPEED;
        }
        else
        {
            numShapesReady++;

        }
    }
    if (numShapesReady == NUM_SHAPES)
    {
        chronometerStop("onEnterFrame dauerte: ");
        removeEventListener(Event.ENTER_FRAME, loop);
        startTweening();
    }
}

function startTweening():void
{
    numShapesReady = 0;
    chronometerStart();
    for each (var sh:Shape in shapes)
    {
        TweenLite.to(sh,TWEEN_TIME,{y:0,onComplete:finishTweening});
    }
}
function finishTweening():void
{
    numShapesReady++;
    if (numShapesReady == NUM_SHAPES)
    {
        chronometerStop("TweenLite dauerte: ");
        numShapesReady = 0;
        chronometerStart();
        addEventListener(Event.ENTER_FRAME, loop);
    }
}
function chronometerStart():void
{
    startTime = getTimer();
}
function chronometerStop(msg:String):void
{
    var now:int = getTimer();
    var time:int = now - startTime;
    tf.appendText("\n"+ msg+time+" ms");
    tf.scrollV = 100000;
}
init(); 


LG ANdré

[maxiW]

Auweia!

zugegeben.. ich habe mir dann auch mal die Tween* Klassen angeschaut und habe da ENTERFRAME gefunden.. .. hm.. 10.000 Objecte gegen meine max. 10 instanzen .. ist ein wenig wie bei 300.. aber gut.. ich habe dann den bewegungstween wirklich mit tweenLite gemacht.. und es gibt da keine performance probleme..

NUR der FlashBug ist jetzt neu und kostet ! !! WTF !

[andrelehnert]

Naja... Nicht nur nicht an die Disco, sondern auch bitte nicht zu weit aus dem Fenster lehnen...

Deine Performanceprobleme kommen ganz sicher woanders her...

Im Test treten die Unterschiede auch erst ab 3000-5000 Objecten auf(auf meinem Rechner).

ein Bug ist das sicher nicht, onEnterFrame ist eine der "Kernkompetenzen" von Flash.

LG ANdré

[hgseib]

mal so ganz grob geändert: test (CS3) der ordner com.greensock.. fehlt natürlich
TweenLite benützt standardmässig easeOut und kommt so mit wesentlich weniger sprüngen zum ziel. deshalb ist es scheinbar so schnell.
wenn ich das richtig gezählt habe, dann benützen jetzt beide verfahren 8 sprünge. dann wäre loop geringfügig schneller.

natürlich, wer sowieso TweenLite benützt, das ist eleganter und leichter zu ändern als sich selbst was zusammen zu stricken.

und so: zeilen (CS3)
könnte eine lösung für die von maxiW angesprochene aufgabe aussehen. zum ausprobieren auf einzelne zeilen klicken

[thomas_E]

if (s2.getRect(stage).top > s.getRect(stage).top) 

Du sprichst oben von Performance, und feuerst dann mit sowas rum?

1. s.getRect(stage).top kannst du einmal berechnen, und in eine Variable speichern
2. wenn die Objekte vernünftig ausgerichtet sind (topLeft oder center, topCenter, centerLeft, ...), kannst du viel besser mit der Position arbeiten, als mit den Bounds.

3. Zitat von hgseib

   es ist vollkommen unwichtig, ob in der vergangenheit objekte dazu- oder weggekommen sind.
   positioniere alle aktuell vorhandene objekte neu. dabei ist es egal, ob ein objekt bereits auf der richtigen position sitzt oder erst da hin gebracht werden muss.

var s2:DisplayObject = this.getChildAt(i);
if (s2 == null){... 

getChildAt liefert NIE null zurück, diese Bedingung kannst du dir also sparen.

stage.invalidate(), an der Stelle wo es jetzt steht:
im schlimmsten Fall wird diese Funktion bei einem Aufruf von AnzeigeAufrückung, numChildren mal ausgeführt.
Bleistift:

• Du hast 10 children
• du löscht das Element an Position 0
• stage.invalidate wird nun 9x (die neue Anzahl an children) aufgerufen
• ergo werden auch 9 RENDER-Events gefeuert

hier noch etwas Code:

package  
{
    import com.greensock.TweenLite;
    import flash.display.DisplayObject;
    import flash.display.Sprite;
    import flash.events.Event;
    import flash.events.KeyboardEvent;
    import flash.ui.Keyboard;
    /**
     * ...
     * @author Thomas Ersosi
     */
    [SWF(width="800", height="600", frameRate="40", backgroundColor="#808080")]
    public class Demo extends Sprite
    {
        public function Demo() 
        {
            if (stage) init();
            else addEventListener(Event.ADDED_TO_STAGE, init);
        }
        
        private function init(e:Event = null):void 
        {
            removeEventListener(Event.ADDED_TO_STAGE, init);
            // entry point
            stage.scaleMode = "noScale";
            stage.align = "TL";
            stage.addEventListener(KeyboardEvent.KEY_DOWN, onKeyDown);
        }
        
        private function onKeyDown(e:KeyboardEvent):void 
        {
            switch(e.keyCode) {
                case Keyboard.SPACE:
                    var c:Sprite = new Sprite();
                        c.graphics.beginFill(Math.random() * 0x1000000);
                        c.graphics.lineStyle(1);
                        c.graphics.drawRect(0, 0, imageWidthHeight, imageWidthHeight);
                    addChildAt(c, Math.random() * numChildren);
                    break;
                
                case Keyboard.BACKSPACE:
                    if (numChildren)
                        removeChildAt(Math.random() * numChildren);
                    break;
                    
                case Keyboard.ENTER:
                    if (numChildren>1)
                        setChildIndex(
                            getChildAt(Math.random() * numChildren),
                            Math.random() * numChildren
                        );
                    break;
            }
        }
 
        
        //wenn die Spaltenanzahl konstant 1 bleibt,
        //entferne sie komplett aus der Berechnung!
        //private const rowCount:int = 1;
        
        private const imageWidthHeight:Number = 40;
        private const imageGap:Number = 5;
        private const imageOffsetXY:Number = imageWidthHeight + imageGap;
        
        override public function addChild(child:DisplayObject):DisplayObject 
        {
            super.addChild(child);
            child.y = (numChildren-1) * imageOffsetXY;  //der Optik wegen
            updatePositions();
            return child;
        }
        
        override public function addChildAt(child:DisplayObject, index:int):DisplayObject 
        {
            super.addChildAt(child, index);
            child.y = index * imageOffsetXY;    //der Optik wegen
            updatePositions();
            return child;
        }
        
        override public function setChildIndex(child:DisplayObject, index:int):void 
        {
            super.setChildIndex(child, index);
            updatePositions();
        }
        
        override public function removeChild(child:DisplayObject):DisplayObject 
        {
            super.removeChild(child);
            updatePositions();
            return child;
        }
        
        override public function removeChildAt(index:int):DisplayObject 
        {
            var child:DisplayObject = super.removeChildAt(index);
            updatePositions();
            return child;
        }
        
        private function updatePositions():void
        {
            for (var i:int, len:int = numChildren, changed:Boolean; i<len; ++i) {
                var d:DisplayObject = getChildAt(i);
                
                //var col:int = i % rowCount, row:int = i / rowCount;
                //var px:Number = col * imageOffsetXY;
                //var py:Number = row * imageOffsetXY;
                //if (d.x != px || d.y != py) {
                    //TweenLite.to(d, .5, { x: px, y: py } );
                    //changed = true;
                //}
                
                var py:Number = i * imageOffsetXY;
                if (d.y != py) {
                    TweenLite.to(d, .5, { y: py } );
                    //changed = true;
                }
            }
            
            //bei mir läuft es schneller ohne dem hier,
            //und ich sehe auch keinen Unterschied in der Optik
            //if (changed)
                //stage.invalidate();
        }
    }
} 

[andrelehnert]

@hgseib:
Sorry, aber Dein Test hinkt total, da Du andere Rahmenbedingungen für EnterFrame als für TweenLite setzt.

Ich habe den Speed aus dem Weg/(die benötigte Zeit * fps) berechnet und gebe so beiden Engines dieselbe Aufgabe.

Du zählst mit schnellem Auge(?) die Sprünge und bastelst dann mit der Fantasiezahl 8 herum. Bei 1 Object läuft so die oEF viel viel schneller als TweenLite (also nicht mehr die angestrebten 2 Sekunden), ist ja logisch.
Wenn mein uU noch schnelleres Auge () 20 Sprünge gezählt hätte, fiele Das Ergebnis komplett anders aus. Ich vertraue da, wie Du in Deinen ganzen sonstigen Postings hier im FF der Mathematik.

Alles in allem: Unfaire Manipulation der Testumgebung.

Aber jedem seine Lieblingsspielzeuge -wobei ich eindeutig zu den Tweenengines rate...


LG ANdré

EDIT: @mods: Vielleicht kann man ja die Threads aufteilen - einen fürs urspr.Problem
und einen für diesen Performancevergleich - ich denke, Performance ist für jeden Flasher ein Riesen-Thema?