Implémenter des animations de feuilles de sprites

Environnement de vérification

Windows

• Fenêtres 11

Éditeur Unity

• 2020.3.25f1

Packages du système d’entrée

• 1.2.0

Conditions préalables à cette astuce

Les paramètres suivants sont préconfigurés comme condition préalable à l’explication de ces conseils.

• Présentation du package système d’entrée
• Aligner la caméra (2D) avec le canevas

Qu’est-ce que l’animation de feuille de sprites ?

Dans les jeux modernes, les personnages et les effets sont animés en déplaçant des modèles 3D, en calculant les explosions en temps réel et en affichant les effets. Cela est devenu possible parce que la puissance de calcul des consoles de jeux a augmenté, mais comme les anciennes consoles de jeux n’avaient pas autant de puissance, l’animation de feuilles de sprites qui changeait continuellement d’images pour donner l’impression qu’elle bougeait était le courant dominant. Le principe est le même que celui de l’anime diffusé à la télévision. Les animations de feuilles de sprites sont utilisées par moins de jeux que par le passé, mais elles sont encore souvent utilisées car la charge requise pour les calculs est beaucoup plus faible.

L’animation de la feuille de sprites permet de basculer et d’afficher plusieurs images d’affilée. Il est rare de préparer autant de fichiers d’image qu’il y en a, et pratiquement tous les modèles d’affichage sont inclus dans une seule image. Cela facilite la gestion des fichiers image et réduit la charge de chargement des fichiers image. Le fichier image qui résume cette animation est appelé « feuille de sprites ».

Créer une feuille de sprites

Une feuille de sprites n’est essentiellement qu’un fichier image. Comme cela n’a rien à voir avec Unity, veuillez le créer avec un outil d’édition d’image. Le format de fichier final sera un fichier PNG qu’Unity peut gérer.

En outre, il existe les règles suivantes pour créer des feuilles de sprites.

• Unifiez la taille de l’image de toutes les images. Par exemple, si la première image est de 32 x 32 pixels, la deuxième image et les suivantes seront de 32 x 32 pixels. Par exemple, si vous préparez une feuille de sprites au format « 3x2 » avec 6 images, la taille de la feuille de sprites sera de 96x64 pixels.
• Vous pouvez aligner l’image librement, par exemple « 6x4 » ou « 2x8 », mais assurez-vous de la créer en supposant que toutes les images seront remplies. S’il s’agit de « 6x4 », il s’agit de 24 images, et ainsi de suite. S’il s’agit d’une animation de 13 images, préparez-la avec « 1x13 » ou « 13x1 ».
• Puisqu’il s’agit d’une animation, elle est correctement alignée afin qu’il n’y ait pas de désalignement dans les images avant et après.
• La direction de l’animation commence à partir de la cellule supérieure gauche et va vers la droite, et lorsque vous allez à l’extrême droite, elle commence à gauche un pas vers le bas et va à nouveau vers la droite.

En fait, vous n’êtes pas obligé de faire ce qui précède strictement dans Unity, mais il est beaucoup plus facile de décider des spécifications à l’avance.

Cette fois, je vais utiliser une feuille de sprites pour changer les nombres suivants. Un carré correspond à 32x32 pixels. Il se compose de 24 cadres « 6x4 », de sorte que la taille de l’image est de 192x128 pixels.

Configuration de la feuille de sprites dans l’éditeur Unity

Une fois que vous avez créé votre projet, ajoutez un fichier de feuille de sprites à votre projet. Ici, il est supposé que le nom du fichier est NumberAnimation .

NumberAnimation Sélectionnez le fichier et remplissez l’inspecteur comme suit :

Il existe de nombreux autres paramètres qui peuvent être configurés, mais laissons les choses telles quelles pour l’instant. Une fois configuré, cliquez sur le bouton « Éditeur de sprites ».

Si la boîte de dialogue ci-dessous apparaît, cliquez sur le bouton « Appliquer ». En fait, les paramètres de cet inspecteur doivent être enregistrés, et si vous faites défiler vers le bas, il y a un bouton « Appliquer », vous devez donc enregistrer les paramètres avec ce bouton. Il sera également enregistré par « Appliquer » dans la boîte de dialogue, de sorte que la façon dont vous l’enregistrez n’a pas d’importance.

L’éditeur de sprites s’affiche. Dans cette section, nous allons travailler sur la séparation du sprite de la feuille de sprites.

Il y a un bouton appelé « Tranche » dans le coin supérieur gauche, cliquez dessus et changez le type en « Grille par taille de cellule ». Dans cette feuille de sprites, une taille du sprite est de « 32x32 » pixels, alors entrez 32 pour chaque taille de pixel. Lorsque vous avez terminé, cliquez sur le bouton Trancher.

Cette image est difficile à comprendre car elle semble être clairement divisée dès le début, mais elle est divisée par 1 sprite 32px. Appuyez sur la touche « Ctrl » et la ligne de séparation apparaîtra en vert.

Après le fractionnement, enregistrez-le avec le bouton « Appliquer ».

Si vous cliquez sur le triangle dans le fichier image du projet pour le développer, vous pouvez voir que le sprite a été divisé.

Placement et animation des sprites

Faites glisser le sprite défini dans la vue et placez-le.

Ensuite, une boîte de dialogue apparaîtra, alors enregistrez-la NumberAnimation sous . Ce fichier contient les paramètres d’animation.

Le premier sprite est placé dans la vue, et un contrôleur d’animation et un clip d’animation sont créés dans le projet. Si l’image est petite, réglez l’échelle pour l’agrandir.

À ce stade, les paramètres d’animation par défaut seront appliqués, vous pourrez donc simplement lancer le jeu. Vous devriez être en mesure de voir que l’animation des sprites se déplace dès que le jeu commence.

Empêcher les animations de tourner en boucle

Sélectionnez le fichier de clip d’animation (NumberAnimation.anim) dans votre projet.

Dans l’inspecteur, il y a une case à cocher pour « Temps de boucle », alors décochez-la.

Si vous lancez le jeu, vous verrez que l’animation s’arrête à 24. Il est efficace pour les effets d’explosion ponctuels.

Modifier la vitesse de l’animation

Sélectionnez le sprite que vous souhaitez animer dans la hiérarchie.

Sélectionnez ensuite l’onglet Animation. Si vous n’avez pas d’onglet Animation, sélectionnez Fenêtre > Animation > Animation dans le menu.

Il existe un nombre appelé « échantillon », qui consiste à changer d’image en une seconde. Dans cet exemple, l’animation est de 24 images, de sorte que l’animation est répétée toutes les 2 secondes.

Si vous diminuez ce nombre, la vitesse de l’animation sera plus lente, et si vous l’augmentez, la vitesse augmentera.

À propos d’autres paramètres d’animation avancés

Les différents paramètres d’animation sont expliqués séparément dans les conseils spécifiques à l’animation. Ces paramètres ne sont pas exclusifs aux animations de sprites, mais ne sont pas exclusifs à l’objet C’est la même chose que la configuration d’autres animations de mouvement et d’animations 3D.

Dans cette astuce, nous allons vous expliquer comment passer d’une feuille de sprites à une animation.