Handboek Annuleren

Animaties exporteren voor mobiele apps en game-engines

Zoeken

Laatst bijgewerkt op 24 mei 2023

Maak een sprite-werkblad of een structuuratlas en exporteer uw animaties voor mobiele apps en game-engines. Importeer een structuuratlas naar Unity of een andere favoriete game-engine door de plug-in te gebruiken.

Overzicht

In Animate kunt u sprite-werkbladanimaties of structuuratlasanimaties maken en deze exporteren voor mobiele apps en game-engines.

Sprite-werkblad

Een sprite-werkblad is een bitmapafbeeldingsbestand dat meerdere, kleine en naast elkaar geplaatste afbeeldingen in een raster bevat. Door meerdere afbeeldingen in één bestand te compileren, kunnen Animate en andere toepassingen deze afbeeldingen gebruiken terwijl ze maar één bestand hoeven te laden. Deze korte laadtijd is nuttig tijdens het ontwikkelen van bijvoorbeeld games, waarin snelle resultaten bijzonder belangrijk zijn.

U kunt een sprite-werkblad maken van een willekeurige combinatie van geselecteerde filmclips, knopsymbolen, grafische symbolen of bitmaps. U kunt items selecteren in het deelvenster Bibliotheek of in het werkgebied, maar niet in beide. Elke bitmap en elk frame met geselecteerde symbolen wordt als een afzonderlijke afbeelding weergegeven in het sprite-werkblad. Als u exporteert uit het werkgebied, blijven alle transformaties (bijvoorbeeld schaling, schuintrekken, enz.) die u op de symboolinstantie hebt toegepast, behouden in de afbeeldingsuitvoer.

Structuuratlas

Structuuratlas is een verzameling van structuren als één grote afbeelding of meerdere afbeeldingen van de gewenste afmeting. U kunt games snel optimaliseren door een structuuratlas te maken en deze toe te passen in uw game-app.

In Animate kunt u een structuuratlas maken op basis van symbolen, zoals filmclips, afbeeldingen of knoppen. U kunt items selecteren in het deelvenster Bibliotheek of in het werkgebied, maar niet in beide. Elke vector en elk hoofdframe van de geselecteerde symbolen wordt als een afzonderlijke bitmap weergegeven in de structuuratlas. Als u vanuit het werkgebied exporteert, blijven alle transformaties (schalen, schuintrekken, enzovoort) die u op de symboolinstantie hebt toegepast, behouden in de afbeelding.

Verschil tussen een sprite-werkblad en een structuuratlas

Afhankelijk van uw vereisten, kunt u ofwel een sprite-werkblad of een structuuratlas gebruiken voor uw mobiele apps. De volgende tabel toont de belangrijkste verschillen tussen een sprite-werkblad en een structuuratlas.

Kenmerk	Sprite-werkblad	Structuuratlas
Prestaties in mobiele apps	Laag	Hoog
Efficiëntie bij het laden van de app	Hoog, als er geen berekeningen zijn	Laag, in geval van JSON-bestandsberekening
Grootte	Neemt meer grootte in beslag	Neemt minder grootte in beslag
Kwaliteit van animatie	Normaal	Hoog
Gegenereerd aantal bestanden	Twee bestanden: één bitmap en één JSON-bestand	Variabel: gebaseerd op de afmeting van afbeelding.
Aantal gegenereerde bitmaps	Op basis van het aantal frames dat in een sprite-werkblad wordt gebruikt, kan het aantal bitmapbestanden ook toenemen, waardoor het sprite-werkblad steeds groter wordt	In sprite worden alleen unieke bitmaps gegenereerd, waardoor de totale grootte afneemt.

Een sprite-werkblad maken

Om een sprite-werkblad te maken voert u de volgende stappen uit:

Selecteer een of meer symbolen in de bibliotheek of een of meer symboolinstanties in het werkgebied. De selectie kan ook bitmaps bevatten.
Klik met de rechtermuisknop op de selectie en kies Sprite-werkblad genereren.

Selecteer de gewenste opties in het dialoogvenster Sprite-werkblad genereren en klik op Exporteren.

