Benutzerhandbuch Abbrechen

Exportieren von Animationen für Apps und Game-Engines

Suchen

Zuletzt aktualisiert am 19. Januar 2022

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.

Übersicht

Mit Animate 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.

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

Ein Texturatlas ist eine Sammlung von Texturen als einzelnes großes Bild oder mehrere Bilder der gewünschten Dimension. 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 jedes Schlüsselbild der ausgewählten Symbole erscheint als separate Bitmap im Texturatlas. Beim Export von der Bühne bleibt jede Transformierung (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	Variable: Basierend auf den Bildabmessungen.
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

Erstellen von Spritesheets

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 von Animationen in mobile Apps oder Gaming-Engines

Animate hilft Ihnen, Animationen in Gaming-Plattformen und mobile Anwendungen zu exportieren. Möchten Sie die Animation auf einem Smartphone oder einer Gaming-Engine anzeigen? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

Klicken Sie in der Bibliothek mit der rechten Maustaste auf den Videoclip.
Wählen Sie Spritesheet erstellen.
Wählen Sie im Dialogfeld Spritesheet die gewünschten Optionen aus.
Klicken Sie auf Exportieren.

So exportieren Sie Animationen in mobile Apps oder Gaming-Engines

Sehen Sie sich das Video an, um mehr über andere Optionen zum Exportieren von Animationen zu erfahren.

Erstellen eines Texturatlas

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:

Flussdiagramm Texturatlas — 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.
Dimensionen optimieren	Wenn die Option „Dimensionen optimieren“ aktiviert ist, werden leere Pixel aus Bitmaps entfernt, und die Abmessungen ergeben keine Zweierpotenzen (Standardoption). Dies ist für alle generierten Bitmaps anwendbar. Wenn die Option „Dimensionen optimieren“ deaktiviert ist, werden Bitmaps basierend auf den ausgewählten Abmessungen generiert.
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“.
Auflösung	Wählen Sie einen beliebigen Wert zwischen 0,3 und 3,0
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: Standard MaxRects (Standard)
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.
Animation.json-Datei optimieren	Wenn die Option „animation.json-Datei optimieren“ aktiviert ist, werden der Zeileneinzug entfernt, die Matrix zerlegt und die verwendeten Namen verkürzt (Standardoption). Wenn die Option „animation.json-Datei optimieren“ nicht aktiviert ist, wird mit Zeileneinzug und mit aussagekräftigen Namen exportiert.

Sie können sich entscheiden, das Symbol in mehrere Bitmaps zu exportieren, basierend auf den Abmessungen.

Texturatlas für mehrere Bitmaps erzeugen

Für Elemente, deren Größe die ausgewählten Bildabmessungen überschreitet, wird eine Warnmeldung angezeigt.
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. Identische Bilder sind standardmäßig in der animation.json-Datei optimiert und konsolidiert.

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.

Importieren des Texturatlas in Unity

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.

Texturveröffentlichung

Als Animator können Sie Inhalte jetzt weiterhin im Vektorformat bearbeiten und für HTML 5-Plattformen im Vektor- 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.

1. Erstellen Sie ein Canvas-Dokument. Wählen Sie Datei > Neu, um das Dialogfeld „Neues Dokument“ anzuzeigen.

2. Wählen Sie die Registerkarte Erweitert aus und klicken Sie auf HTML5 Canvas. Daraufhin wird ein neues FLA-Dokument geöffnet.

3. 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. Außerdem kann ein Wert von 0,3 bis 3,0 festgelegt werden.

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

Aktivierte Option „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.

Wählen Sie die gewünschten Symbole aus der Liste.

Verbessern der Grafikleistung durch Bitmap-Texturen

In Animate verbessern Bitmap-Texturen die Leistung von Animationen auf verschiedenen Plattformen. Möchten Sie mit Bitmap-Texturen die Komplexität von Vektoren reduzieren? Sehen Sie sich einfach das Tutorial am Ende dieses Beispiels an und befolgen Sie die Schritte.

Klicken Sie im Fenster Eigenschafteninspektor auf Veröffentlichungseinstellungen.
Wählen Sie auf der Registerkarte Standard das Schraubenschlüsselsymbol neben Dokument als Textur exportieren.
Klicken Sie auf der Registerkarte Bildeinstellungen auf Ändern und wählen Sie die Symbole Ihrer Wahl aus.
Klicken Sie auf OK.

So veröffentlichen Sie Ihre Assets als Bitmap-Texturen, um die Leistung zu verbessern

Sehen Sie sich das Video an, um zu erfahren, wie Animationen mit Bitmap-Texturen funktionieren.

Schneller und einfacher Hilfe erhalten

Neuer Benutzer?