Animations de sprites

Moteur Sprite

Le moteur Qt Quick est une machine à états stochastiques combinée à la capacité de découper des images contenant plusieurs trames d'une animation.

Machine à états

L'une des principales fonctions du moteur de sprites est sa machine à états interne. Celle-ci n'est pas identique aux états et aux transitions de Qt Quick et ressemble davantage à une machine à états conventionnelle. Les sprites peuvent avoir des transitions pondérées vers d'autres sprites ou vers eux-mêmes. Lorsque l'animation d'un sprite se termine, le moteur de sprites choisit le sprite suivant de manière aléatoire, sur la base des transitions pondérées disponibles pour le sprite qui vient de se terminer.

Vous pouvez affecter le sprite en cours de lecture de deux manières. Vous pouvez le forcer arbitrairement à commencer immédiatement à jouer n'importe quel sprite, ou vous pouvez lui demander d'effectuer une transition progressive vers un sprite donné. Si vous lui demandez d'effectuer une transition progressive, il atteindra le sprite cible en passant par des transitions d'état valides en utilisant le plus petit nombre de sprites intermédiaires (mais en ignorant les pondérations relatives). Cela vous permet d'insérer facilement une animation de transition entre deux sprites différents.

À titre d'exemple, considérons le diagramme ci-dessus qui illustre les sprites d'un personnage hypothétique d'un jeu de plateforme en 2D. Le personnage commence par afficher l'état "debout". À partir de cet état, sauf intervention extérieure, il passera soit à l'animation d'attente, soit à l'animation de marche, soit jouera à nouveau l'animation d'immobilité. Les poids de ces transitions étant respectivement de un, zéro et trois, il a une chance sur quatre de jouer l'animation d'attente à la fin de l'animation d'attente, et trois chances sur quatre de rejouer l'animation d'attente. Cela permet au personnage d'avoir un comportement légèrement animé et variable lorsqu'il attend.

Parce qu'il y a une transition de poids zéro vers l'animation de marche, l'animation de position debout n'y fera normalement pas de transition. Mais si vous définissez l'animation de but comme étant l'animation de marche, l'animation de marche sera jouée à la fin de l'animation d'attente. Si l'animation précédente était une animation d'attente, elle se terminera, puis jouera l'animation debout, puis l'animation de marche. Il continuera ensuite à jouer l'animation de marche jusqu'à ce que l'animation d'objectif soit désactivée, auquel cas il passera à l'animation d'attente après avoir terminé l'animation de marche.

Si vous définissez ensuite l'état de l'objectif sur l'animation de saut, l'animation de marche sera terminée avant de jouer l'animation de saut. Étant donné que l'animation de saut ne passe pas à d'autres états, elle continuera à jouer l'animation de saut jusqu'à ce que l'état soit forcé à changer. Dans cet exemple, vous pourriez le ramener à la marche et changer l'animation du but en marche ou en rien (ce qui l'amènerait à jouer l'animation de la position debout après l'animation de la marche ). Notez qu'en forçant l'animation, vous pouvez commencer à jouer l'animation immédiatement.

Format d'entrée

Les formats de fichier acceptés par le moteur de sprites sont les mêmes que ceux acceptés par d'autres types de QML, tels que Image. Toutefois, pour animer l'image, le moteur de sprites a besoin que le fichier image contienne toutes les images de l'animation. Elles doivent être disposées en une ligne contiguë, qui peut s'étendre du bord droit du fichier à une rangée inférieure partant du bord gauche du fichier (et qui est placée directement sous la rangée précédente).

