Performance Probleme mit geladenen jpgs

[neogucky]

Hallo allerseits,

ich arbeite jetzt schon seit einiger Zeit an einer interaktiven Zeitleiste, jedoch bekomme ich bei größeren Dateien starke Performanceprobleme.

Prinzip der Zeitleiste:
Es werden Thumbnails mit Namen und Jahreszahl auf der x Achse nach Jahreszahl sortiert angezeigt. Durch Klicken erhält der Anwender weitere Informationen, durch ein "ziehen" der Leiste kann man die Thumbnails verschieben um sich so durch die Zeit zu bewegen. Insagesamt gibt es 3 Reihen dieser Thumbs die übereinander sind.


Problem:
Bei mehr als 50 Einträgen wird das ganze sehr ruckelig. Jedoch hat die Anwendung laut Taskmanager nur 40MB Arbeitsspeicher und max. 15% CPU Auslastung.

Realisierung (mögliche Ursachen):
Laden der Thumbs:

imageThumbs[line][id] = new Loader();
imageThumbs[line][id] = loadSomeImage(fileName);

function loadSomeImage(fileName:String):Loader {
	var imageRequest:URLRequest=new URLRequest(fileName);//define source
	var ret = new Loader();
	ret.load(imageRequest);//load from defined source
	return ret;
}

Bewegung der Thumbs:

function updateImages():void {
	var i:int; 
	var j:int; 
	for (i = 0; i < 3; i++) 
	{ 
		for (j = 0; j < n[i]; j++) 
		{ 
			//nur aktualisieren wenn Bild im Anzeigebereich ist (big-data-lag fix)
			if (((saveDates[i][j] - tmpDate)*pixelsPerYear > - 500) && ((saveDates[i][j] - tmpDate)*pixelsPerYear < SCREEN_WIDTH + 500)){
				imageThumbs[i][j].x = (saveDates[i][j] - tmpDate)*pixelsPerYear;	
				avatarCaption[i][j].x = imageThumbs[i][j].x + (imageThumbs[i][j].width - avatarCaption[i][j].width) / 2;
				avatarDate[i][j].x = imageThumbs[i][j].x  + (imageThumbs[i][j].width - avatarDate[i][j].width) / 2;
			}
		}
	} 
}

Ich hoffe, dass mir hier jemand einen Tipp geben kann, wo das Problem liegt. Falls Einsicht in die Zeitleiste gewünscht wird kann ich eine URL per PM verschicken. Aus bestimmten Gründen kann ich die URL hier nicht öffentlich posten.

[stiffmeister]

hm also nachdem ich jetzt mal schnell über deinen code geguggt habe kann ich mit nem schnellschuss sagen:

- es könnte an deiner sehr verschachtelten formel liegen in updateImages().
- es könnte an eventuellen transparenzen oder effekten wie glow, schatten, usw die auf der zeitleiste sowie thumbnails verbaut worden sind, liegen.

was mir aber mal helfen würde wäre ein link zu der zeitleiste damit ich das ding mal aktiv betrachten kann. geht das?

grüße

[Oxigan]

PHP-Code:

function updateImages():void {
    var i:int; 
    var j:int; 
    for (i = 0; i < 3; i++) 
    { 
        for (j = 0; j < n[i]; j++) 
        { 
            //nur aktualisieren wenn Bild im Anzeigebereich ist (big-data-lag fix)
            var tmp:Number = (saveDates[i][j] - tmpDate) * pixelsPerYear;
            if ((tmp > - 500) && (tmp < SCREEN_WIDTH + 500)){
                imageThumbs[i][j].x = tmp;    
                avatarCaption[i][j].x = imageThumbs[i][j].x + (imageThumbs[i][j].width - avatarCaption[i][j].width) / 2;
                avatarDate[i][j].x = imageThumbs[i][j].x  + (imageThumbs[i][j].width - avatarDate[i][j].width) / 2;
            }
        }
    } 
} 


schonmal die erste verbesserung des algo....

[neogucky]

Danke für die Antwort, habe dir nen Link geschickt. Dort ruckelt es übrigens nicht, da online nur wenige Einträge eingetragen sind. (Die Leiste soll eigentlich lokal auf einem Touch-Screen laufen)

Also die verschachtelte Formel funktioniert. Ich verschiebe sogar nur die Elemente in der Nähe des sichtbaren Bereichs um den Aufwand gering zu halten... Natürlich kann es an den Schleifendurchgängen liegen aber da die Laufzeit linear ist würde mich das schon wundern.

Effekte benutze ich gar keine.

@Oxigan:
Das nimmt jetzt 2 additionen raus... sollte in einer Schleife eigentlich egal sein. (Siehe Linearität)

[Martin Kraft]

Auch wenn ich nicht garantieren kann, dass es tatsächlich was damit zu tun hat, würde ich Dir empfehlen, nicht mit Unmengen an parallelen, 2dimensionalen Arrays zu arbeiten...

PHP-Code:

imageThumbs[i][j];
avatarCaption[i][j];
avatarDate[i][j];
saveDates[i][j]; 


... sondern stattdessen die Daten eines Bildes in einer eigenen Klasse zusammenzufassen und in der for-Schleife mit einer lokalen Referenz auf die aktuelle Instanz zu arbeiten:

