Guide d'utilisation Annuler

Exportation d’animations pour les applications mobiles et les moteurs de jeu

Rechercher

Dernière mise à jour le 24 mai 2023

Créez une feuille Sprite ou un atlas de textures et exportez vos animations pour des moteurs de jeu et des applications mobiles. Importez un atlas de textures dans Unity ou l’un de vos moteurs de jeu favoris en utilisant le module externe.

Aperçu

Animate vous permet de créer des animations Atlas de textures ou Feuille Sprite et de les exporter ensuite pour des applications mobiles et des moteurs de jeu.

Feuille Sprite

Une feuille Sprite est un fichier d’images bitmap qui contient plusieurs graphiques de taille inférieure disposés en forme de grille en mosaïque. La compilation de plusieurs graphiques au sein d’un fichier unique permet à Animate et à d’autres applications d’utiliser les graphiques en ne chargeant qu’un seul fichier. Cette efficacité de chargement peut s’avérer utile, notamment dans le cas de développement de jeux, où les performances sont particulièrement importantes.

Vous pouvez créer une feuille Sprite à partir d’une sélection d’une combinaison de clips, symboles de boutons, symboles de graphiques ou images bitmap. Vous pouvez sélectionner des éléments soit dans le panneau Bibliothèque, soit sur la scène, mais pas les deux. Chaque bitmap (et chaque image) des symboles sélectionnés apparaît sous la forme d’un graphique distinct dans la feuille Sprite. Si vous exportez des éléments à partir de la scène, toutes les transformations (mise à l’échelle, inclinaison, etc.) que vous avez appliquées à l’occurrence de symbole sont conservées dans l’image de sortie.

Atlas de textures

L’atlas de textures est une collection de textures qui se présente sous la forme d’une seule grande image ou de plusieurs images de la dimension souhaitée. Vous pouvez optimiser votre jeu en créant un atlas de textures et en l’utilisant dans votre application de jeu.

Dans Animate, vous pouvez créer un atlas de textures à partir de symboles tels que des clips, des graphiques ou des boutons. Vous pouvez sélectionner des éléments soit dans le panneau Bibliothèque, soit sur la scène, mais pas les deux. Chaque vecteur et chaque image-clé des symboles sélectionnés apparaissent sous la forme d’une image distincte dans l’atlas de textures. Si vous exportez un élément depuis la scène, toutes les transformations (mise à l’échelle, inclinaison, etc.) appliquées à l’instance de symbole sont conservées dans l’image générée.

Différence entre une feuille Sprite et un atlas de textures

Vous pouvez utiliser la feuille Sprite ou l’atlas de textures dans vos applications mobiles en fonction de vos besoins. Vous trouverez, dans le tableau ci-dessous, un aperçu des principales différences entre une feuille Sprite et un atlas de textures.

Fonctionnalité	Feuille Sprite	Atlas de textures
Performances dans les applications mobiles	Faibles	Élevées
Efficacité au niveau du chargement de l’application	Élevée, dans la mesure où aucun calcul n’est effectué	Faible, dans la mesure où le calcul du fichier JSON est effectué
Taille	Occupe plus d’espace	Occupe moins d’espace
Qualité d’animation	Moyenne	Élevée
Nombre de fichiers générés	Deux fichiers : une image bitmap et un fichier JSON	Variable : d’après la taille de l’image.
Nombre d’images bitmap générées	Le nombre de fichiers bitmap peut augmenter en fonction du nombre d’images bitmap utilisées dans la feuille Sprite, ce qui a pour effet d’accroître la taille de la feuille Sprite	Seules des images bitmap uniques sont générées dans le sprite, ce qui réduit la taille totale.

Création d’une feuille Sprite

Pour créer une feuille Sprite, procédez comme suit :

Sélectionnez un ou plusieurs symboles dans la bibliothèque ou des occurrences de symboles sur la scène. Votre sélection peut également contenir des bitmaps.
Cliquez sur votre sélection avec le bouton droit de la souris et sélectionnez ensuite Générer la feuille Sprite.

Sélectionnez les options requises dans la boîte de dialogue Générer la feuille Sprite, puis cliquez sur Exporter.

