STUDIO B12  Büro für digitale Kommunikation  T  0531 28 853 78 0  E  info@studio-b12.de

Grape Animation Library: Tweening mit komplexen Pfaden

Ich bin durch einen Tipp auf eine interessante Tweening-Engine gestoßen, die man für bestimmte Anforderungen sicher im Hinterkopf behalten sollte:
Grape Animation Library
.

Die Herangehensweise dieser Engine unterscheidet sich von den restlichen bekannteren Klassen durch seinen Aufbau: man legt Pfade fest und verknüpft diese dann zB mit einem DisplayObject, um dieses entlang der definierten Positionen tweenen zu lassen. Dabei sind die Objekte nur über ein sogenanntes Binding mit Grape verknüpft, sodass auch physikalische Berechnungen ohne jede Visualisierung problemlos umsetzbar sind.

Doch Schluss mit Theorie, hier ein bisschen Code, mit dem man einen Kreis spiralförmig von innen nach außen tweenen lassen kann:

public function GrapePlayground() {
	var bubble : Shape = new Shape( );
	bubble.graphics.beginFill( 0xf20074 );
	bubble.graphics.drawCircle( 0 , 0 , 10 );
	bubble.graphics.endFill( );
	addChild( bubble );
 
	var spiral : Path2D = new SpiralPath2D( new Point( 200 , 200 ) , 0 , 200 );
	Grape.getInstance( ).create2DAnimation( bubble , spiral , 5000 );
}

Zuerst erstellen wir einen SpiralPath2D, in dem der Mittelpunkt sowie Anfangs- und Endradius festgelegt wird. Anschließend wird die Methode “create2DAnimation” aufgerufen, die als Hilfe gedacht ist und sich zB um das oben angesprochene Binding kümmert. Vermutlich wird diese Funktion in 95% aller Anwendungsfälle ausreichen, für mehr Kontrolle steht die Methode “addAnimation” bereit, die ein Animation-Objekt erwartet. Eben dieses wird bei “create2DAnimation” automatisch erstellt, und kann mit Event.COMPLETE listenern belegt werden, um das Ende des Tweens abzufangen.

Komplexe Pfade, die wiederum aus mehreren, in sich verschachtelten Pfaden bestehen, sind ebenfalls recht simple in Bewegung umzusetzen:

//create the paths that will be added to the complex path
var spiral:Path2D = new SpiralPath2D( new Point( 100, 100 ), 200, 0 );
var linear1:LinearPath2D = new LinearPath2D( new Point( 100, 100 ), new Point( 200, 200 ) );
var linear2:LinearPath2D = new LinearPath2D( new Point( 200, 200 ), new Point( 200, 100 ) );
var linear3:LinearPath2D = new LinearPath2D( new Point( 200, 100 ), new Point( 100, 100 ) );
 
var paths:Vector.
 = Vector.
( [ spiral, linear1, linear2, linear3  ] );
 
//spiral and linear1 will take 25% of the animation's duration, linear2 will take 10%
//and linear3 will take 40%
var cues:Vector. = Vector.( [ 0, 0.25, 0.5, 0.6 ] );
 
//create the complex path
var complex:ComplexPath2D = new ComplexPath2D( paths, cues );
complex.render(this.graphics);
Grape.getInstance( ).create2DAnimation( bubble , complex , 5000, -1, null, true, false, true );

In diesem (aus dem Blog entnommenen) Beispiel wird ein Spiral-Pfad und drei einfache Linienpfade erstellt und in einem ComplexPath2D zusammengeschweißt. Der Vector “cues” ist dabei die Angabe dafür, wann prozentual gesehen die einzelnen Tweens starten sollen.
Ein absolutes Killerfeature bei der Zusammenstellung von Pfaden ist dabei die “render”-Methode, die jede Pfad-Klasse mitbringt. Übergeben wird ihre eine Referenz auf ein Graphics-Objekt, anschließend wird automatisch der Pfad mittels draw-API visualisiert dargestellt – extrem praktisch zum Rumprobieren oder für späteres Feintuning!

Dreh- und Angelpunkt dieser Tweening-Engine sind seine Pfade, von Haus aus kommen folgende Pfadvariationen mit:

  • CatmullRomSplinePath2D
  • CirclePath2D
  • ComplexPath2D
  • CosineSplinePath2D
  • CubicBezierPath2D
  • HermiteSplinePath2D
  • LinearPath2D
  • LinearSplinePath2D
  • Path
  • Path1D
  • Path2D
  • PhysicsPath2D
  • QuadraticBezierPath2D
  • SineWavePath2D
  • SpiralPath2D

Da die Klassen ganz frisch sind, ist leider auch noch keine Dokumentation vorhanden, die vorallem bei einigen etwas aussagelosen Variablennamen geholfen hätte, noch nicht vorhanden, zum Anschauen und Herumspielen reicht es aber auf jeden Fall. Wie ich eingangs schon erwähnte, eignet sich diese Engine vermutlich nur für ganz besondere Fälle, die zB komplexe Pfadanimationen voraussetzen. Daher ein interessanter Ansatz und ein interessantes Nischenprodukt in der Welt der Tweening-Engines.

Übrigens: der Blog generalrelativity beherbergt einige unglaublich interessante Artikel, hauptsächlich aus der Welt der Spieleentwicklung. Da sehr großzügig Lösungsansätze angesprochen und dokumentiert werden, kann man dort sicher einiges dazulernen. Besonders angetan haben es mir dabei noch folgende Entwicklungen:

Bookmark and Share

Dein Kommentar