PHP-Code:

var image:Image = images[i][j];
image.thumb;
image.avatarCaption;
image.avatarDate;
image.saveDate; 


[neogucky]

Danke Martin, auch wenn ich nicht glaube, dass das etwas mit der Performance zu tun hat sieht es deutlich übersichtlicher aus!

Ich muss auch dazu sagen, dass ich das Projekt angefangen hatte als ich mit AS3 das erste mal gearbeitet habe und daher einiges drin habe das ich nicht so mag. Aber da das Programm fast 2000 Zeilen an Code hat möchte ich nicht alles neu machen.

[Oxigan]

Zitat von neogucky

@Oxigan:
Das nimmt jetzt 2 additionen raus... sollte in einer Schleife eigentlich egal sein. (Siehe Linearität)

unrecht du hast. Genau sowas sollte man vermeiden und vorallem gerade in enter frames. Wenn du sowas als nicht notwendig erachtest, möchte ich nicht sehen wie es in deinem enter_frame aussieht... ( ich schätze mal updateImages() wird aus der enter_frame aufgerufen )

[stiffmeister]

nicht nur weil ich den Oxigan privat kenne sondern auch weil er recht hat stimme ich dem zu. ausserdem sollte man rechnungen nicht in der for oder while schleife abhandlen lassen sondern bereits ausserhalb, ausser es geht wirklich nicht anders. auch dies bringt einen performance schub (minimal aber in millisekunden doch etwas ....)

weiters merke dir: auch kleinvieh macht mist!

danke für den link. bei mir ruckelt es jetzt schon mit den wenigen einträgen, dies liegt aber mehr an den bildern, warum? nja pixelgenauigkeit und die raster der tft monitoren. egal, probier mal die bilder als bitmap zu laden und dann smoothing = true anzuwenden.

ausserdem wäre hier deine drag & drop function hilfreich. wenn dus mit dem flash eingebauten drag() machst, vergiss es gleich

[neogucky]

Wie ich schon sagte, Linearität ist das wichtige. Wenn 2 Additionen mein Programm runterziehen in der Schleife ist was grundlegendes falsch.

Das mit dem Bitmap laden kann ich gerne mal probieren. Wie genau mache ich das?

Wäre es vielleicht auch möglich die gesamte Ebene zu bewegen und dadurch Operationen zu sparen?

Die Bewegung habe ich mit Mouse up/down/move Events realisiert in denen ich das "tmpDate" je nach Mausbewegung verändere. Außerdem wird dann im MouseMove die UpdateImages aufgerufen.

[stiffmeister]

hmm. ok. als erster lädst du das bild mit der Loader() class. dannach bei Event.INIT sagst du ...

PHP-Code:

...
{
loader.addEventListener(Event.INIT, imageLoaded);
}

private function imageLoaded(e:Event):void
{
var img:Bitmap = e.target.content;
img.smoothing = true;
deinZiel.addChild(img);
} 


und wie schon erwähnt: wie sieht deine darg & drop function aus? sind die thumbnails alle samt in einem kontainer und du ziehst den kontainer oder werden alle thumbnails einzelen mit der mausbewegung errechnet (= wäre der größte schmarrn)

[neogucky]

Na updatesImages ist vermutlich die Funktion die du mit "Drag & Drop Funktion" meinst. Und ja, da werden alle Bilder (die im Anzeigebereich sind) einzeln auf die richtige Position gebracht.

Alle in einen Container zu setzen wäre eine Möglichkeit die ich gerne nutzen würde, nur leider weiß ich nicht wie das funktioniert. Falls du da nen Tipp für mich hast probiere ich den auch gerne aus!

[stiffmeister]

PHP-Code:

private var con:Sprite;

private function addContainers():void
{
con = new Sprite();
this.addChild(con);
}

private function loadAllThumbnails():void
{
con.addChild(alleDeineThumbnails);
} 


mehr gibt es in as3 nicht zu sagen.

[neogucky]

Danke für den Tipp, das hört sich ja genau nach dem an was ich suche. Jedoch konnte es das Ruckeln auch nicht lösen.

Gibt es eine Möglichkeit sowas über die GPU gehen zu lassen? Oder auch über andere Methoden Flash mehr Rechenkapazität zu geben? Denn Flash nutzt ja lange nicht alles, was mein Rechner zu bieten hat.

[ING]

gpu geht nicht, es ist einfach so das in flash das verschieben von vielen bild objekten gleichzeitig (auch wenn sie alle in einem container sind) enorm an der performance zieht, das war irgendwie schon immer so, auch wenn es nur kleine bilder sind.

hatte das problem auch mal wo man diverse thumbs nach links und recht verschieben konnte. das einzigste was half ware die ganzen bilder in ein bitmapdata objekt zu kopieren und nur noch dieses anzuzeigen und verschieben.

ist ein ziemlicher aufwand aber performance mäßig nicht zu toppen

[neogucky]

Hm meine Bilder sind recht weit auseinander. Das wäre dann ja quasi ein Bild mit einer Breite von ca. 80.000 Pixeln wenn ich dich richtig verstehe. Ist das dann auch noch performant?

Falls ja, magst du mir deine Funktion zum erstellen des bitmapdata objekts einmal zeigen? Also Wie du da alle Bilder reinsetzt?