Option d’exportation	Description
Dimensions de l’image	Taille totale de la feuille Sprite, en pixels. La valeur par défaut, Taille automatique, dimensionne la feuille de façon à inclure tous les sprites que vous ajoutez.
Format de l’image	Format d’image de la feuille Sprite exportée. Les formats PNG 8 bits et PNG 32 bits prennent en charge l’utilisation d’un arrière-plan transparent (calque alpha). Les formats PNG 24 bits et JPG ne prennent pas en charge les arrière-plans transparents. En règle générale, la différence visuelle entre le format PNG 8 bits et le format PNG 32 bits est minime. Les fichiers au format PNG 32 bits sont quatre fois plus volumineux que les fichiers au format PNG 8 bits.
Remplissage des bordures	Remplissage des bordures de la feuille Sprite, en pixels.
Remplissage des formes	Remplissage entre chaque image dans la feuille Sprite, en pixels
Algorithme	Technique utilisée pour mettre en package les images dans la feuille Sprite. Deux options sont disponibles : Base (option par défaut) MaxRects
Format de données	Format interne utilisé pour les données d’image. Choisissez le format en fonction de l’utilisation prévue de la feuille Sprite après l’exportation.
Faire pivoter	Cette option permet de faire pivoter les sprites de 90 degrés. Cette option est disponible uniquement pour certains formats de données.
Réduire	Cette option permet d’économiser de l’espace dans la feuille Sprite en supprimant les pixels inutilisés de chaque image de symbole ajoutée à la feuille.
Empiler les images	Cette option permet d’éviter que les images dupliquées des symboles sélectionnés soient également dupliquées dans la feuille Sprite générée.

Exportation d'animations vers des applications mobiles ou des moteurs de jeux

Animate vous aide à exporter des animations vers les plateformes de jeux et les applications mobiles. Vous voulez voir l'animation sur votre téléphone mobile ou votre moteur de jeu ? Regardez le tutoriel à la fin de cet exemple et suivez ces étapes.

Dans la Bibliothèque, cliquez avec le bouton droit sur le clip.
Sélectionnez Générer la feuille Sprite.
Dans la boîte de dialogue Feuille Sprite, sélectionnez les options requises.
Cliquez sur Exporter.

Comment exporter des animations pour les applications mobiles ou les moteurs de jeux

Regardez la vidéo pour découvrir les autres options d'exportation des animations.

Création d’un atlas de textures

Les développeurs de jeux peuvent utiliser Animate pour organiser des animations et les exporter au format atlas de textures vers le moteur de jeu Unity ou toute autre plate-forme de jeu de leur choix.

Le processus de génération d’un atlas de textures dans Animate et de son importation dans Unity est représenté dans le schéma suivant :

flow-diagram-Texture-Atlas — Illustration représentant le worklflow pour générer l’atlas de textures et l’importer dans Unity.

Pour générer l’atlas de textures de votre animation, procédez comme suit :

Dans Animate, vous pouvez générer un atlas de textures pour un symbole sélectionné dans la Bibliothèque ou l’occurrence de symbole sur la scène.
Cliquez avec le bouton droit de la souris sur le symbole et sélectionnez Générer l’atlas de textures à partir du menu. La fenêtre Générer l’atlas de textures apparaît.

Génération de l’atlas de textures

Sélectionnez les options d’exportation appropriées pour l’atlas de textures.

