Exportieren von Animationen für Apps und Game-Engines

Erstellen Sie ein Spritesheet oder einen Texturatlas und exportieren Sie die Animationen für Apps und Game-Engines. Importieren Sie einen Texturatlas mithilfe des Plug-ins in Unity oder eine andere Game-Engine.

Mit Animate CC können Sie Spritesheets oder Texturatlas-Animationen erstellen und sie für Apps und Game-Engines exportieren.

Spritesheet

Ein Spritesheet ist eine Bitmapbilddatei, die mehrere kleinere Grafiken in einer Kachelanordnung enthält. Durch das Kompilieren mehrerer Grafiken in einer einzelnen Datei ermöglichen Sie Animate und anderen Anwendungen die Verwendung der Grafiken, ohne dass mehrere Dateien geladen werden müssen. Diese effiziente Ladeweise kann hilfreich sein, wenn die Leistung besonders wichtig ist, zum Beispiel bei der Spieleentwicklung.

Ein Spritesheet, das die Sprites in einer Frame-für-Frame-Animation enthält.

Sie können ein Spritesheet aus einer beliebigen Kombination von Movieclips, Schaltflächensymbolen, Grafiksymbolen oder Bitmaps erstellen. Sie können Elemente entweder in der Bibliothek oder auf der Bühne auswählen, nicht jedoch in beiden. Jede Bitmap und jedes Bild der ausgewählten Symbole erscheint im Spritesheet als eine separate Grafik. Beim Export von der Bühne bleiben alle Transformierungen (Skalierung, Neigen usw.), die Sie auf die Symbolinstanz angewendet haben, in der Bildausgabe erhalten.

Texturatlas

Beim Texturatlas handelt es sich um eine Sammlung von Texturen, die als einzelnes großes Bild gespeichert sind. Sie können Ihr Spiel optimieren, indem Sie einen Texturatlas erstellen und ihn in Ihrer Spiele-App verwenden.

In Animate können Sie einen Texturatlas aus Symbolen wie Movieclips, Grafiken oder Schaltflächen erstellen. Sie können Elemente entweder in der Bibliothek oder auf der Bühne auswählen, nicht jedoch in beiden. Jeder Vektor und jeder Keyframe der ausgewählten Symbole erscheint als separate Bitmap im Texturatlas. Beim Export von der Bühne bleiben alle Transformierungen (Skalierung, Neigen usw.), die Sie auf die Symbolinstanz angewendet haben, in der Bildausgabe erhalten.

Unterschied zwischen einem Spritesheet und einem Texturatlas

Abhängig von Ihren Anforderungen können Sie in Ihren Apps entweder ein Spritesheet oder einen Texturatlas verwenden. Einige der wichtigsten Unterschiede zwischen Spritesheet und Texturatlas sind in der folgenden Tabelle aufgeführt.

Leistung	Spritesheet	Texturatlas
Performance in Apps	Niedrig	Hoch
Effizienz beim App-Laden	Hoch, da keine Berechnung erfolgt	Gering, da die JSON-Datei berechnet werden muss
Größe	Belegt mehr Speicherplatz	Belegt weniger Speicherplatz
Qualität der Animationen	Mittel	Hoch
Anzahl generierter Dateien	Zwei Dateien: eine Bitmap und eine JSON-Datei	Drei Dateien: eine Bitmap und zwei JSON-Dateien
Anzahl generierter Bitmaps	Je nach Anzahl der im Spritesheet verwendeten Bilder kann die Anzahl der Bitmap-Dateien und damit auch die Spritesheetgröße zunehmen.	Im Sprite werden nur eindeutige Bitmaps generiert, wodurch die Gesamtgröße reduziert wird

Um ein Spritesheet zu erstellen, gehen Sie wie folgt vor:

Wählen Sie ein Symbol oder mehrere Symbole in der Bibliothek oder Symbolinstanzen auf der Bühne aus. Die Auswahl kann auch Bitmaps enthalten.

Klicken Sie mit der rechten Maustaste auf die Auswahl und wählen Sie „Spritesheet erstellen“.

Wählen Sie im Dialogfeld Spritesheet erstellen die gewünschten Optionen aus und klicken Sie auf Exportieren.

