Animation et chronologie

Une animation est un sprite qui a plus d'une image. La chronologie les affiche sous forme de colonnes, avec les calques en lignes ; chaque carré où un calque rencontre une image est un cel (Comment ton travail est organisé).

La chronologie

En haut de la chronologie :

Chaque colonne d'image porte le numéro de l'image et, en dessous, sa durée d'affichage en millisecondes : clique sur la case du numéro pour saisir une nouvelle durée. Les lignes de calques descendent sur la gauche, le calque du dessus en premier.

Dans la grille, un cel qui contient quelque chose affiche un point plein, et un cel vide affiche un point creux. Une ligne relie les cels liés, les cels qui partagent une même image. Survole un cel pour voir de quel calque et de quelle image il s'agit, et à quoi il est lié.

Images

Le menu Image, et le clic droit sur un numéro d'image, proposent tout ce qui concerne les images :

• Image > Nouvelle image vide ajoute une image vide après l'image courante.
• Image > Nouvelle image vide avant ajoute une image vide juste avant l'image courante. C'est ainsi que tu places une image avant l'image 1.
• Image > Nouvelle image copie l'image courante (ou les images sélectionnées) et ses cels. Sur un calque continu, le cel de la copie est lié à la place.
• Image > Nouvelle image liée la copie avec ses cels liés, si bien que les copies partagent leurs images avec les originaux : dessine sur l'un et les deux changent.
• Image > Supprimer l'image supprime l'image courante ou les images sélectionnées (un sprite en garde au moins une).
• Image > Inverser les images inverse les images sélectionnées, ou toutes si moins de deux sont sélectionnées.

Minutage. Chaque image a sa propre durée, de 10 ms à 65 535 ms (environ 65 secondes, comme dans Aseprite). Saisis-la dans la case sous le numéro de l'image, ou utilise Image > Propriétés de l'image.... Image > Appliquer la durée actuelle à toutes les images... donne à chaque image la durée de l'image courante.

Couleur et verrouillage. Image > Propriétés de l'image... donne aussi à une image une étiquette de couleur, affichée sous forme de bande sur son en-tête pour repérer les poses clés ou les images à retravailler, et un verrou. Une image verrouillée (marquée d'un cadenas) refuse les modifications de ses cels, et ne peut être ni supprimée, ni déplacée, ni changée de durée, que ce soit par les outils ou par les scripts. Déverrouille-la dans la même boîte de dialogue. Les deux sont enregistrés avec le sprite et synchronisés, mais .aseprite n'a pas d'équivalent, donc ils sont perdus quand tu exportes vers ce format. Les scripts utilisent app.setFrameProps.

Réordonner. Fais glisser une image par la poignée qui apparaît à côté de son numéro, ou sélectionne-la et appuie sur Alt avec ← ou →. Plusieurs images sélectionnées se déplacent ensemble : fais glisser n'importe laquelle et toute la sélection se déplace en bloc, et les images qui ne sont pas côte à côte sont rassemblées en une seule série dans l'ordre de la chronologie. Maintiens Alt en déposant pour copier les images sélectionnées à cet endroit à la place ; les copies sont insérées au point de dépôt et deviennent la sélection. Dans les deux cas, c'est une seule étape d'annulation. (Arrête d'abord la lecture.)

Les étiquettes suivent les images par leur position, comme dans Aseprite : les images sorties d'une étiquette la quittent, et une copie déposée juste après la dernière image d'une étiquette la rejoint, comme toute nouvelle image ajoutée à cet endroit.

Lecture

Appuie sur Enter pour lire et mettre en pause. Chaque image s'affiche pendant sa propre durée, mise à l'échelle par le réglage de vitesse ; la lecture suit l'horloge, en sautant une image si l'ordinateur prend du retard. Modifier quoi que ce soit, ou commencer à dessiner, arrête la lecture, comme dans Aseprite. Le mode de lecture décide comment les étiquettes sont lues :

Les répétitions d'une étiquette comptent chaque passage, et chaque sens d'un ping-pong est un passage : une étiquette ping-pong avec 2 répétitions joue 1, 2, 3, 2, 1. Une répétition de 0 joue une étiquette une fois au passage (un ping-pong fait l'aller-retour) et la fait boucler quand c'est l'étiquette en cours de lecture. Les étiquettes se lisent de la même façon dans les exports, comme dans Aseprite.

Pour lire une seule étiquette, clique sur sa bande au-dessus des images (clique de nouveau pour revenir à toute l'animation). Elle boucle, et les étiquettes qu'elle contient se lisent à leur façon. Avec Boucle désactivée, elle joue son nombre de répétitions puis s'arrête ; il en va de même pour toute l'animation à sa dernière image.

Le panneau Aperçu lit à la même vitesse, pour que tu puisses regarder l'animation pendant que tu dessines. Son bouton 1:1 affiche le sprite en taille réelle, un pixel de sprite par pixel d'écran.

Étiquettes

Une étiquette nomme une plage d'images (« idle », « walk ») pour que tu puisses la lire seule et l'exporter seule. Sélectionne les images et appuie sur le bouton Étiquette, ou choisis Image > Nouvelle étiquette.... La boîte de dialogue contient :

• Nom et Couleur ;
• De l'image et À l'image ;
• Sens : Avant, Arrière, Ping-pong ou Ping-pong inversé ;
• Répétitions : combien de fois elle est lue avant que la lecture continue ; 0 la fait boucler indéfiniment.

Fais glisser la bande d'une étiquette pour la déplacer, ou ses extrémités pour changer ses images. Au clavier, va avec Tab sur la bande et appuie sur Alt+Left ou Alt+Right pour la déplacer d'une image, ou va avec Tab sur l'une de ses extrémités et appuie sur Left ou Right. Double-clique sur la bande, ou utilise le crayon qui apparaît quand tu la pointes, pour modifier l'étiquette ; fais un clic droit dessus pour la supprimer. Comme dans Aseprite, une étiquette couvre des positions d'images : une image que tu sors d'une étiquette la quitte, une image que tu déposes entre deux de ses images la rejoint, et une nouvelle image ajoutée juste après la dernière image d'une étiquette l'étend. Une nouvelle image ajoutée avant la première image d'une étiquette ne fait pas partie de l'étiquette : l'étiquette reste sur ses images et se décale avec elles.

Cels

Clique sur un cel pour le sélectionner. Ensuite :

• Shift+clic sélectionne une plage, Ctrl+clic ajoute ou retire un cel, et le glissement depuis un cel non sélectionné sélectionne un rectangle ;
• cliquer sur un numéro d'image ou un nom de calque sélectionne toute cette colonne ou cette ligne ;
• Shift avec les touches fléchées étend la sélection, et Esc l'efface ;
• sur un écran tactile, appuie et maintiens une demi-seconde, puis fais glisser.

Avec des cels sélectionnés et la chronologie ayant le focus, les raccourcis habituels agissent sur des cels entiers : Ctrl+X, Ctrl+C et Ctrl+V les coupent, copient et collent, et Del les efface. Les mêmes commandes sont dans Édition > Cel et dans le menu du clic droit :

• Édition > Cel > Lier les cels fait partager une même image aux cels sélectionnés de chaque calque ; Édition > Cel > Dissocier les cels redonne à chacun sa propre copie (dissocier le cel auquel les autres étaient liés laisse les autres liés entre eux).
• Fais glisser les cels sélectionnés pour les déplacer, ou maintiens Alt pendant le glissement pour les copier. Le contour devient vert là où ils peuvent aller et rouge là où ils ne peuvent pas. Alt+Shift avec une touche fléchée les pousse d'un pas.

Pour peindre sur plusieurs cels à la fois, par exemple pour corriger le même contour dans chaque image, active Peindre sur plusieurs cels dans la barre d'options de l'outil et sélectionne les cels. Peindre sur l'un d'eux les peint tous en une seule étape d'annulation ; sélectionner des numéros d'image ou des noms de calque fonctionne aussi. Les calques verrouillés et masqués sont ignorés, et les cels liés ne sont peints qu'une fois. Voir Outils.

Les cels ne vont que là où ils ont le même sens : des pixels sur des calques d'image, des tuiles sur un calque tilemap avec le même tileset. Les calques verrouillés et masqués sont ignorés.

Les Propriétés du cel (clic droit sur un cel) définissent son Opacité, qui se combine avec celle du calque, son Z-index, qui le dessine autant de calques plus haut ou plus bas sur cette image seulement (en comptant chaque calque et groupe, comme le fait Aseprite ; il peut sortir d'un groupe simple, mais pas d'un groupe ayant sa propre opacité ou son propre mode de fusion), et ses données utilisateur. Les cels liés partagent une même opacité et les mêmes données utilisateur (comme dans Aseprite) ; le z-index est propre à chaque cel. Les cels du calque d'arrière-plan sont toujours totalement opaques, et l'opacité du cel d'un calque verrouillé ne peut pas changer.

Interpolation

Une interpolation (tween) dessine pour toi les images entre deux images clés : elle déplace, met à l'échelle, fait pivoter ou estompe l'image de l'image clé de début en allant vers l'image clé de fin, et dessine chaque image intermédiaire comme un cel ordinaire. L'image clé de fin garde ton propre dessin. Comme les intermédiaires sont de simples pixels, les exports, la pelure d'oignon et les scripts voient des images ordinaires, et Aseprite aussi quand tu enregistres en .aseprite (les réglages de l'interpolation voyagent dans les données utilisateur des cels, si bien que pxstud.io retrouve l'interpolation quand tu ouvres le fichier). Les interpolations fonctionnent sur les calques d'image, pas sur l'arrière-plan.

L'inspecteur d'interpolation

Dessine les images clés de début et de fin sur le même calque, sélectionne l'image clé de début et choisis Édition > Cel > Interpoler... (Shift+T, ou clic droit sur le cel). L'inspecteur l'interpole jusqu'au cel suivant de ce calque qui contient un dessin ou, si tu as sélectionné plusieurs images, jusqu'au dernier cel sélectionné qui contient un dessin. Ouvert sur l'image clé de début d'une interpolation ou sur l'un de ses intermédiaires, il modifie cette interpolation. S'il n'y a aucun dessin plus loin sur le calque, une sélection de plusieurs images se termine sur la dernière image sélectionnée, même vide (pour un fondu ou une disparition).

L'inspecteur est une fenêtre que tu peux faire glisser par sa barre de titre et laisser ouverte : tu peux toujours parcourir la chronologie, dessiner et annuler pendant qu'il est là. Esc le ferme.

• Aperçu : lit en boucle l'image clé de début, les intermédiaires et l'image clé de fin, aux durées propres des images et avec les autres calques visibles autour. Il suit tes changements au fur et à mesure. Mets-le en pause et avance image par image avec les boutons en dessous. Un grand sprite n'affiche que la partie que parcourt l'interpolation. La ligne à côté indique combien d'intermédiaires il y a et sur quelles images (« 6 intermédiaires, images 3–8 »).
• Préréglages : des interpolations toutes faites (voir « Préréglages d'interpolation » plus bas). Utiliser le préréglage remplit le formulaire ; Appliquer le concrétise.
• Plusieurs calques : s'affiche quand ta sélection couvre plus d'un calque avec un dessin sur l'image de départ (voir « Interpoler plusieurs calques » plus bas).
• Pose : les colonnes Début et Fin définissent où se trouve l'image au début et à la fin : Position X et Y en pixels, Échelle X et Y (1 est la taille d'origine, une valeur négative la retourne), Rotation en degrés (sens horaire ; 360 est un tour complet, donc 720 fait tourner deux fois), Inclinaison X et Y en degrés, et Opacité en pourcentage. Verrouiller les proportions garde X et Y proportionnels quand tu en changes un. Pivoter par le chemin le plus court transforme 350° en un pas arrière de 10° plutôt qu'en un tour presque complet ; désactive-le pour tourner dans le sens le plus long. Caler sur l'image clé de fin définit la position et l'échelle de Fin pour que l'image de début atterrisse là où se trouve le dessin de l'image clé de fin, à sa taille. Une nouvelle interpolation démarre avec cela déjà rempli. Réinitialiser le début remet Début à aucun changement.
• Easing : comment le mouvement accélère et ralentit. Chaque petite courbe est un choix : Linéaire (régulier), Maintien (reste en place, puis saute à l'image clé de fin), Paliers (avance par sauts égaux ; règle leur nombre), et Sine, Quad, Cubic, Quart, Quint, Expo, Circ, Back, Elastic et Bounce, chacun en entrée (démarre lentement), en sortie (finit lentement) ou en entrée-sortie (les deux). Utilise les touches fléchées pour te déplacer parmi eux. Back a un Dépassement, Elastic une Amplitude et une Période (la durée de chaque oscillation), et Bounce un nombre de Rebonds. Sous Avancé : accélération par propriété tu peux donner à la position, l'échelle, la rotation, l'inclinaison, l'opacité ou à la propriété de couleur un easing propre, par exemple un rebond sur la position pendant que le fondu reste régulier. Dessiner une courbe transforme l'easing choisi en une courbe que tu modifies toi-même (voir ci-dessous).
• Images clés : Image clé de fin choisit l'image sur laquelle l'interpolation se termine ; déplace-la et clique sur Appliquer pour allonger ou raccourcir l'interpolation (les intermédiaires au-delà de la nouvelle fin sont supprimés, ou conservés comme simples cels si tu as peint dessus). Enchaîner plusieurs images clés crée une interpolation de chaque image clé à la suivante, jusqu'à celle que tu choisis, en une seule étape ; Faire atterrir chaque interpolation sur son image clé de fin donne à chacune sa propre pose Caler sur l'image clé de fin. Prolonger ajoute une interpolation de plus depuis l'image clé de fin de cette interpolation jusqu'à l'image clé suivante, avec ces réglages.
• Trajectoire : comment la position se déplace. Droite ; un Arc d'une Hauteur donnée (un saut ; une valeur négative va dans l'autre sens) ; une Onde avec une Amplitude, un nombre de Cycles et une Phase de départ ; un Zigzag avec une Amplitude et des Cycles ; ou une Secousse de Amplitude pixels au plus à chaque image. Une secousse est la même à chaque fois pour une même Graine ; Relancer en choisit une autre. Dessinée est un trajet que tu dessines sur le canevas (voir « Dessiner une trajectoire de mouvement » plus bas). Orienter selon la trajectoire tourne l'image dans sa direction de déplacement, quelle que soit la trajectoire. Afficher la trajectoire sur le canevas dessine le trajet et un point là où tombe chaque intermédiaire.
• Écrasement et étirement : étire l'image dans le sens de son mouvement quand elle va vite et l'écrase dans l'autre sens, en gardant sa surface. 0 % le désactive.
• Pivot : le point autour duquel l'échelle, la rotation et l'inclinaison s'exercent. Clique sur l'un des neuf carrés (coins, bords ou centre du cel de l'image clé de début), ou saisis X et Y, où 0 est le bord gauche ou supérieur et 1 le bord droit ou inférieur. Avec Pivot en : Pixels du canevas, X et Y sont plutôt un point fixe du canevas, si bien que plusieurs calques interpolés autour du même point bougent ensemble d'un seul bloc.
• Fondu : comment les changements d'opacité s'affichent (voir « Fondus tramés et fondus enchaînés » plus bas). Alpha change l'opacité du cel ; Tramage fait apparaître ou disparaître des pixels entiers à travers une Trame. Fondu enchaîné vers l'image clé de fin transforme l'image en dessin de l'image clé de fin.
• Couleur : coche Animer la couleur pour changer les couleurs de l'image au fil de l'interpolation. Teinte (degrés), Saturation et Clarté (pourcentage) fonctionnent comme Teinte/Saturation, et Intensité de la coloration mélange chaque couleur vers la Couleur de coloration ; chacun a une valeur de Début et de Fin. L'easing de la propriété de couleur est celui appelé « Couleur et rampe » sous l'accélération par propriété. Chaque intermédiaire est recoloré à partir de l'image de l'image clé de début, donc les modifications ne s'accumulent pas. Sur les sprites indexés, les pixels recolorés s'alignent sur la couleur de palette la plus proche.
• Rampe de palette (sprites indexés) : coche Décaler les indices de la palette le long d'une rampe pour faire défiler les couleurs sans les recolorer. Les pixels qui utilisent les entrées de palette de Premier à Dernier (l'entrée transparente est exclue) avancent de Décalage positions le long de cette série à la fin de l'interpolation, soit en bouclant au-delà des extrémités, soit en s'y arrêtant. Les autres pixels restent tels quels. Les pastilles montrent la rampe.
• Rééchantillonnage : comment les pixels pivotés ou redimensionnés sont dessinés. Automatique utilise Plus proche voisin (pixels exacts) et passe à RotSprite dès que quelque chose pivote ou s'incline ; en choisir un toi-même le conserve. Bilinéaire mélange les couleurs, pour un art de style peinture.
• Sous-pixel : comment les positions intermédiaires deviennent des pixels entiers. Monotone ne recule jamais par rapport au sens du déplacement, Arrondi prend le pixel le plus proche, et Troncature arrondit à l'inférieur.
• Minutage : Images répartit le mouvement uniformément sur les intermédiaires ; Temps suit les durées des images, si bien qu'une image plus longue couvre une plus grande part du mouvement.
• Délai (images) : garde la pose de départ pendant ce nombre d'images, puis le mouvement remplit le reste de l'interpolation et arrive quand même sur l'image clé de fin. Dans l'easing par propriété, chaque piste peut attendre un nombre d'images différent, par exemple un fondu qui commence après le déplacement.
• Exposition : Sur 1 dessine une nouvelle pose à chaque image ; sur 2 en dessine une toutes les deux images et la maintient pendant deux, et ainsi de suite jusqu'à huit.
• Ping-pong (aller-retour) : le mouvement atteint sa pose de fin à mi-chemin de l'interpolation et revient à la pose de début à l'image clé de fin, si bien qu'une boucle qui finit là où elle a commencé n'a pas besoin d'un second dessin. L'easing façonne chaque moitié.
• Verrouillage de palette : quand il est activé pour un sprite RGBA (Sprite > Palette > Verrouillage de palette), les intermédiaires rééchantillonnés et recolorés s'alignent sur la palette, comme tout ce que tu peins. Un simple déplacement copie l'image à l'identique. Activer ou désactiver le verrouillage redessine les interpolations dont Régénérer automatiquement est activé.
• Régénérer automatiquement : redessine les intermédiaires chaque fois que l'image clé de début ou les images changent. Désactive-le pour les redessiner toi-même avec Édition > Cel > Régénérer l'interpolation.

Appliquer crée l'interpolation (ou la modifie) et garde l'inspecteur ouvert dessus ; Appliquer et fermer le ferme aussi. Chacun est une seule étape d'annulation. Les problèmes de valeur, ou une interpolation qui chevaucherait une autre sur le calque, s'affichent en bas de la fenêtre, et Appliquer attend qu'ils soient corrigés.

Si les images clés sont côte à côte, il n'y a pas de place pour des intermédiaires : coche Ajouter et choisis combien d'images vides insérer entre elles à l'application. Les images sont communes à tous les calques, donc les nouvelles images sont aussi vides sur les autres calques. Si l'image clé de début est un cel lié, l' inspecteur propose Dissocier, car une interpolation a besoin de l'image propre de l'image clé de début.

Conseils :

• Sur 2 donne un rendu dessiné à la main et divise par deux les poses à nettoyer si tu repeins dessus.
• Garde le sous-pixel Monotone pour les mouvements lents et progressifs : un simple arrondi peut faire trembler l'image d'un pixel dans les deux sens. Il agit comme Arrondi pour les easings qui dépassent (Back, Elastic, Bounce) et pour les trajectoires autres que Droite.
• Pour tout ce qui pivote, RotSprite garde des bords de pixel art nets et n'invente jamais de couleurs. Plus proche voisin est plus rapide mais laisse des diagonales crénelées.
• Pour corriger un intermédiaire à la main, peins simplement dessus : ta modification est conservée quand l'interpolation est redessinée.
• L'image clé de fin montre ton propre dessin. Pour un mouvement qui s'arrête au repos, dessine (ou copie) l'image au repos sur la dernière image ; laisse-la vide pour un fondu ou une disparition.

Préréglages d'interpolation

Préréglages, en haut de l'inspecteur, contient des interpolations toutes faites : fondus entrant et sortant, tramage entrant et sortant, un fondu enchaîné tramé, apparition et disparition élastiques, chute et rebond, glissements depuis chaque côté, une arrivée en piqué le long d'une trajectoire dessinée, secousse, un saut écrasé-étiré, écrasement et étirement, flotter, balancement, rotation et clignotement. Choisis-en un puis Utiliser le préréglage : il remplit le formulaire, que tu peux encore modifier, et Appliquer (ou Appliquer aux calques) le concrétise.

Les préréglages sont relatifs : un même préréglage convient à n'importe quel dessin et à n'importe quelle durée.

• les distances se mesurent à la taille du dessin de départ : un glissement « depuis une largeur à gauche » déplace de 16 pixels un dessin de 16 pixels de large et de 40 un dessin de 40, la hauteur d'un arc et la taille d'une secousse suivent le plus petit côté du dessin, et une trajectoire dessinée s'étire avec la largeur et la hauteur du dessin. Les distances tombent sur des pixels entiers ;
• le mouvement remplit l'interpolation quel que soit son nombre d'images, et un délai en est une part ;
• le pivot est une part du cadre du dessin de départ ;
• tout le reste (easing, échelle, rotation, opacité, couleur, écrasement, exposition, ping-pong, fondu) est repris tel quel. Les réglages de rééchantillonnage, de sous-pixel et de minutage restent les tiens.

Sur un sprite indexé, un préréglage qui fait un fondu utilise un fondu tramé, puisqu'une opacité partielle ne peut pas s'afficher avec une palette.

Sous Enregistrer et gérer les préréglages, tape un nom puis Enregistrer comme préréglage pour garder le formulaire actuel comme préréglage à toi (enregistrer sous un nom déjà utilisé le remplace) ; choisis l'un des tiens pour le Renommer ou Supprimer le préréglage. Tes préréglages restent sur cet appareil, comme les courbes enregistrées : ils ne sont pas dans le fichier et ne sont pas synchronisés. Exporter les télécharge dans un fichier JSON et Importer… le relit (sur un autre appareil, par exemple), en ignorant tout ce qui n'est pas un préréglage valide.

Fondus tramés et fondus enchaînés

Le pixel art ne peut souvent pas montrer de pixels semi-transparents, et les sprites indexés pas du tout : un fondu alpha n'y change que l'opacité du cel, que l'éditeur mélange hors de la palette. Règle Fondu sur Tramage et la piste d'opacité dissout l'image à la place : des pixels entiers apparaissent ou disparaissent à travers une trame Bayer 2×2, 4×4, 8×8 ou Groupé (similigravure), la part de pixels conservés suivant l'opacité avec son easing. La trame est fixée au canevas, pas à l'image : elle ne glisse pas quand l'image bouge, et un fondu entrant ne fait qu'ajouter des pixels. Seuls des pixels entiers des propres couleurs du dessin sont gardés, si bien que les sprites indexés et ceux qui ont une profondeur de couleur restent exacts. Les nouvelles interpolations sur les sprites indexés commencent avec Tramage.

Fondu enchaîné vers l'image clé de fin transforme l'image de départ en dessin de l'image clé de fin au fil de l'interpolation (selon l'easing de la piste d'opacité) : avec Tramage, chaque pixel montre l'un ou l'autre dessin ; avec Alpha, les deux sont mélangés. Peindre sur l'image clé de fin redessine le fondu enchaîné.

Interpoler plusieurs calques

Sélectionne des cels sur plusieurs calques (une tête, un corps et un chapeau, ou les lettres d'un titre) de l'image de départ à l'image de fin, puis ouvre l'inspecteur. Plusieurs calques indique combien de calques ont un dessin sur l'image de départ ; règle l'interpolation comme d'habitude et choisis Appliquer aux calques pour leur donner à tous la même interpolation en une seule étape d'annulation.

• Décaler de fait démarrer chaque calque ce nombre d'images après le précédent, dans l'Ordre choisi : calque du haut d'abord, calque du bas d'abord, ou l'ordre dans lequel tu les as sélectionnés. Un calque plus tardif garde sa pose de départ jusqu'à son tour.
• Durée : Finir ensemble fait terminer toutes les interpolations sur la même image clé de fin, si bien que les calques plus tardifs bougent un peu plus vite ; Prolonger garde la même durée de mouvement, si bien que chaque calque plus tardif finit plus tard (des images sont ajoutées à la fin si besoin).
• Pivot de groupe commun met à l'échelle, fait pivoter et incline tous les calques autour d'un seul point (le réglage Pivot pris sur le cadre autour des dessins de départ de tous les calques), si bien qu'ils bougent d'un seul bloc rigide au lieu de tourner chacun autour de son centre.

Dans la chronologie, les images où un calque attend sont dessinées avec une flèche en pointillés et une teinte plus pâle.

Dessiner une trajectoire de mouvement

Règle Trajectoire sur Dessinée pour guider l'image le long d'une courbe que tu dessines. Elle part du trajet que tu avais (un arc devient une trajectoire courbe), de la position de départ à celle d'arrivée. Tant que l'inspecteur est ouvert, le canevas montre la trajectoire avec ses ancres, leurs poignées et un point pour chaque intermédiaire :

• fais glisser une ancre (un cercle) pour la déplacer ; la première et la dernière ancre sont les positions de départ et d'arrivée, donc les faire glisser règle aussi la position de Fin ;
• fais glisser une poignée (un carré) pour courber la trajectoire ; la poignée opposée tourne avec elle, ou maintiens Alt pour n'en déplacer qu'une ;
• clique sur la ligne pour y ajouter une ancre, Alt+clic sur une ancre pour la supprimer, et double-clic sur une ancre pour la faire passer de lisse à angle et inversement ;
• Ajouter une ancre et Supprimer une ancre dans l'inspecteur font de même au clavier.

Les ancres et les poignées s'alignent sur le centre des pixels. L'image parcourt la trajectoire à vitesse constante : l'easing de la position donne le rythme le long de celle-ci, pas la forme de la courbe. Coche Orienter selon la trajectoire pour tourner l'image dans sa direction de déplacement (elle part sans rotation) ; RotSprite garde ses bords nets. La trajectoire fait partie de l'interpolation : elle est conservée dans les fichiers .pxstudio et .aseprite. Les modifications sur le canevas restent en attente, comme le reste du formulaire, jusqu'à ce que tu cliques sur Appliquer. Décoche Modifier la trajectoire sur le canevas pour voir la trajectoire sans ses poignées.

Dessiner ta propre courbe d'easing

Dessiner une courbe (à côté de Linéaire, Maintien et Paliers) transforme l'easing en une courbe que tu façonnes : un carré où l'axe horizontal indique où tu en es dans l'interpolation et l'axe vertical indique où en est le mouvement. Elle part de l'easing que tu avais choisi. Fais glisser un point (une ancre) pour le déplacer, fais glisser les carrés à côté du point sélectionné (ses poignées) pour courber la courbe, double-clique dans le vide pour ajouter une ancre, ou double-clique sur un point (ou appuie sur Del) pour le retirer. Les touches fléchées poussent l'ancre ayant le focus, et les champs Progression et Valeur la règlent précisément. Angle retire les poignées pour que la courbe tourne franchement à cet endroit. Les valeurs au-dessus de 1 ou en dessous de 0 dépassent. Retourner inverse la courbe en miroir ; Partir de la remplace par n'importe quel easing prêt à l'emploi à modifier.

Donne un nom à la courbe et Enregistrer dans la bibliothèque pour la garder pour d'autres interpolations : les courbes enregistrées vivent sur cet appareil seulement, et en choisir une dans Courbes enregistrées la charge dans l'éditeur. Enregistrer sous un nom déjà utilisé remplace cette courbe.

Chaînes et déplacement de la fin d'une interpolation

Une chaîne est une suite d'interpolations à travers plusieurs images clés d'un même calque, chacune se terminant sur l'image clé où la suivante commence, si bien qu'un dessin peut terminer une interpolation et commencer la suivante. Sélectionne la première image clé et choisis Édition > Cel > Interpoler entre les images clés pour enchaîner à travers toutes les images clés suivantes du calque, chaque interpolation atterrissant sur sa propre image clé de fin, ou utilise Enchaîner plusieurs images clés dans l'inspecteur pour choisir où s'arrêter et garder tes propres réglages. C'est une seule étape d'annulation. Les interpolations qui commencent déjà sur ces images clés sont remplacées.

Pour déplacer la fin d'une interpolation, sélectionne son image clé de début jusqu'à l'image sur laquelle elle doit se terminer et choisis Édition > Cel > Définir la fin de l'interpolation sur la sélection, ou change Image clé de fin dans l'inspecteur et clique sur Appliquer. Une interpolation ne peut pas être allongée dans la suivante d'une chaîne.

Interpolations dans les scripts

Les scripts ont les mêmes interpolations : app.setTween(layerId, frameId, { to = endFrameId, end = { dx = 12 }, ease = "quad", mode = "out", path = "arc", height = 6 }) interpole le cel d'un calque à frameId jusqu'à une image plus loin et renvoie l'id de l'interpolation, et app.regenerateTween, app.bakeTween et app.removeTween prennent le calque et l'image de départ. app.setTweenChain(layerId, { frameA, frameB, frameC }, opts) interpole à travers ces images clés en une étape et renvoie les ids des interpolations, et app.setTweenEnd(layerId, frameId, newEndFrameId) déplace la fin d'une interpolation. Les options acceptent aussi curve (un easing dessiné), trackEasing, color et colorFrom (teinte, saturation, clarté, coloration), tintColor (une chaîne hex ou { r, g, b }), ramp ({ first, last, shift, wrap }), fade, ditherPattern et crossfade, delay et trackDelay, pivotSpace, orient, et path = "custom" avec points (les ancres de la trajectoire dessinée). app.tweenPresets() liste les préréglages intégrés et app.tweenPreset("popIn") en renvoie un ; passe son recipe comme option preset pour l'adapter au cel de départ. app.setTweenStagger({ layerA, layerB }, frameId, { to = endFrameId, preset = app.tweenPreset("slideInTop").recipe, step = 2, groupPivot = true }) interpole plusieurs calques en une étape. Consulte la référence de scripting pour toutes les options.

Interpolations dans la chronologie

• Une flèche court le long du bas des cels depuis l'image clé de début jusqu'à une pointe sur l'image clé de fin. Une image clé peut terminer une interpolation et commencer la suivante.
• Les images intermédiaires sont teintées en bleu. Les images où l'interpolation attend encore la fin de son délai sont plus pâles, avec une flèche en pointillés.
• Un petit losange sombre marque un intermédiaire sur lequel tu as peint ou que tu as déplacé. Ta modification reste quand l'interpolation est redessinée, jusqu'à ce que tu utilises Édition > Cel > Revenir à l'interpolation.
• Quand l'image clé de début change, ou que les images ou leur minutage changent, l'interpolation est périmée : ses intermédiaires ne correspondent plus. La flèche devient orange, ainsi que le coin de l'image clé de début. Utilise Édition > Cel > Régénérer l'interpolation pour la redessiner. Une interpolation réglée pour se régénérer seule ne reste jamais périmée, sauf sur un calque verrouillé.
• Un coin rouge sur une image clé de début signifie que l'interpolation est cassée : son image de fin a été supprimée ou déplacée avant elle. Donne-lui une nouvelle fin, ou retire-la.

Survole un cel pour lire la même chose en mots (« début d'interpolation, jusqu'à l'image 9, périmée », « interpolé, modifié à la main ») ; les lecteurs d'écran l'annoncent aussi.

Commandes d'interpolation

Elles sont dans Édition > Cel et dans le menu du clic droit d'un cel. Elles agissent sur les cels sélectionnés (ou le cel actif), et n'importe quel cel d'une interpolation, son image clé de début ou un intermédiaire, représente toute l'interpolation. Chacune est une seule étape d'annulation, et les calques verrouillés et masqués sont ignorés.

• Édition > Cel > Régénérer l'interpolation redessine les intermédiaires à partir de l'image clé de début, en laissant tranquilles ceux que tu as modifiés à la main.
• Édition > Cel > Revenir à l'interpolation remet les intermédiaires modifiés à la main sélectionnés tels que l'interpolation les dessine.
• Édition > Cel > Figer l'interpolation conserve chaque intermédiaire comme un simple cel et supprime l'interpolation, si bien que rien ne les redessine plus.
• Édition > Cel > Retirer l'interpolation supprime l'interpolation et les intermédiaires qu'elle a dessinés. Ceux que tu as modifiés à la main restent, comme de simples cels.
• Édition > Cel > Copier les réglages d'interpolation copie les réglages d'une interpolation : easing, mouvement, trajectoire et minutage, mais pas où elle se termine. Édition > Cel > Coller les réglages d'interpolation les applique à chaque image clé sélectionnée. Une image clé qui commence déjà une interpolation garde sa fin ; sinon l'interpolation va jusqu'à l'image suivante de ce calque qui a un cel dessiné. Les images clés sans rien après elles sont ignorées.

Pelure d'oignon

La pelure d'oignon affiche des copies estompées des images avant et après l'image courante, pour que tu voies le mouvement pendant que tu dessines. Active-la avec Affichage > Afficher la pelure d'oignon ou le bouton de pelure d'oignon dans la barre d' options de l'outil. Elle est réglée par vue de l'éditeur.

Réglages > Pelure d'oignon... choisit combien d'images afficher avant et après (jusqu'à 16 de chaque), leur opacité et son atténuation par image, si les images précédentes sont teintées en rouge et les suivantes en bleu, si on n'affiche que les images de l'étiquette courante, et si les copies se dessinent derrière ou devant le sprite. Derrière, elles se dessinent par-dessus le calque Background et sous les autres calques, si bien qu'elles sont visibles sur un sprite avec un Background. La teinte recolore chaque copie selon sa luminosité, donc les contours sombres apparaissent aussi en rouge foncé ou en bleu foncé. Ces réglages s'appliquent à tous les sprites.

La pelure d'oignon suit la lecture, comme dans Aseprite. Elle ne boucle pas au-delà de la première ou de la dernière image. Avec Étiquette actuelle seulement, elle utilise la plus petite étiquette autour de l'image courante, dans le sens de cette étiquette : dans une étiquette inversée, l'image « avant » est la suivante sur la chronologie. Avec Boucler sur les images de l'étiquette elle boucle à l'intérieur de l'étiquette, et une étiquette ping-pong rebondit à ses extrémités.