Rendern von Textobjekten

Die Flash Text Engine ermöglicht einige sehr gute Optimierungen. Es sind jedoch zahlreiche Klassen erforderlich, um eine einzelne Textzeile anzuzeigen. Deshalb erfordert die Erstellung eines bearbeitbaren Textfeldes mit der TextLine-Klasse relativ viel Arbeitsspeicher und zahlreiche Zeilen mit ActionScript-Code. Die TextLine-Klasse eignet sich am besten für statischen und nicht bearbeitbaren Text, da sie hier ein schnelleres Rendern ermöglicht und weniger Arbeitsspeicher beansprucht.

Mit der Bitmap-Zwischenspeicherung können Sie Vektorinhalt in Form von Bitmaps im Cache zwischenspeichern, um die Renderleistung zu verbessern. Dieses Funktionsmerkmal eignet sich für komplexe Vektorinhalte und für die Verwendung von Textinhalt, der beim Rendern Verarbeitungsleistung erfordert.

Das folgende Beispiel zeigt, wie Sie mit der Bitmap-Zwischenspeicherung und der opaqueBackground -Eigenschaft die Renderleistung verbessern können. Die folgende Abbildung zeigt einen typischen Willkommensbildschirm, der beispielsweise angezeigt wird, während der Benutzer darauf wartet, dass Objekte geladen werden:

Die folgende Abbildung zeigt die Beschleunigung, die programmatisch auf das TextField-Objekt angewendet wird. Der Text wird langsam vom oberen Szenenrand bis zur Mitte der Szene beschleunigt.

Mit dem folgenden Code wird die Beschleunigung erstellt. Die preloader -Variable enthält das aktuelle Zielobjekt, damit Eigenschaften weniger häufig nachgeschlagen werden müssen, was zu Leistungseinbußen führen könnte:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
var destX:Number=stage.stageWidth/2; 
var destY:Number=stage.stageHeight/2; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(preloader.y-destY)<1) 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
}

Die Math.abs() -Funktion könnte hier inline platziert werden, um die Anzahl der Funktionsaufrufe zu verringern und weitere Leistungsvorteile zu erzielen. Es empfiehlt sich, den int-Datentyp für die Eigenschaften destX und destY zu verwenden, damit Festkommawerte entstehen. Durch Verwendung des int-Datentyps erzielen Sie eine perfekte Pixelausrichtung, ohne dass Werte mithilfe von langsamen Methoden wie Math.ceil() oder Math.round() manuell gerundet werden müssen. Dieser Code rundet die Koordinaten nicht in den int-Datentyp, da durch eine kontinuierliche Rundung der Werte keine gleichmäßige Bewegung des Objekts entsteht. Das Objekt kann sich ruckartig bewegen, da die Koordinaten in jedem Bild an die nächsten gerundeten Ganzzahlen ausgerichtet werden. Diese Technik kann jedoch nützlich sein, um die endgültige Position eines Anzeigeobjekts festzulegen. Der folgende Code sollte nicht verwendet werden:

// Do not use this code 
var destX:Number = Math.round ( stage.stageWidth / 2 );  
var destY:Number = Math.round ( stage.stageHeight / 2); 

Der folgende Code ist wesentlich schneller:

var destX:int = stage.stageWidth / 2;  
var destY:int = stage.stageHeight / 2; 

Der vorherige Code kann noch weiter optimiert werden, indem Operatoren zur bitweisen Verschiebung verwendet werden, um die Werte zu teilen:

var destX:int = stage.stageWidth >> 1;  
var destY:int = stage.stageHeight >> 1;

Dank der Bitmap-Zwischenspeicherung kann die Laufzeitumgebung Objekte mithilfe von dynamischen Bitmaps einfacher rendern. Im aktuellen Beispiel wird der Movieclip, der das TextField-Objekt enthält, im Cache zwischengespeichert.

wait_mc.cacheAsBitmap = true;

Eine weitere Leistungssteigerung lässt sich erzielen, indem die Alphatransparenz entfernt wird. Alphatransparenz belastet die Laufzeitumgebung zusätzlich, wenn transparente Bitmapbilder gezeichnet werden wie im vorherigen Codebeispiel. Sie können dies vermeiden, indem Sie die opaqueBackground -Eigenschaft verwenden und eine Hintergrundfarbe angeben.

Bei Verwendung der opaqueBackground -Eigenschaft belegt die im Arbeitsspeicher erstellte Bitmapoberfläche immer noch 32 Bit. Der Alphaversatz ist jedoch auf 255 eingestellt und es wird keine Transparenz verwendet. Deshalb verringert die opaqueBackground -Eigenschaft zwar nicht die Arbeitsspeicherbelastung, aber sie verbessert die Renderleistung, wenn die Bitmap-Zwischenspeicherung verwendet wird. Der folgende Code enthält alle Optimierungen:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
  