Exportoption	Beschreibung
Bildabmessungen	Die Gesamtgröße des Spritesheets in Pixel. Die Standardeinstellung ist „Automatische Größe“, die das Sheet so dimensioniert, dass alle einbezogenen Sprites Platz finden.
Bildformat	Das Dateiformat des exportierten Spritesheets. „PNG 8 Bit“ und „PNG 32 Bit“ unterstützen die Verwendung eines transparenten Hintergrunds (Alpha-Kanal). „PNG 24 Bit“ und „JPG“ unterstützen keine transparenten Hintergründe. Im Allgemeinen ist der optische Unterschied zwischen „PNG 8 Bit“ und „PNG 32 Bit“ nur gering. Dateien im Format „PNG 32 Bit“ sind jedoch viermal größer als Dateien im Format „PNG 8 Bit“.
Rahmenfüllung	Der Abstand um die Ränder des Spritesheets in Pixel.
Formfüllung	Der Abstand zwischen den einzelnen Bildern des Spritesheets in Pixel.
Algorithmus	Die Technik, die zum Packen der Bilder im Spritesheet verwendet wird. Es gibt zwei Optionen: Basic (Standard) MaxRects
Datenformat	Das interne Format, das für die Bilddaten verwendet wird. Wählen Sie das Format, das am besten zum beabsichtigten Arbeitsablauf für das Spritesheet nach dem Exportieren geeignet ist.
Drehen	Dreht die Sprites um 90°. Diese Option ist nur für bestimmte Datenformate verfügbar.
Zuschneiden	Diese Option spart Platz im Spritesheet, indem nicht verwendete Pixel (Leerraum) von jedem Symbolbild, das dem Sheet hinzugefügt wurde, entfernt werden.
Bilder stapeln	Mit dieser Option verhindern Sie, dass doppelt vorhandene Bilder innerhalb des ausgewählten Bildes im resultierenden Spritesheet dupliziert werden.

Exportieren der Spritesheetanimation für Apps

Train Simple - Matthew Pizzi

Spielentwickler können Animate nutzen, um Animationen zu orchestrieren und als Texturatlas für die Unity-Game-Engine oder eine andere Gaming-Plattform zu exportieren.

Das Generieren eines Texturatlasses in Animate und das Importieren in Unity werden im folgenden Diagramm dargestellt:

Abbildung, die den Arbeitsablauf für die Erstellung des Texturatlasses und dessen Import in Unity zeigt.

Um den Texturatlas für die Animation zu generieren, führen Sie die folgenden Schritte aus:

Sie können in Animate einen Texturatlas für ein aus der Bibliothek ausgewähltes Symbol oder eine Symbolinstanz auf der Bühne generieren.

Klicken Sie mit der rechten Maustaste auf das Symbol und wählen Sie im Kontextmenü die Option Texturatlas erzeugen aus. Das Fenster Texturatlas erzeugen wird angezeigt.

Texturatlas erzeugen

Wählen Sie die gewünschten Exportoptionen für den Texturatlas.

Exportoption	Beschreibung
Bildabmessungen	Die Gesamtgröße des Texturatlas in Pixel. Die Standardeinstellung ist „Automatische Größe“, die das Sheet so dimensioniert, dass alle einbezogenen Bilder Platz finden.
Bildformat	Das Dateiformat des exportierten Spritesheets. „PNG 8 Bit“ und „PNG 32 Bit“ unterstützen die Verwendung eines transparenten Hintergrunds (Alpha-Kanal). Im Allgemeinen ist der optische Unterschied zwischen „PNG 8 Bit“ und „PNG 32 Bit“ nur gering. Dateien im Format „PNG 32 Bit“ sind jedoch viermal größer als Dateien im Format „PNG 8 Bit“.
Rahmenfüllung	Der Abstand um die Ränder des Texturatlas in Pixel.
Formfüllung	Der Abstand zwischen den einzelnen Bildern des Texturatlas in Pixel.
Algorithmus	Die Technik, die zum Packen der Bilder im Texturatlas verwendet wird. Es gibt zwei Optionen: Basic (Standard) MaxRects
Datenformat	Das interne Format, das für die Bilddaten verwendet wird. Die Standardeinstellung ist das JSON-Format.
Drehen	Dreht die Bilder um 90 Grad. Diese Option ist nur für bestimmte Datenformate verfügbar.
Geneigte Objekte in Bitmap reduzieren	Wählen Sie diese Option, wenn Sie geneigte Transformierungen für Ihre Objekte nutzen. Animate konvertiert diese Objekte in Bitmapbilder, da einige Game-Engines die Neigungstransformation nicht richtig interpretieren.

Um eine Vorschau der Texturatlas-Ausgabe anzuzeigen, klicken Sie auf die Registerkarte Vorschau.

Vorschau des Texturatlasses nach der Erstellung

Klicken Sie auf Durchsuchen und wählen Sie den Zielpfad auf Ihrem Computer aus oder geben Sie den Pfad in den Textbereich ein und klicken Sie auf Exportieren.

Der für den Texturatlas generierte Ausgabeordner enthält die folgenden Dateien:

Animation.json

Diese Datei enthält Informationen über die Animation.

spritemap.json

Diese Datei enthält Informationen über die Datei spritesheet.png.

spritemap.png

Diese Datei enthält eine Bitmap-Darstellung sämtlicher minimaler eindeutiger Texturen für das exportierte Symbol, die zur Rekonstruktion der Animation nötig sind.

Sie können den generierten Texturatlas mit dem geeigneten Plug-in für den Import in einer beliebigen Game-Engine (z. B. Unity) verwenden.

Sie können die in Animate erzeugten Texturatlas-Dateien in die von Ihnen bevorzugten Game-Engines importieren. Um die Texturatlas-Dateien zu importieren, können Sie Plug-ins für Ihre Game-Engines erstellen. Ein Beispiel-Plug-in für die Unity-Werkzeuge wird bereitgestellt.

