So schön wie Super Mario!

Parallax-Effekte in JavaFX mit FXParallax

Pedro Duque Vieira
 © Shutterstock.com / Morozov Alexey

Den Effekt kennt wohl jeder: Weiter entfernte Objekte scheinen sich langsamer zu bewegen, nahe schneller. Schon im Spieleklassiker Super Mario wurde der sogenannte Bewegungsparallaxe-Effekt eingesetzt, um Tiefe zu erzeugen, manchmal findet er sich auch auf Webseiten. Mit FXParallax lassen sich diese Effekte jetzt auch in JavaFX erstellen.

Die Bewegungsparallaxe ist ein visueller Effekt, bei dem mindestens zwei Schichten von Bildern mit unterschiedlichen Geschwindigkeiten kombiniert werden, um ein Gefühl von Tiefe zu erreichen.

Man kennt das von Fahrten im Auto: Beim Blick aus dem Fenster hat man den Eindruck, dass die Bäume in der Nähe sich schneller bewegen, während die Bäume, die weiter weg sind, sich in die gleiche Richtung bewegen, aber langsamer. Das Ergebnis ist, dass man glaubt, die nahen Bäume würden sich schneller bewegen, die weiter entfernten langsamer.

Fans von Videospielen haben diesen Effekt sicherlich schon einmal gesehen: Zwei oder mehr Bilder werden übereinandergelegt, der Hintergrund bewegt sich langsamer, und was sich im Vordergrund befindet, also der Avatar des Spielers, Objekte oder einfach der Boden, auf dem die jeweilige Spielfigur agiert, bewegt sich schneller. Dies ist ein häufig verwendeter Trick in der Videospielwelt. Angefangen hat das schon vor langer Zeit, ein Beispiel ist die Super-Mario-Videospielserie.

Ein bekanntes Beispiel für den Parallaxe-Effekt ist die Spielreihe Super Mario.

Dieser Effekt wurde im Bereich der Benutzeroberfläche übernommen, wo man ihn auf Websites und in einigen Anwendungen sehen kann, hier ein Beispiel:

Auch auf Websites macht sich der Parallax-Effekt gut.

Mein Ziel war es, den Effekt der Bewegungsparallaxe zu JavaFX zu bringen und ein Framework zur Verfügung zu stellen, mit dem man ihn auf einfache Weise erzeugen oder in eine JavaFX-Anwendung einbauen kann. Der Name dieses Frameworks ist FXParallax.

Bewegungsparallaxe in einer „ListView“

Mein erstes Ziel war es, eine ListView zu erstellen. Das bedeutet, ein Steuerelement mit einem API ähnlich der ListView zu haben, wo man das Hintergrundbild und die Liste der Elemente genau wie in der JavaFX ListView einstellen kann. Dieses Steuerelement nennt sich ParallaxListView.

„ParallaxListView“ implementieren

Um einen Parallax-Effekt zu erzielen, müssen die Elemente in der ListView, sprich die Zellen mit dem Hintergrund, gemeinsam aber schneller scrollen. Dieses neue Steuerelement verwendet die JavaFX ListView mit einem transparenten Hintergrund, der vor einem Hintergrundbild liegt. Das Hintergrundbild befindet sich in einem ScrollPane.

Die erste Herausforderung besteht darin, dass das Scrollen der JavaFX ListView normalerweise durch Sprünge erfolgt. Führt man eine Scroll-Aktion durch, springt die Position von der ursprünglichen Position zur Endposition, ohne die Zwischenpositionswerte zu durchlaufen. Das würde den Effekt zerstören, da es keine Bewegung gibt wie in der realen Welt, sondern nur einen diskreten Satz von Positionen. In der Realität bewegen sich die Objekte im Vordergrund schneller durch eine Übersetzungsanimation.