Exportoptie	Beschrijving
Afmetingen van afbeelding	De totale omvang van het sprite-werkblad, uitgedrukt in pixels. De standaardinstelling is Afmetingen automatisch instellen waarbij alle door u opgenomen sprites in het werkblad passen.
Afbeeldingsindeling	De bestandsindeling van het geëxporteerde sprite-werkblad. De indelingen voor 8-bits en 32-bits PNG bieden allebei ondersteuning voor het gebruik van een transparante achtergrond (alfakanaal). JPG en 24-bits PNG bieden geen ondersteuning voor transparante achtergronden. Over het algemeen is het visuele verschil tussen 8-bits en 32-bits PNG klein. 32-bits PNG-bestanden zijn vier keer zo groot als 8-bits PNG-bestanden.
Randopvulling	Opvulling rond de randen van het sprite-werkblad, uitgedrukt in pixels.
Vormopvulling	Opvulling tussen elke afbeelding in het sprite-werkblad, uitgedrukt in pixels.
Algoritme	Dit is een techniek voor het verpakken van de afbeeldingen in het sprite-werkblad. Er zijn twee opties: Basis (standaard) MaxRects
Gegevensindeling	De interne indeling die voor de afbeeldingsgegevens wordt gebruikt. Kies de indeling die het beste aansluit bij uw gewenste workflow voor het sprite-werkblad na het exporteren.
Roteren	Hiermee worden de sprites 90 graden gedraaid. Deze optie is alleen beschikbaar voor bepaalde gegevensindelingen.
Bijsnijden	Met deze optie bespaart u ruimte in het sprite-werkblad door het bijsnijden van ongebruikte pixels uit elk symboolframe dat aan het werkblad wordt toegevoegd.
Frames stapelen	Selecteer deze optie om te voorkomen dat gedupliceerde frames in de geselecteerde symbolen worden gedupliceerd in het uiteindelijke sprite-werkblad.

Animaties exporteren naar mobiele apps of game-engines

Animate helpt u bij het exporteren van animaties naar gamingplatforms en mobiele applicaties. Wilt u de animatie bekijken op uw mobiele telefoon of game-engine? Bekijk de tutorial aan het einde van dit voorbeeld en voer de volgende stappen uit.

Ga naar de bibliotheek en klik met de rechtermuisknop op de filmclip.
Selecteer Sprite-werkblad genereren.
Selecteer de gewenste opties in het dialoogvenster Sprite-werkblad.
Klik op Exporteren.

Animaties exporteren voor mobiele apps of game-engines

Bekijk de video om te zien hoe de andere opties voor het exporteren van animaties werken.

Een structuuratlas maken

Gameontwikkelaars kunnen animaties in Animate bewerken en exporteren als structuuratlas voor de Unity-gamingengine en andere favoriete gamingplatforms.

Het onderstaande diagram toont het proces voor het maken van een structuuratlas in Animate en het importeren ervan in Unity:

flowdiagram-Structuuratlas — Een illustratie van de workflow voor het maken van een structuuratlas en het importeren ervan in Unity.

Als u een structuuratlas van uw animatie wilt genereren, voert u de volgende stappen uit:

In Animate kunt u een structuuratlas genereren voor een geselecteerd symbool in de Bibliotheek of een symboolinstantie op het werkgebied.
Klik met de rechtermuisknop op het symbool en selecteer Structuuratlas genereren in het menu. Het venster Structuuratlas genereren verschijnt.

Structuuratlas genereren

Kies de juiste exportopties voor de structuuratlas.

