Sprite-Animationen

Sprite-Engine

Die Qt Quick Sprite-Engine ist eine stochastische Zustandsmaschine, die mit der Fähigkeit kombiniert ist, Bilder, die mehrere Frames einer Animation enthalten, in einzelne Frames zu zerlegen.

Zustandsmaschine

Eine Hauptfunktion der Sprite-Engine ist ihre interne Zustandsmaschine. Diese unterscheidet sich von den Zuständen und Übergängen in „ Qt Quick “ und ähnelt eher einer herkömmlichen Zustandsmaschine. Sprites können gewichtete Übergänge zu anderen Sprites oder zurück zu sich selbst aufweisen. Wenn eine Sprite-Animation endet, wählt die Sprite-Engine das nächste Sprite zufällig aus, basierend auf den gewichteten Übergängen, die für das gerade beendete Sprite verfügbar sind.

Sie können das aktuell abgespielte Sprite auf zwei Arten beeinflussen. Sie können willkürlich erzwingen, dass sofort ein beliebiges Sprite abgespielt wird, oder Sie können anweisen, dass ein allmählicher Übergang zu einem bestimmten Sprite erfolgt. Wenn Sie einen allmählichen Übergang anweisen, erreicht das Sprite das Zielsprite durch gültige Zustandsübergänge unter Verwendung der geringstmöglichen Anzahl dazwischenliegender Sprites (wobei relative Gewichtungen ignoriert werden). Auf diese Weise können Sie ganz einfach eine Übergangsanimation zwischen zwei verschiedenen Sprites einfügen.

Betrachten Sie als Beispiel das obige Diagramm, das die Sprites für einen hypothetischen Charakter aus einem 2D-Plattformspiel veranschaulicht. Der Charakter beginnt mit der Darstellung des Standzustands. Von diesem Zustand aus wechselt er – sofern keine externe Eingabe erfolgt – entweder zur Warteanimation, zur Laufanimation oder spielt erneut die Stand animation ab. Da die Gewichtungen für diese Übergänge jeweils eins, null und drei betragen, besteht eine Wahrscheinlichkeit von eins zu vier, dass die Warteanimation abgespielt wird, wenn die Steh-Animation endet, und eine Wahrscheinlichkeit von drei zu vier, dass die Steh-Animation erneut abgespielt wird. Dies ermöglicht ein leicht animiertes und variables Verhalten des Charakters während des Wartens.

Da es einen Übergang mit der Gewichtung Null zur Laufanimation gibt, wechselt die Steh-Animation normalerweise nicht dorthin. Wenn man jedoch die Zielanimation auf die Laufanimation festlegt, würde die Laufanimation abgespielt, sobald die Steh-Animation beendet ist. Befand sich der Charakter zuvor in der Warteanimation, würde diese zunächst zu Ende abgespielt, dann die Steh-Animation und anschließend die Laufanimation. Anschließend würde die Lauf animation so lange abgespielt werden, bis die Zielanimation deaktiviert wird; erst dann würde nach Beendigung der Lauf animation zur Steh- Animation gewechselt werden.

Wenn du dann den Zielzustand auf die Sprunganimation festlegst, würde die Laufanimation beendet werden, bevor die Sprunganimation abgespielt wird. Da die Sprunganimation nicht in andere Zustände übergeht, wird sie so lange weiter abgespielt, bis der Zustand zwangsweise geändert wird. In diesem Beispiel könntest du den Zustand wieder auf „Gehen“ zurücksetzen und die Zielanimation auf „Gehen“ oder auf „Nichts“ ändern (was dazu führen würde, dass nach der Laufanimation die Standanimation abgespielt wird). Beachte, dass du durch das erzwungene Festlegen der Animation die Wiedergabe sofort starten kannst.

Eingabeformat

Die von der Sprite-Engine akzeptierten Dateiformate entsprechen denen anderer QML-Typen, wie z. B. Image. Um das Bild zu animieren, muss die Bilddatei jedoch alle Frames der Animation enthalten. Diese sollten in einer zusammenhängenden Zeile angeordnet sein, die vom rechten Rand der Datei in eine untere Zeile umbrechen kann, die am linken Rand der Datei beginnt (und direkt unter der vorherigen Zeile platziert wird).

Nehmen Sie als Beispiel das obige Bild. Betrachten Sie vorerst nur die schwarzen Zahlen und gehen Sie davon aus, dass die Quadrate 40 × 40 Pixel groß sind. Normalerweise wird das Bild von der oberen linken Ecke aus eingelesen. Wenn Sie die Bildgröße mit 40 × 40 Pixel und eine Bildanzahl von 8 festgelegt haben, würden die Bilder in der Reihenfolge ihrer Nummerierung eingelesen werden. Das Bild oben links wäre das erste Bild, das Bild oben rechts wäre das fünfte Bild, und dann würde das Programm zur nächsten Zeile springen (an der Pixelposition 0,40 in der Datei), um das sechste Bild einzulesen. Das Einlesen würde nach dem mit 8 gekennzeichneten Bild enden, und sollten sich Bilddaten im Quadrat unterhalb von Bild vier befinden, würden diese nicht in die Animation einbezogen.