Man sollte im Kopf behalten, dass es hier darum geht, das Phänomen der realen Welt zu imitieren, wie ich es vorhin getan habe, um ein Gefühl der Tiefe zu vermitteln. Um dieses Gefühl zu erreichen, musste ich mein eigenes ListView-Scrolling sowie ein Hintergrund-Scrolling implementieren, das beim Scrollen eine Reihe von Positionen animiert. Das folgende ist ein Live Capture, das mit der ParallaxListView in ein GIF einer Beispielapplikation umgewandelt wurde, die Bildqualität und Animation ist besser:

Wie beabsichtigt hat die ParallaxListView das gleiche API, wie die JavaFX ListView. Sie erweitert jedoch nicht die ListView, sondern die Control. Im obigen Beispiel werden Elemente durch das Aufrufen von getItems zur ParallaxListView hinzugefügt, genau wie in ListView. Dann genügt es, das Hintergrundbild über die Property backgroundImage zu setzen.

Mit den Standardwerten von ParallaxListView können wir bereits einen schönen Parallax-Effekt erzielen. Wenn wir wollen, können wir den Parallax-Effekt durch vorhandene zusätzliche Eigenschaften weiter anpassen.

Ein Beispiel für „ParallaxListView“. Das Original hat bessere Qualität.

Über die Nutzung

(...)
ParallaxListView parallaxListView = new ParallaxListView<>();
parallaxListView.getItems().addAll("Portugal", "Spain", "United States",
        "Israel", "South Africa", "New Zealand", "Turkey", "Denmark", "Sweden", "Angola", "Canada", "Argentina",
        "Brazil", "Uruguai", "South Korea", "England", "Ireland", "Scotland", "Wales", "Australia", "Peru",
        "Palestine", "Portugal", "Spain", "United States");
Image image = new Image(ParallaxListViewTest.class.getResource("landscape.jpg").toExternalForm());
ImageView imageView = new ImageView(image);
parallaxListView.setBackgroundImage(imageView);

rootNode.setCenter(parallaxListView);
(...)

Die ausführliche Dokumentationsseite finden Interessierte hier: https://www.pixelduke.com/fxparallax. Dort gibt es auch Informationen dazu, wo und wie die Bibliothek erhältlich ist, sei es über Quellcodes, einen Download der Jar-Datei oder über Maven.

Ich habe mich für Java 8 entschieden, da Java 9 noch relativ neu ist und einige Leute vielleicht noch nicht migriert sind. Auf diese Weise können Java 8- und Java 9-Programme FXParallax verwenden.

Ich verwende ein privates API, nämlich VirtualFlow. Aber dieses ist in JavaFX 9 zu einem öffentlichen API geworden, sodass es einfach sein wird, den ParallaxListView-Code zu migrieren. Der Testordner enthält Beispiele für die Verwendung des Controls. Sie müssen nur mit dem Mausrad scrollen, um den Effekt zu sehen.

Fazit und weitere Entwicklungen

Die ParallaxListView kann Anwendungen eine nette Note geben und ein wenig Flair verleihen – aber überstrapazieren sollte man den Effekt nicht.

In Zukunft plane ich, eine allgemeine Steuerung hinzuzufügen, die wahrscheinlich ParallaxPane heißen wird. Damit wird es leichter, eine UI-Komponente mit einem Parallaxe-Effekt zu erstellen. ParallaxPane wird eine Sammlung von Ebenen akzeptieren und wahrscheinlich eine Möglichkeit bieten, die Scrollgeschwindigkeit zu definieren. Wenn es keine große Nachfrage danach gibt, wird man auf ParallaxPane allerdings noch ein wenig warten müssen.

Verwandte Themen:

Geschrieben von
Pedro Duque Vieira
Pedro Duque Vieira
JavaFX and Swing, Freelancer and Consultant – http://www.pixelduke.com - specialized in creating User Interfaces. Has been working as a front end consultant and has been developing web, native and cross platform since 2006. Holder of a master degree in Computer Science, he's permanently studying and taking courses in User Interface Design and User Experience. Owner of the software company Pixel Duke. Twitter: @P_Duke"
Kommentare

Hinterlasse einen Kommentar

Hinterlasse den ersten Kommentar!

avatar
400
  Subscribe  
Benachrichtige mich zu: