Animationen bestehen in Visionaire Studio aus Bildfolgen im Format .png oder .webp, die du im Editor einrichtest. Fertige Animationen wie animierte GIF-Dateien werden nicht unterstützt. Animieren kannst du Charaktere, Szenenobjekte, Items, Buttons in Interfaces und Mauszeiger.

Weitere Wege, Bewegung in deine Szenen zu bringen, sind Movie-Komponenten und Partikelsysteme.


Eine Animation einrichten

Animationseditor

Animationseditor (mit Zeitleiste)

Überall, wo du deinem Projekt eine Animation hinzufügen kannst, gibt es einen Animationseditor. Er besteht aus zwei Teilen: der Zeitleiste und dem Eigenschaftenbereich (siehe Bild).

Die Zeitleiste zeigt eine Reihe kleiner senkrechter Balken, einen pro Frame. Der ausgewählte Frame ist mit einem schwarzen Punkt markiert, das Ansichtsfenster darunter zeigt sein Bild. Mit der grünen Wiedergabeschaltfläche startest du die Vorschau.


Frames hinzufügen

Einen neuen Frame fügst du über das [+]-Symbol hinzu, indem du im Dialog eine Bilddatei wählst. Er landet in der Zeitleiste direkt hinter dem ausgewählten Frame. Meist ist es aber einfacher, eine ganze Bildfolge auf einmal zu importieren. Nummeriere deine Bilder dazu fortlaufend, z. B. „cave_anim_001.png“, „cave_anim_002.png“ usw. Klickst du auf „Framesequenz laden“ und wählst eine Datei der Animation aus, importiert Visionaire die ganze Folge.

Alternativ ziehst du Bilddateien per Drag and Drop aus dem Dateiexplorer in das Ansichtsfenster der Animation. Das geht mit einzelnen Bildern und mit ganzen Folgen; die neuen Frames landen am Ende der Zeitleiste.

Die Reihenfolge der Frames änderst du, indem du die Balken in der Zeitleiste verschiebst.

Über das Stiftsymbol änderst du die Einstellungen des ausgewählten Frames. Neben der Bilddatei kannst du dort zwei weitere Dinge hinzufügen: eine Sounddatei und/oder eine Aktion. Beide werden ausgelöst, sobald die laufende Animation diesen Frame erreicht. So startest und steuerst du Dinge in deinem Spiel über eine Animation. Frames mit Sound oder Aktion erscheinen in der Zeitleiste grün.


Frames anordnen

Animationsframes mit dem Zwiebelschalen-Effekt ausrichten

Am besten legst du alle Bilder einer Animation schon in deinem Animationsprogramm in gleicher Größe an, dann sitzen sie nach dem Import automatisch richtig. Manchmal musst du die Frames aber zueinander ausrichten, zum Beispiel wenn du Charakterframes mit transparentem Hintergrund zugeschnitten hast, um Dateigröße zu sparen. Dann sind die Bilder meist unterschiedlich groß.

Standardmäßig liegt jeder Frame bei den lokalen Animationskoordinaten [0,0]. Ein Klick auf „Versatz-Eingabe“ zeigt die Koordinaten (siehe Bild). Mit der linken Maustaste ziehst du das Bild eines Frames im Ansichtsfenster an eine andere Stelle. Genauer geht es über die Zahlenfelder oder (nach einem Klick ins Ansichtsfenster) mit den Pfeiltasten. Ziehen mit der mittleren Maustaste verschiebt dagegen nur die Ansicht (wie überall im Editor) und nicht den Frame.

Zum Ausrichten hilft der Zwiebelschalen-Effekt: Er legt einen halbtransparenten Referenzframe (Geisterbild) über den Frame, den du bearbeitest. Den Referenzframe wählst du, indem du unten in den hellen Bereich seines Balkens klickst; er wird dann mit einem roten Punkt markiert. Im Beispielbild ist Frame 11 einer Charakteranimation ausgewählt und Frame 1 als Referenz eingeblendet. Frame 1 liegt bei [0,0], Frame 11 wurde auf [3,67] verschoben, damit beide optisch zusammenpassen.