Es ist möglich, Animationen ab einem beliebigen Offset zu laden, doch sie folgen weiterhin demselben Muster. Betrachten wir nun die roten Zahlen. Wenn wir festlegen, dass die Animation an der Pixelposition 120,0 beginnt, mit einer Bildanzahl von 5 und derselben Bildgröße wie zuvor, dann werden die Bilder so geladen, wie sie in Rot nummeriert sind. Die ersten 120×40 des Bildes werden nicht verwendet, da ab der Position 120,0 40×40-Blöcke gelesen werden. Wenn das Ende der Datei bei 160,0 erreicht ist, beginnt das Lesen der nächsten Zeile bei 0,40.

Die blauen Zahlen zeigen die Bildnummern an, wenn man versuchen würde, zwei Bilder dieser Größe beginnend bei 40,40 zu laden. Beachte, dass es möglich ist, mehrere Sprites aus einer Bilddatei zu laden. Die roten, blauen und schwarzen Zahlen können alle als separate Animationen in dieselbe Sprite-Engine geladen werden. Der folgende Code lädt die Animationen gemäß der Abbildung. Er legt außerdem fest, dass die Animationen mit 20 Bildern pro Sekunde abgespielt werden sollen.

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

Frames innerhalb einer Animation müssen dieselbe Größe haben. Für mehrere Animationen innerhalb derselben Datei gilt dies jedoch nicht. Bei Sprites ohne Angabe einer „ frameCount “ wird davon ausgegangen, dass sie die gesamte Datei einnehmen, und Sie müssen die Frame-Größe angeben. Bei Sprites ohne Angabe einer Frame-Größe wird davon ausgegangen, dass sie quadratisch sind und die gesamte Datei ohne Umbruch einnehmen, und Sie müssen die Frame-Anzahl angeben.

Die Sprite-Engine kopiert und zerschneidet Bilder intern, um sie in ein leichter lesbares internes Format zu bringen, was zu gewissen Einschränkungen beim Grafikspeicher führt. Da alle Sprites für eine einzelne Engine in derselben Textur enthalten sein müssen, kann der Versuch, viele verschiedene Animationen zu laden, auf eingebetteten Geräten an die Grenzen des Texturspeichers stoßen. In solchen Fällen wird eine Warnung an die Konsole ausgegeben, die die maximale Texturgröße enthält.

Es gibt verschiedene Tools, die dabei helfen, eine Reihe von Bildern in Sprite-Sheets umzuwandeln. Hier sind einige Beispiele:

• Photoshop-Plugin: http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• Gimp-Plugin „SpriteSheet“
• Befehlszeilen-Tool: http://www.imagemagick.org/script/montage.php

QML-Typen zur Verwendung der Sprite-Engine

Sprites für die Sprite-Engine können mithilfe des Typs „ Sprite “ definiert werden. Dieser Typ umfasst die Eingabeparameter sowie die Länge der Animation und gewichtete Übergänge zu anderen Animationen. Es handelt sich um eine reine Datenklasse, die nichts rendert.

SpriteSequence ist ein Typ, der eine Sprite-Engine verwendet, um die darin definierten Sprites zu zeichnen. Es handelt sich um eine eigenständige Sprite-Engine, die nicht mit anderen Sprite-Engines interagiert. „ Sprite “-Typen können zwischen Typen, die eine Sprite-Engine verwenden, gemeinsam genutzt werden, dies geschieht jedoch nicht automatisch. Wenn Sie also ein Sprite in einem „ SpriteSequence “ definiert haben, müssen Sie es in der „sprites“-Eigenschaft eines anderen „ SpriteSequence “ neu definieren (oder auf denselben „ Sprite “-Typ verweisen), um zu dieser Animation überzugehen.

Darüber hinaus können „ ImageParticle “ „ Sprite “-Typen verwenden, um Sprites für jedes Partikel zu definieren. Auch hier gilt: pro Typ gibt es eine eigene Sprite-Engine. Dies funktioniert ähnlich wie bei „ SpriteSequence “, bietet jedoch zusätzlich die durch den Typ „ ImageParticle “ bereitgestellte parametrisierte Variabilität.

Typ „AnimatedSprite“

Für Anwendungsfälle, bei denen keine Übergänge zwischen Animationen erforderlich sind, sollten Sie den Typ „ AnimatedSprite “ in Betracht ziehen. Dieser Typ zeigt Sprite-Animationen mit demselben Eingabeformat an, jedoch jeweils nur eine gleichzeitig. Er bietet zudem eine feinere manuelle Steuerung, da keine Sprite-Engine im Hintergrund das Timing und die Übergänge verwaltet.