Qu'est-ce qu'un sprite ?

C'est quoi ?

Un sprite est un unique widget PicoPixel qui contient plusieurs animations différentes et vous permet de passer de l'une à l'autre à tout moment. Chaque animation est appelée un mode ou état, par exemple "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 c'est vous qui décidez laquelle est lue.

Grâce au puissant éditeur d'événements de PicoPixel, vous pouvez déclencher différents états pour donner une étincelle de vie à votre 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 ?

Toutes les images n'ont pas besoin d'être des sprites. Voici un moyen rapide de décider :

• 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 d'idle à running ? 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 une séquence d'images, l'ensemble des images qui composent ce mode. Chaque image est simplement une photo, et les lire dans l'ordre crée l'animation, comme un flipbook.
   • 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

Un sprite qui ne montre qu'un seul état ne fait pas grand-chose. La magie opère quand vous lui dites quand changer, et c'est à ça que sert l'éditeur d'événements.

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 ?

Une fois que vous avez construit un sprite, vous ne voudrez probablement pas le reconstruire de zéro dans chaque projet. La fonction Bibliothèque vous permet de l'enregistrer une fois et de l'insérer dans n'importe quel projet.

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 Exporter.
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 frames, 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 frames d'image 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 frames semblent mal alignées ou sautent.

• Vérifiez que chaque frame 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é. Rappellez-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.