Exportoptie	Beschrijving
Afmetingen van afbeelding	De totale omvang (in pixels) van de structuuratlas. De standaardinstelling is Afmetingen automatisch instellen waarbij alle door u opgenomen afbeeldingen in het werkblad passen.
Afmetingen optimaliseren	Wanneer de optie Afmetingen optimaliseren is ingeschakeld, worden lege pixels uit bitmaps verwijderd en zijn afmetingen niet in de macht van twee (standaardoptie). Dit is van toepassing op alle gegenereerde bitmaps. Wanneer de optie Afmetingen optimaliseren is uitgeschakeld, worden bitmaps gegenereerd op basis van de geselecteerde afmetingen.
Afbeeldingsindeling	De bestandsindeling van het geëxporteerde sprite-werkblad. De indelingen voor 8-bits en 32-bits PNG bieden allebei ondersteuning voor het gebruik van een transparante achtergrond (alfakanaal). Over het algemeen is het visuele verschil tussen 8-bits en 32-bits PNG klein. 32-bits PNG-bestanden zijn vier keer zo groot als 8-bits PNG-bestanden.
Resolutie	Kies een waarde tussen 0,3 en 3,0
Randopvulling	Opvulling rond de randen van de structuuratlas, uitgedrukt in pixels.
Vormopvulling	Opvulling tussen elke afbeelding in de structuuratlas, uitgedrukt in pixels.
Algoritme	Dit is een techniek voor het verpakken van de afbeeldingen in de structuuratlas. Er zijn twee opties: Basis MaxRects (standaard)
Gegevensindeling	De interne indeling die voor de afbeeldingsgegevens wordt gebruikt. De standaardinstelling is de JSON-indeling.
Roteren	Hiermee roteert u de afbeeldingen 90°. Deze optie is alleen beschikbaar voor bepaalde gegevensindelingen.
Scheefgetrokken objecten afvlakken naar een bitmap	Selecteer deze optie als u transformaties voor scheefgetrokken objecten toepast. Animate converteert deze objecten naar bitmapafbeeldingen omdat sommige game-engines transformaties voor scheefgetrokken objecten niet correct interpreteren.
Animation.json-bestand optimaliseren	Wanneer Animation.json-bestand optimaliseren is ingeschakeld, worden inspringingen verwijderd, de matrix ontbonden en de gebruikte namen ingekort (standaardoptie). Wanneer Animation.json-bestand optimaliseren is uitgeschakeld, worden bestanden geëxporteerd inclusief de bijbehorende inspringingen en nuttige namen.

U kunt het symbool desgewenst exporteren naar meerdere bitmaps op basis van de afmetingen.

Structuuratlas genereren voor meerdere bitmaps

Voor elementen waarbij de geselecteerde afbeelding te groot is, wordt een waarschuwing weergegeven.
Klik op het tabblad Voorvertoning om de uitvoer van de structuuratlas te bekijken.

Een voorvertoning van de gemaakte structuuratlas bekijken
Klik op Bladeren en kies het doelpad voor het uitvoerbestand op uw computer of voer het pad in het tekstgebied in en klik op Exporteren.

De gegenereerde uitvoermap voor de structuuratlas bevat de volgende bestanden:

Animation.json

Dit bestand bevat informatie over de animatie. Identieke frames worden standaard geoptimaliseerd en geconsolideerd in het bestand Animation.json.

spritemap.json

Dit bestand bevat informatie over het bestand spritesheet.png.

spritemap.png

Voor het geëxporteerde symbool bevat dit bestand de bitmaprepresentatie van alle minimale unieke structuren die nodig zijn om de animatie opnieuw samen te stellen.

Met de geschikte plug-in voor importeren kunt u de gegenereerde structuuratlas in allerlei game-engines gebruiken, zoals bijvoorbeeld Unity.

Structuuratlas importeren naar Unity

U kunt de in Animate gegenereerde structuuratlasbestanden importeren in uw favoriete game-engines. Als u de bestanden van de structuuratlas wilt importeren, kunt u plug-ins voor importeren maken die corresponderen met uw game-engines. Er is een voorbeeld-plug-in beschikbaar die kan worden geïmporteerd in Unity.

Importeer de structuuratlas in Unity door de volgende stappen uit te voeren:

Maak in Unity een project op een bepaalde locatie. Op deze locatie wordt een map gemaakt met de submap Elementen.
Maak twee submappen onder Elementen: Bronnen en Editor.
Klik hier om een voorbeeld van de importeerplug-in voor Unity te downloaden. Kies Unity-plug-in op het tabblad Downloads en download het overeenkomstige versienummer.

Het pakket unity-plugin.zip omvat de bestanden Plugin.cs, WrapperPlugin.cs, AnimateEditor.cs en Effect.shader.

Door deze voorbeeldplug-in te downloaden, geeft u aan dat u akkoord gaat met de gebruiksvoorwaarden en het online privacybeleid.
Verplaats de structuuratlasbestanden, zoals Animation.json, spritemap.json en spritemap.png, en de bestanden van de Unity-plug-in, zoals Plugin.cs en Effect.shader, naar Elementen > Bronnen.
Verplaats de bestanden AnimateEditor.cs en WrapperPlugin.cs naar de map Elementen.
Klik in Unity op het bestand AnimateEditor.cs en sleep het naar Hoofdcamera.
Speel het bestand af. Als u uw project afspeelt, wordt de spritemap opgesplitst in verschillende sprites.
Verplaats AnimateEditor.cs naar Editor.
Klik in Unity op het bestand WrapperPlugin.cs en sleep het bestand naar Hoofdcamera. Schakel AnimateEditor.cs uit of verwijder dit uit Hoofdcamera.
Speel de uitvoer af of publiceer deze.