Prenons l'exemple de l'image ci-dessus. Pour l'instant, il suffit de considérer les chiffres noirs et de supposer que les carrés ont une taille de 40x40 pixels. Normalement, l'image est lue à partir du coin supérieur gauche. Si vous avez spécifié une taille d'image de 40x40 pixels et un nombre d'images de 8, les images seront lues au fur et à mesure de leur numérotation. L'image en haut à gauche serait la première image, l'image en haut à droite serait la cinquième image, puis il passerait à la ligne suivante (à l'emplacement des pixels 0,40 dans le fichier) pour lire la sixième image. La lecture s'arrêterait après l'image marquée 8, et s'il y avait des données d'image dans le carré sous l'image quatre, elles ne seraient pas incluses dans l'animation.

Il est possible de charger des animations à partir d'un décalage arbitraire, mais elles suivront toujours le même schéma. Considérons maintenant les chiffres rouges. Si nous spécifions que l'animation commence à l'emplacement du pixel 120,0, avec un nombre d'images de 5 et la même taille d'image que précédemment, l'animation chargera les images telles qu'elles sont numérotées en rouge. Les premiers 120x40 de l'image ne seront pas utilisés, car il commence à lire des blocs 40x40 à partir de l'emplacement 120,0. Lorsqu'il atteint la fin du fichier à 160,0, il commence à lire la ligne suivante à partir de 0,40.

Les chiffres bleus indiquent les numéros de trame si vous essayez de charger deux trames de cette taille, à partir de 40,40. Notez qu'il est possible de charger plusieurs sprites à partir d'un seul fichier image. Les nombres rouge, bleu et noir peuvent tous être chargés en tant qu'animations distinctes dans le même moteur de sprites. Le code suivant charge les animations conformément à l'image. Il précise également que les animations doivent être jouées à 20 images par seconde.

Sprite {
    name: "black"
    source: "image.png"
    frameCount: 8
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "red"
    source: "image.png"
    frameX: 120
    frameCount: 5
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}
Sprite {
    name: "blue"
    source: "image.png"
    frameX: 40
    frameX: 40
    frameCount: 2
    frameWidth: 40
    frameHeight: 40
    frameRate: 20
}

Les images d'une même animation doivent avoir la même taille. Toutefois, ce n'est pas le cas des animations multiples dans le même fichier. Les sprites sans frameCount supposent qu'ils occupent la totalité du fichier et vous devez spécifier la taille de l'image. Les sprites sans taille d'image supposent qu'ils sont carrés et qu'ils occupent tout le fichier sans s'enrouler, et vous devez spécifier un nombre d'images.

Le moteur de sprites copie et découpe les images en interne pour les adapter à un format interne plus facile à lire, ce qui entraîne certaines limitations de la mémoire graphique. Étant donné que tous les sprites d'un même moteur doivent se trouver dans la même texture, le chargement de nombreuses animations différentes peut se heurter aux limites de la mémoire de texture sur les périphériques embarqués. Dans ce cas, un avertissement sera affiché sur la console, indiquant la taille maximale de la texture.

Il existe plusieurs outils permettant de transformer un ensemble d'images en feuilles de sprites. En voici quelques exemples :

• Plugin Photoshop : http://www.johnwordsworth.com/projects/photoshop-sprite-sheet-generator-script
• Plugin SpriteSheet de Gimp
• Outil Cmd-line : http://www.imagemagick.org/script/montage.php

Types QML utilisant le moteur de sprites

Les sprites pour le moteur de sprites peuvent être définis à l'aide du type Sprite. Ce type comprend les paramètres d'entrée, ainsi que la durée de l'animation et les transitions pondérées vers d'autres animations. Il s'agit d'une classe de données pure, qui n'effectue aucun rendu.

SpriteSequence est un type qui utilise un moteur de sprites pour dessiner les sprites qu'il définit. Il s'agit d'un moteur de sprites unique et autonome, qui n'interagit pas avec d'autres moteurs de sprites. Les types Sprite peuvent être partagés entre des types utilisant un moteur de sprites, mais cela ne se fait pas automatiquement. Ainsi, si vous avez défini un sprite dans un type SpriteSequence, vous devrez le redéfinir (ou référencer le même type Sprite ) dans la propriété sprites d'un autre type SpriteSequence afin de passer à cette animation.

En outre, ImageParticle peut utiliser des types Sprite pour définir des sprites pour chaque particule. Il s'agit là encore d'un seul moteur de sprites par type. Le fonctionnement est similaire à celui de SpriteSequence, mais il bénéficie également de la variabilité paramétrée fournie par le type ImageParticle.

Type AnimatedSprite

Pour les cas d'utilisation qui ne nécessitent pas de transition entre les animations, envisagez le type AnimatedSprite. Ce type affiche des animations de sprites avec le même format d'entrée, mais seulement une à la fois. Il permet également un contrôle manuel plus fin, car aucun moteur de sprites ne gère la synchronisation et les transitions en coulisses.