Mittelpunkt der Animation

Den Mittelpunkt der Animation setzen

Manche Animationen brauchen einen Mittelpunkt. Über diesen Punkt wird die Position der Animation bestimmt.

  • Bei Charakteren setzt du den Mittelpunkt zwischen die Füße (siehe Bild), denn dort berechnet die Engine die Position des Charakters.
  • Bei Mauszeigern ist der Mittelpunkt der „Klickpunkt“ (zum Beispiel die Spitze eines Pfeils oder die Mitte eines Kreuzes).


Klicke auf das Fadenkreuz-Symbol und setze den Mittelpunkt mit einem Klick ins Ansichtsfenster, oder gib die Koordinaten in die Zahlenfelder ein.


Animationseigenschaften

Animationseditor (mit Eigenschaftenbereich)

Im Eigenschaftenbereich legst du fest, wie die Animation abläuft.

  • Pausen [ms]: Wie viele Millisekunden jeder Frame angezeigt wird. Je kleiner der Wert, desto schneller läuft die Animation.
  • Durchläufe: Wie oft die Animation läuft, bevor sie wieder ausgeblendet wird. Nur wirksam, wenn „Unendlich“ nicht aktiviert ist.
  • Unendlich: Die Animation wiederholt sich endlos (bis eine Aktion sie stoppt).
  • Vorwärts/rückwärts/zufällig/Pendel abspielen: In welcher Reihenfolge die Frames abgespielt werden. „Pendel“ spielt die Animation abwechselnd vor und zurück.
  • Zufällige Pause zwischen Durchläufen: Fügt zwischen zwei Durchläufen eine zufällige Pause von 5 bis 20 Sekunden ein.
  • Für jedes Bild eine Pause festlegen: Für Animationen, bei denen manche Frames länger oder kürzer zu sehen sein sollen. Du trägst dann in der Zeitleiste für jeden Frame eine Pause in Millisekunden ein (siehe erstes Bild). Frames mit „-1“ behalten die Standardpause aus „Pausen [ms]“.
  • Position der Animation ändert sich vertikal: Für Animationen, die sich senkrecht bewegen. Sie werden dann aus der normalen Zeichenreihenfolge der Szenenobjekte herausgenommen. Gilt nur für Szenenobjekte.
  • Aktion nach Ende der Animation starten: Eine Aktion, die ausgeführt wird, wenn die Animation fertig ist. Läuft die Animation mehrmals, wird die Aktion nur nach dem letzten Durchlauf ausgeführt.


Charakteranimationen

Einige Funktionen und Einstellungen gibt es nur bei Charakteranimationen. Mehr dazu auf der Seite Charaktere.


Eine Animation starten/stoppen

Wie Animationen starten und stoppen, hängt von ihrer Art ab:

  • Animationen von Szenenobjekten startest du mit dem Aktionsteil „Animation abspielen/ausblenden“, außer eine Animation ist als „Standardanimation“ des Objekts eingestellt; dann läuft sie automatisch ab Beginn der Szene. Mit demselben Aktionsteil stoppst du Objektanimationen jederzeit. Für Animationen von Buttons gilt dasselbe.
  • Die meisten Charakteranimationen laufen automatisch: Die Laufanimation startet, sobald der Charakter geht, und wird beim Anhalten durch die Stehanimation ersetzt. Nur die sogenannten „Charakteranimationen“ sind einzelne Animationen, die du mit dem Aktionsteil startest und stoppst.
  • Animationen von Mauszeigern und Items laufen automatisch.


Erweiterte Tipps und Tricks

Animationen lassen sich auch per Code ansprechen und verändern. Beispiele findest du unter Tipps und Tricks für Animationen.