Partikel auf der Powerflasher Webseite

Warum haben wir uns auf unserer Webseite für Partikel entschieden? Die Partikel stehen symbolisch für das Team, den Spirit und die Energie der Powerflasher. Sie sind flexibel und passen sich agil den unterschiedlichsten Formen an. Außerdem sind sie schön anzuschauen und es macht Spaß mit ihnen zu spielen. Die Darstellung von Partikelströmen in Flash war eine tolle Herausforderung.

Wir setzen zwei Sorten von Partikeln ein.

1. Beim Rollover Effekt der Buttons werden Partikel in Pixelgröße eingesetzt. Diese wurden auf der Basis des Flint Partikel Systems umgesetzt.
2. Zwischen dem Hintergrund und den Inhalten bewegen sich Partikelströme in dreidimensionalen Raum. Die Tiefenwirkung entsteht durch den Einsatz von Flächen mit variierender Unschärfe. Diese Partikel sind hausgemacht.

Zu den hausgemachten 3D Partikelströmen.

Es gibt folgende Bewegungen:

• Zielpositionen in einem Screen ansteuern
• Der Maus folgen
• Anzeigen einer Form
• Interaktion mit Sound

So ergibt sich ein steter Wechsel an Interaktion. Die Ströme orientieren sich an den leitfarbenen Flächen der Inhalte, interagieren mit dem User, formen individuelle Hintergründe und synchronisieren ihre Bewegungen mit der Hintergrundmusik.

Ziel war es hohe Geschwindigkeiten über den gesamten Screen zu erreichen. Um schnell layouten zu können sollte die Konfiguration einfach sein.

Details zur Programmierung:

Optimierung der Render Performance

• Alle Partikel (Größe und Farbe) werden als Vektor von BitmapData vorberechnet
• Der Zugriff auf ein Partikel ist sehr effizient: circleParticles.particleImage[colorBucketIndex + imageSizeIndex]
• BitmapData liegt über der gesamten Bühnengröße. Um den Flash Redraw optimal klein zu halten wird immer der Bereich gespeichert, wo zuletzt Partikel waren (top-left/ bottom-down)
• Nur dieser Bereich wird gelöscht (BitmapData.fillRect) -> dadurch wird ein optimal kleiner Redraw erreicht (Siehe DebugPlayer -> Show Redraw Regions)
• Insgesamt kostet der Redraw von 1000 Partikeln so höchstens 8ms (MacBook Pro 4.1)
• Es erfolgen nur sehr wenig Methodenaufrufe
• Es laufen nur 2 Schleifen über alle Partikel (Bewegung und Rendering)

Form und Bewegung

• Formen definieren für jedes Partikel eine Zielposition, die sich in jedem Frame auch ändern kann (z.B. drehende Formen, Mouse follow)
• Jede Form hat eine Anzahl an benötigten Partikeln
• Die Engine hat immer eine aktuelle Form, aber Partikel können auch noch in alten Formen feststecken, da sie nur nach und nach rausgelassen werden. So entsteht unter anderem das Strom-Verhalten
• Unterscheidet sich die Anzahl der benötigen Partikel, lässt die Engine Partikel sterben oder klont Partikel, ohne dass der Betrachter dies bemerkt
• Jedes Partikel bemüht sich nun pro Frame seine von der Form vorgegebene Zielposition zu erreichen
• Bei dem Übergang in die Views wird die Form aus dem Zielbild berechnet (z.B. alle Partikel zu den roten Farben)
• In den Views wird nach 10 Sekunden die Form aus 3d Funktionen errechnet und mit Assets (Linien, Dreiecke) ergänzt, auch hierbei werden alle Partikel in nur einer Schleife ohne Methodenaufrufe verarbeitet
• Die Definition und  Zuweisung der Formen erfolgt programmatisch und ist nicht sehr geschwätzig