U kunt de plug-in zelfs aanpassen door het bestand WrapperPlugin.cs aan uw eisen aan te passen.

De Unity-plug-in ondersteunt kleureffecten voor door Animate gegenereerde structuuratlasbestanden. De plug-in biedt ook ondersteuning voor maskering door lagen heen. De maskeringsfunctie geldt alleen vanaf Unity 2017.

Publicatie van structuren

Als animator kunt u inhoud in de vectorindeling blijven maken en exporteren als vector of raster voor HTML 5-platforms. Voor betere prestaties is er een optie voor het exporteren van animaties als structuuratlas toegevoegd in de publicatie-instellingen.

1. Maak een Canvas-document. Selecteer Bestand > Nieuw om het dialoogvenster Nieuw document weer te geven.

2. Selecteer het tabblad Geavanceerd en klik op HTML 5 Canvas. Er wordt een nieuw FLA-document geopend.

Klik op Bestand > Publicatie-instellingen. Als Document als structuur exporteren is ingeschakeld op het tabblad Basis, geeft het tabblad Afbeeldingsinstellingen opties voor structuur publiceren weer. Standaard worden alle symbolen opgenomen in de publicatie van een structuur. Om specifieke symbolen voor de structuren te selecteren, klikt u op het naastgelegen instellingenpictogram.

Alhoewel de elementen hierdoor groter worden, worden de prestaties wel verbeterd. Ook kunt u de resolutie van afbeeldingen 2 of 3 keer vergroten (vergeleken met de oorspronkelijke resolutie) voor het geval dat uw animaties geschikt moeten zijn voor HiDPI-schermen. Om de resolutie-instellingen te wijzigen klikt u op het moersleutelpictogram naast de optie Document als structuur exporteren, zoals hieronder weergegeven. Sleep de getallen naast de optie Resolutie om de meervouden van 2 en 3 keer weer te geven.

Bij de publicatie van structuren is de resolutie standaard ingesteld op 2 keer groter. Ook kunt u het bereik voor de resolutie instellen van 0,3 keer tot 3 keer de oorspronkelijke waarde.

Publiceren als structuur is alleen van toepassing op het documenttype HTML5 Canvas.

Document exporteren als document dat is ingeschakeld voor de structuurfunctie

Het kiezen van een vector- of rasterbestand lijkt op het kiezen van een bestandsgrootte of prestatie. HTML5-platforms zijn geoptimaliseerd voor rasterinhoud. Dus voor bepaalde complexe vormen is het beter om vectorafbeeldingen vooraf te converteren naar raster. Voor een deel van de basisinhoud kunt u nog steeds vectorinhoud gebruiken. Animate voorziet u van deze optie door middel van een dialoogvenster voor gedeeltelijke symboolselectie. Met gedeeltelijke symboolselectie kunt u symbolen kiezen die naar raster moeten worden geconverteerd terwijl de resterende als vector aanwezig blijven.

Om gedeeltelijke symboolselectie te openen klikt u op Change (Wijzigen) in het dialoogvenster Publicatie-instellingen en selecteert u een symbool in de lijst. Standaard zijn alle symbolen geselecteerd.

Selecteer de gewenste symbolen in de lijst.

Grafische prestaties verbeteren met behulp van bitmapstructuren

In Animate kunt u de prestaties van animaties op verschillende platforms verbeteren door middel van bitmapstructuren. Wilt u de complexiteit van vectoren verminderen met behulp van bitmapstructuren? Bekijk de tutorial aan het einde van dit voorbeeld en voer de volgende stappen uit.

Klik in het deelvenster Eigenschapcontrole op Publicatie-instellingen.
Op het basistabblad selecteert u het pictogram voor de steeksleutel dat naast de optie Document exporteren als structuur staat.
Klik op het tabblad Afbeeldingsinstellingen op Wijzigen en selecteer de gewenste symbolen.
Klik op OK.