Option d’exportation	Description
Dimensions de l’image	Taille totale de l’atlas de textures, en pixels. La valeur par défaut, Taille automatique, dimensionne la feuille de façon à inclure toutes les images que vous ajoutez.
Optimiser les dimensions	Lorsque l’option Optimiser les dimensions est activée, les pixels vides sont supprimés des images bitmap et les dimensions ne sont pas une puissance de deux (option par défaut). Ceci s’applique pour tous les bitmaps générés. Lorsque l’option Optimiser les dimensions n’est pas activée, les images bitmap sont générées en fonction des dimensions sélectionnées.
Format de l’image	Format d’image de la feuille Sprite exportée. Les formats PNG 8 bits et PNG 32 bits prennent en charge l’utilisation d’un arrière-plan transparent (calque alpha). En règle générale, la différence visuelle entre le format PNG 8 bits et le format PNG 32 bits est minime. Les fichiers au format PNG 32 bits sont quatre fois plus volumineux que les fichiers au format PNG 8 bits.
Résolution	Sélectionnez n’importe quelle valeur comprise entre 0,3 et 3.
Remplissage des bordures	Remplissage des bordures de l’atlas de textures, en pixels.
Remplissage des formes	Remplissage entre chaque image de l’atlas de textures, en pixels.
Algorithme	Technique utilisée pour mettre en package les images dans l’atlas de textures. Deux options sont disponibles : Base MaxRects (option par défaut)
Format de données	Format interne utilisé pour les données d’image. Le format par défaut est JSON.
Faire pivoter	Fait pivoter les images de 90 degrés°. Cette option est disponible uniquement pour certains formats de données.
Aplatir les objets inclinés en bitmap	Sélectionnez cette option si vous utilisez des transformations inclinées pour vos objets. Animate convertit ces objets en images bitmap, car certains moteurs de jeu n’interprètent pas correctement les transformations d’inclinaison.
Optimiser le fichier Animation.json	Lorsque l’option Optimiser le fichier Animation.json est activée, elle supprime l’indentation et la matrice décomposée et abrège les noms utilisés (option par défaut). Si l’option Optimiser le fichier Animation.json n’est pas activée, l’indentation et les noms significatifs sont exportés.

Vous pouvez exporter le symbole dans plusieurs bitmaps en fonction de la dimension.

Génération d’un atlas de textures pour plusieurs bitmaps

Un avertissement s’affiche pour les éléments supérieurs aux dimensions de l’image sélectionnée.
Pour afficher l’atlas de textures généré, cliquez sur l’onglet Aperçu.

Affichage d’un aperçu de l’atlas de textures après l’avoir créé
Cliquez sur Parcourir et sélectionnez le chemin de destination sur votre ordinateur pour le fichier de sortie ou indiquez le chemin dans la zone de texte et cliquez ensuite sur Exporter.

Le dossier de sortie généré pour l’atlas de textures contient les fichiers suivants :

Animation.json

Ce fichier contient des informations sur l’animation. Par défaut, les images identiques sont optimisées et consolidées dans le fichier Animation.json.

spritemap.json

Ce fichier contient des informations sur le fichier spritesheet.png.

spritemap.png

Pour le symbole exporté, ce fichier contient la représentation bitmap de toutes les textures uniques minimales nécessaires pour reconstruire l’animation.

Vous pouvez utiliser l’atlas de textures généré dans n’importe quel moteur de jeu, tel que Unity, avec le module externe d’importateur approprié.

Importation de l’atlas de textures dans Unity

Vous pouvez importer les fichiers de l’atlas de textures générés à l’aide d’Animate vers vos plates-formes de jeu favorites. Pour importer les fichiers de l’atlas de textures, vous pouvez créer des modules externes correspondant à vos plates-formes de jeu. Un exemple de module externe d’importation est fourni pour la plate-forme Unity.

Importez l’atlas de textures dans Unity en procédant comme suit :

Sur la plate-forme Unity, créez un projet à un emplacement donné. À cet emplacement, un dossier contenant le sous-dossier Actifs est créé.
Créez deux sous-dossiers sous Actifs en tant que Ressources et Éditeur.
Cliquez ici pour télécharger l’exemple de module externe d’importation pour Unity. Sélectionnez le module externe Unity depuis l’onglet Téléchargements et choisissez la version correspondante à télécharger.

Le fichier unity-plugin.zip se compose des fichiers Plugin.cs, Wrapperplugin.cs, AnimateEditor.cs et Effect.shader.