Sie können den Texturatlas in Unity importieren, indem Sie die folgenden Schritte ausführen:

Erstellen Sie in Unity in einem beliebigen Verzeichnis ein Projekt. In diesem Verzeichnis wird ein Ordner mit dem Unterordner Assets erstellt.

Erstellen Sie die beiden Unterordner unter Assets als Ressourcen und Editor.

Klicken Sie hier, um das Beispiel-Plug-In für Unity herunterzuladen. Wählen Sie Unity-Plug-in auf der Registerkarte Downloads und wählen Sie dann die entsprechende Versionsnummer aus.

Die Datei unity-plugin.zip besteht aus den Dateien Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs und Effect.shader.

Mit dem Herunterladen des Beispiel-Plug-ins akzeptieren Sie unsere Nutzungsbedingungen und Richtlinien zum Datenschutz.

Verschieben Sie die Texturatlas-Dateien wie Animation.json, spritemap.json, spritemap.png und die Unity-Plug-in-Dateien wie plugin.cs und Effect.shader nach Assets > Ressourcen.

Verschieben Sie die Dateien AnimateEditor.cs und WrapperPlugin.cs in den Ordner Assets.

Klicken Sie in Unity auf die Datei AnimateEditor.cs und ziehen Sie sie auf Hauptkamera.

Wiedergabe. Durch Abspielen Ihres Projekts wird die Spritemap in verschiedene Sprites geteilt.

Verschieben Sie AnimateEditor.cs in den Editor.

Klicken Sie in Unity auf die Datei WrapperPlugin.cs und ziehen Sie sie auf Hauptkamera. Deaktivieren Sie außerdem AnimateEditor.cs in Hauptkamera oder entfernen Sie die Datei.

Sie können die Ausgabe nach Bedarf abspielen oder veröffentlichen.

Sie können das Plug-in auch anpassen, indem Sie die Datei WrapperPlugin.cs entsprechend Ihren Anforderungen ändern.

Das Unity-Plug-in unterstützt Farbeffekte für Texturatlas-Dateien, die in Animate erstellt wurden. Darüber hinaus unterstützt das Plug-in die ebenübergreifende Maskierung. Die Maskierung ist nur für Unity ab Version 2017 anwendbar.

Als Animator können Sie Inhalte weiterhin im Vektorformat bearbeiten und für HTML 5-Plattformen im Vektor- oder Rasterformat exportieren. Die Veröffentlichungseinstellungen wurden nun um eine Option zum Exportieren von Animationen als Texturatlas erweitert, um die Performance von Animationen zu verbessern.

Klicken Sie auf Datei > Einstellungen für Veröffentlichungen. Wenn auf der Registerkarte „Standard“ die Option Dokument als Textur exportieren aktiviert ist, werden auf der Registerkarte Bildeinstellungen die Optionen für die Texturveröffentlichung angezeigt. Standardmäßig sind alle Symbole in der Texturveröffentlichung enthalten. Um bestimmte Symbole für Texturen auszuwählen, klicken Sie auf das entsprechende Einstellungssymbol.

Zwar kann sich bei Verwendung dieser Option die Größe des Elements erhöhen, doch damit wird auch die Performance verbessert. Außerdem können Sie die Auflösung der Bilder auf das Doppelte und Dreifache der ursprünglichen Auflösung vergrößern, um sie für HiDPI-Anzeigegeräte zu optimieren. Klicken Sie zum Ändern der Auflösungseinstellungen auf das Schraubenschlüssel-Symbol neben der Option Dokument als Textur exportieren (siehe Screenshot unten). Wählen Sie unter „Auflösung" den Wert für die Verdoppelung oder Verdreifachung aus.

Für die Texturveröffentlichung ist standardmäßig der Wert für die Verdoppelung ausgewählt. Es kann jedoch ein Wert von 0,3 bis 3,0 festgelegt werden.

Hinweis:

Die Texturveröffentlichung ist nur für den Dokumenttyp „HTML5 Canvas“ anwendbar.

Dokument als Textur exportieren

Eine Vektor- oder Rasterdatei zu wählen, bedeutet praktisch, zwischen Dateigröße und Leistung zu wählen. HTML5-Plattformen sind für Rasterinhalte optimiert. Für bestimmte komplexe Formen ist es daher besser, Vektorbilder vorab in Rasterinhalte zu konvertieren Für einige Standardinhalte können Sie nach wie vor Vektorinhalte verwenden. Animate stellt diese Option über ein Dialogfeld zur teilweisen Symbolauswahl zur Verfügung. Mithilfe der teilweisen Symbolauswahl können Sie Symbole wählen, die in Rasterinhalte konvertiert werden sollen – bei Erhalt der verbleibenden Vektoren.

Um die teilweise Symbolauswahl zu öffnen, klicken Sie im Dialogfeld Veröffentlichungseinstellungen auf Ändern und wählen Sie ein Symbol aus der Liste. Standardmäßig sind alle Symbole ausgewählt.