Qu'est-ce qu'un sprite ?

C'est quoi ?

Un sprite est un widget PicoPixel qui regroupe plusieurs animations. Vous pouvez passer de l’une à l’autre à tout moment. Chaque animation correspond à un mode, aussi appelé état, comme "Idle", "Running" ou "Happy".

Imaginez un personnage de jeu vidéo. Le personnage est un seul élément à l'écran, mais il peut marcher, sauter ou faire signe selon ce qui se passe. Un sprite fonctionne de la même façon : un widget, de nombreuses apparences, et vous choisissez l’animation à lire.

L’éditeur d’événements permet de changer de mode en fonction des interactions et de donner vie au sprite.

Exemple : supposons que vous ayez un personnage animé, ou que vous souhaitiez créer votre propre visage stack-chan pour votre ESP32 ou une autre application LVGL. Vous pouvez utiliser un seul sprite et déclencher conditionnellement différents modes comme "Running", "Thinking", "Failed" et bien d'autres, sans avoir à jongler avec une multitude de widgets séparés.

Quand dois-je utiliser un sprite ?

Choisissez le widget en fonction du comportement souhaité :

• Une image fixe et statique ? Utilisez une Image normale. Les sprites sont trop complexes pour quelque chose qui ne bouge jamais.
• Une animation qui tourne simplement en boucle indéfiniment (comme un indicateur de chargement) ? Utilisez une Animated Image. C'est plus simple et plus léger.
• Quelque chose qui doit changer en fonction de ce qui se passe, un visage qui sourit quand une tâche réussit, ou un personnage qui passe du repos à la course ? C'est exactement pour cela qu'un sprite existe.

La règle générale : si votre graphique a plus d'une "humeur" ou d'un "comportement" et que vous souhaitez passer de l'un à l'autre, utilisez un sprite.

Comment créer un sprite ?

1. Sélectionnez le widget "Sprite". Dans la barre latérale droite, vous pouvez ajouter votre premier mode pour ce sprite. Par exemple, le premier état pourrait être "Idle". Donnez à chaque état un nom clair pour le reconnaître plus tard lorsque vous configurerez les déclencheurs.
2. Importez les images de ce mode dans l’ordre. Leur affichage successif crée le mouvement, comme les pages d’un folioscope.
   • Vous pouvez ajuster la durée pour cet état spécifique. Une durée plus longue joue l'animation plus lentement ; une plus courte l'accélère.
3. Ajoutez un autre état. Un minimum de 2 modes est requis. (Si vous n'avez besoin que d'une seule animation, il vaut mieux utiliser le widget Animated Image, voir Quand dois-je utiliser un sprite ? ci-dessus.)
4. Utilisez l'onglet/éditeur Events pour déclencher et basculer conditionnellement entre vos différents états. C'est ce qui donne vie au sprite ; plus de détails dans la section suivante.

Donner vie à votre sprite

Pour rendre le sprite réactif, utilisez l’éditeur d’événements et définissez quand il doit changer d’état.

L'idée est simple : quand quelque chose se produit, passer à un état. Vous choisissez le "quelque chose" (une pression de bouton, un changement de valeur, une minuterie, etc.) et PicoPixel s'occupe du reste.

Un exemple typique :

1. Votre sprite démarre dans l'état "Idle" par défaut.
2. Dans l'éditeur d'événements, vous ajoutez un événement : quand un bouton est pressé, faire passer le sprite à l'état "Running".
3. Ajoutez un autre événement : quand la tâche se termine, passer à "Happy" (ou revenir à "Idle").

C'est tout ; votre sprite réagit maintenant à ce que fait l'utilisateur, sans aucun code de votre part. Vous pouvez enchaîner autant de ces événements que vous le souhaitez pour construire des widgets véritablement expressifs.

Comment réutiliser un sprite ?

Enregistrez votre sprite dans une bibliothèque pour le réutiliser dans d’autres projets sans le recréer.

1. Faites un clic droit sur votre widget sprite terminé et cliquez sur "Add Library Widget".
   • Cela crée une entrée réutilisable dans votre bibliothèque dans l'onglet Assets. Considérez-la comme votre étagère personnelle de widgets prêts à l'emploi.
2. Pour déplacer cette bibliothèque entre des projets ou la partager avec un collègue, accédez à Library et cliquez sur Export.
3. Désormais, lorsque vous créez un nouveau projet ou ouvrez un espace de travail existant, vous pouvez importer cette bibliothèque et insérer le sprite directement : aucune reconstruction nécessaire.
   • Toutes les images, durées et états se synchronisent parfaitement depuis la copie originale que vous avez créée, de sorte qu'il se comporte exactement pareil partout où vous l'utilisez.

Problèmes courants

Le sprite n'apparaît pas lorsqu'il est flashé sur l'appareil.

• C'est presque toujours un problème de mémoire : votre appareil a besoin de suffisamment de RAM pour contenir les images du sprite.
• Cela est configuré dans votre configuration LVGL et PicoPixel ne peut pas le modifier pour vous ; cela dépend de votre carte spécifique.
• Le fichier README.md exporté le mentionne, de sorte que votre assistant IA peut vous aider à mettre à jour la configuration SDK/LVGL pour votre appareil embarqué.

Les images semblent mal alignées ou sautent.

• Vérifiez que chaque image dans chaque état a exactement les mêmes dimensions. Même quelques pixels de différence perturberont l'alignement.

L'animation se joue trop vite ou trop lentement.

• Ajustez la durée de l'état concerné. Rappelez-vous que chaque état a sa propre durée, vous devrez peut-être les régler individuellement.

Le sprite ne me laisse pas le sauvegarder / demande un autre état.

• Un sprite nécessite au moins 2 états. Si vous n'en avez qu'un, ajoutez un deuxième état ou passez au widget Animated Image à la place.