Le téléchargement de l’exemple vaut acceptation des Conditions d’utilisation et de la Politique de confidentialité en ligne.
Déplacez les fichiers de l’atlas de textures, tels que Animation.json, spritemap.json et spritemap.png, ainsi que les fichiers du module externe Unity, tels que Plugin.cs et Effect.shader, vers Actifs > Ressources.
Déplacez les fichiers AnimateEditor.cs et Wrapperplugin.cs vers le dossier Actifs.
Dans Unity, cliquez sur le fichier AnimateEditor.cs et faites-le glisser sur Main Camera (Caméra principale).
Lancez la lecture. La lecture de votre projet divise la carte de sprites en différentes sprites.
Déplacez AnimateEditor.cs vers Éditeur.
Dans Unity, cliquez sur le fichier Wrapperplugin.cs et faites-le glisser sur Main Camera. Veuillez également désélectionner ou supprimer AnimateEditor.cs de Main Camera.
Lisez ou publiez le résultat selon vos besoins.

Vous pouvez même personnaliser le module externe en modifiant le fichier Wrapperplugin.cs, afin de l’adapter à vos besoins.

Le module externe Unity prend en charge les effets de couleur pour les fichiers d’atlas de textures générés par Animate. En outre, il prend en charge le masquage par le biais de calques. La fonction de masquage s’applique uniquement à compter de la version Unity 2017.

Publication de textures

En tant qu’animateur, vous pouvez continuer à créer du contenu au format vectoriel et l’exporter au format vectoriel ou pixellisé pour les plates-formes HTML5. Une option d’exportation des animations comme atlas de textures a été ajoutée aux paramètres de publication en vue d’augmenter les performances des animations.

1. Créez un document de zone de travail. Sélectionnez Fichier > Nouveau pour ouvrir la fenêtre Nouveau document.

2. Sélectionnez l’onglet Avancé et cliquez sur HTML5 Canvas. Un nouveau document FLA s’ouvre.

3. Cliquez sur Fichier > Paramètres de publication. Si la case Exporter un document comme texture est cochée dans l’onglet Base, l’onglet Paramètres d’image affiche des options Publication de textures. Par défaut, tous les symboles sont inclus dans la publication de textures. Pour choisir sélectivement des symboles pour des textures, cliquez sur l’icône Paramètres à leurs côtés.

Bien que cette option puisse augmenter la taille des éléments, elle améliore les performances. En outre, vous pouvez augmenter la résolution des images en doublant (2x) ou triplant (3x) la résolution originale des images pour cibler les affichages HiDPI. Pour changer les paramètres de résolution, cliquez sur l’icône de clé en regard de l’option Exporter un document comme texture illustrée dans la copie d’écran ci-dessous. Faites glisser les nombres à côté de la résolution afin d’obtenir des multiples de 2x et 3x.

Par défaut, la publication de texture est définie sur 2x la résolution. En outre, la plage de résolution peut être changée de 0,3 à 3x.

La publication de textures s’applique uniquement aux documents de type HTML5 Canvas.

Exporter le document comme texture activé

Choisir entre un fichier raster ou vectoriel revient à choisir entre la taille de fichier et les performances. Les plates-formes HTML5 sont optimisées pour le contenu raster. Dès lors, pour certaines formes complexes, il est préférable de procéder à une conversion préalable des images vectorielles au format raster. Pour une partie du contenu de base, vous pouvez toutefois utiliser le contenu vectoriel. Animate vous propose cette option au moyen d’une boîte de dialogue de sélection partielle des symboles. Cette sélection partielle des symboles vous permet de choisir les symboles à convertir au format raster, tout en conservant les autres en tant que vecteurs.

Pour accéder à la sélection partielle des symboles, cliquez sur Modifier dans la boîte de dialogue Paramètres de publication et sélectionnez ensuite un symbole dans la liste. Par défaut, tous les symboles sont sélectionnés.

Modification de la sélection partielle des symboles

Sélectionnez les symboles de votre choix dans la liste.

Améliorer les performances graphiques grâce à Bitmap Textures

Dans Animate, les textures bitmap améliorent les performances des animations sur différentes plateformes. Vous voulez réduire la complexité des vecteurs avec des textures bitmap ? Regardez le tutoriel à la fin de cet exemple et suivez ces étapes.

Dans le panneau Inspecteur des propriétés, cliquez sur Paramètres de publication.
Dans l'onglet Base, sélectionnezl'icône de clé en regard de Exporter un document comme texture.
Dans l'onglet Paramètres d'image, cliquez sur Changer puis sélectionnez les symboles de votre choix.
Cliquez sur OK.