Graubünden Kinder Ferienwelten
Webvideo

Wer kennt sie nicht, die zwei legendären Steinböcke aus Graubünden?

Für die neue Web-App "Kinderwelt" durften wir die witzigen Animationen umsetzen.

Als Ausgangspunkt, um die passenden Familienferien im Bünderland zu finden, wurde die neue Web-App "Kinderwelt" entwickelt. Für diese App durften wir einerseits alle Animationen kreieren, andererseits auch die Technik für das Hauptmenü planen und testen.

Da die Animationen anschliessend in die Web-Programmierung miteinfliessen sollten, wurde genau darauf geachtet, die anfallenden Datenmengen möglichst tief zu halten. Unter anderem mit einer tieferen Framerate und einem optimierten Kompressionsverfahren.

Das Hauptmenü

Eine besondere Herausforderung war die Erstellung des Hauptmenüs. Ziel war es Gian und Giachen auf einem Hügel im Zentrum zu setzen und die Kamera sollte sich dann um diesen Hügel drehen. Wenn aber nur 2D-Layer zur Verfügung stehen ist dies praktisch unmöglich. Wir haben uns schlussendlich dazu entschieden die Vorder- und Hintergrundlayer gegensätzlich zu bewegen. So entsteht die Illusion einer Rotation. Wenn diese Layer gut aufeinander Abgestimmt sind, kann mach sich sogar endlos und ohne Übergang im "Kreis drehen". Wir haben hier in 3D Studio Max einen Prototypen erstellt um die Technik zu testen. Renuo hat dies dann im Web umgesetzt und auf der Website implementiert.

Spritesheets

Damit die Animationen auf der Website dynamisch eingebunden und abgespielt werden können, haben wir uns dazu entschieden, Spritesheets zu erstellen. Dies hat auch den weiteren Vorteil, dass die Animationen auf mobilen Geräten eine bessere Performance haben. Der Nachteil von Spritesheets hingegen ist, dass die Auflösung limitiert ist und wir somit für die Animation nur sehr wenige Frames (Einzelbilder) zur Verfügung haben.
D.h. wir mussten möglichst kurze Loops erstellen. Zudem haben wir uns dazu entschieden, die Frame-Rate zu reduzieren (auf 12 fps) um noch mehr Frames zu sparen.

Credits

Client

Graubünden Tourismus

Agency

WIRZ Communications AG

Production Company

Guave Motion

Web Development

Renuo

2D Animation

David Fritsche, Andreas Tanner

Illustration

Amélie Jackowski