Leistung
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 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 |
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:
|
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. |
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.
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:
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.
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 |
|
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:
|
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 |
|
Sie können sich entscheiden, das Symbol in mehrere Bitmaps zu exportieren, basierend auf den Abmessungen.
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.
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.
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 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.
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.
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.
Bei Ihrem Konto anmelden