Animaties exporteren voor mobiele apps en game-engines

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. 

Een sprite-werkblad maken

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

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.

Animaties exporteren voor mobiele apps of game-engines

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: 

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

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:

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.

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.

Uw elementen publiceren als bitmapstructuren om de prestaties te verbeteren