// Set the background to the color of the scene background 
wait_mc.opaqueBackground = 0x8AD6FD; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
  
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
        e.currentTarget.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
}

Die Animation ist nun optimiert. Die Bitmap-Zwischenspeicherung wurde durch Entfernen der Transparenz optimiert. Bei Verwendung der Bitmap-Zwischenspeicherung empfiehlt es sich auf Mobilgeräten möglicherweise, die Bühnenqualität je nach Animationsstatus zwischen LOW und HIGH zu wechseln:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
wait_mc.cacheAsBitmap = true; 
wait_mc.opaqueBackground = 0x8AD6FD; 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth>>1; 
var destY:int = stage.stageHeight>>1; 
var preloader:DisplayObject; 
  
function movePosition( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if (Math.abs(e.currentTarget.y-destY)<1) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener( Event.ENTER_FRAME, movePosition ); 
    } 
}

In diesem Fall bewirkt eine Änderung der Bühnenqualität jedoch, dass die Laufzeitumgebung die Bitmapoberfläche des TextField-Objekts neu generieren muss, um sie an die aktuelle Bühnenqualität anzupassen. Deshalb sollte die Bühnenqualität bei Verwendung der Bitmap-Zwischenspeicherung nicht geändert werden.

Sie hätten hier auch ein manuelles Verfahren zur Bitmap-Zwischenspeicherung verwenden können. Zur Simulation der opaqueBackground -Eigenschaft kann der Movieclip als nicht transparentes BitmapData-Objekt gezeichnet werden; bei diesem Verfahren muss die Laufzeitumgebung die Bitmapoberfläche nicht neu generieren.

Dieses Verfahren eignet sich gut für Inhalt, der sich im Laufe der Zeit nicht ändert. Wenn der Inhalt des Textfeldes sich jedoch ändern kann, sollten Sie eine andere Strategie in Betracht ziehen. Nehmen wir als Beispiel ein Textfeld, das kontinuierlich mit einem Prozentsatz aktualisiert wird, um zu zeigen, wie weit die Anwendung bereits geladen wurde. Wenn das Textfeld oder das zugehörige Anzeigeobjekt als Bitmap zwischengespeichert wurde, muss seine Oberfläche bei jeder Änderung des Inhalts neu generiert werden. Die manuelle Bitmap-Zwischenspeicherung kann hier nicht verwendet werden, da der Inhalt des Anzeigeobjekts sich fortlaufend ändert. Wegen dieser konstanten Änderung müssten Sie die BitmapData.draw() -Methode manuell aufrufen, um die zwischengespeicherte Bitmap zu aktualisieren.

Denken Sie daran, dass seit Flash Player 8 (und AIR 1.0) unabhängig von der Qualitätseinstellung der Bühne für ein Textfeld mit der Einstellung „Anti-Aliasing für Lesbarkeit“ ein vollkommenes Anti-Aliasing erfolgt. Dieses Verfahren belegt etwas weniger Arbeitsspeicher, erfordert aber mehr CPU-Leistung und etwas mehr Zeit zum Rendern als die Bitmap-Zwischenspeicherung.

Diese Technik wird im folgenden Code verwendet:

wait_mc.addEventListener( Event.ENTER_FRAME, movePosition ); 
  
// Switch to low quality 
stage.quality = StageQuality.LOW; 
var destX:int = stage.stageWidth >> 1; 
var destY:int = stage.stageHeight >> 1; 
var preloader:DisplayObject; 
function movePosition ( e:Event ):void 
{ 
    preloader = e.currentTarget as DisplayObject; 
     
    preloader.x -= ( preloader.x - destX ) * .1; 
    preloader.y -= ( preloader.y - destY ) * .1; 
     
    if ( Math.abs ( preloader.y - destY ) < 1 ) 
    { 
        // Switch back to high quality 
        stage.quality = StageQuality.HIGH; 
        preloader.removeEventListener ( Event.ENTER_FRAME, movePosition ); 
    } 
}

Die Verwendung dieser Option („Anti-Aliasing für Lesbarkeit“) für beweglichen Text wird nicht empfohlen. Beim Skalieren von Text wird durch diese Option versucht, die Ausrichtung des Textes beizubehalten, wodurch ein Verschiebungseffekt entsteht. Wenn der Inhalt des Anzeigeobjekts sich ständig ändert und skalierter Text erforderlich ist, können Sie die Leistung bei Mobilgeräten jedoch verbessern, indem Sie die Qualität auf LOW einstellen. Nach beendeter Bewegung wechseln Sie wieder zur Qualitätseinstellung HIGH .

Twitter™- und Facebook-Beiträge fallen nicht unter die Bestimmungen von Creative Commons.