Vue d'ensemble
Apprenez à choisir une mascotte animée dans la galerie PicoPixel, à l’intégrer à votre projet et à la faire réagir aux événements de votre appareil.
Pour comprendre le fonctionnement des mascottes, consultez Qu’est-ce qu’un sprite ?. Pour partager votre propre création, lisez Comment proposer une mascotte. Ce guide explique comment utiliser une mascotte déjà disponible dans la galerie.
Aucune expérience préalable en animation n'est nécessaire. Si vous pouvez cliquer sur « Add to project » et faire glisser un widget sur un canevas, vous pouvez donner à votre projet ESP32 ou LVGL un personnage animé et réactif.
Que sont les mascottes ?
Une mascotte est un sprite : un widget unique qui contient plusieurs animations différentes et vous permet de passer de l'une à l'autre à la demande. Chaque animation est un mode (aussi appelé état ou phase) : « Idle », « Run right », « Jumping », etc.
Les mascottes issues des collections Codex ou Petdex sont généralement livrées avec 9 modes par défaut, par exemple Idle, Run right, Run left, Waving, Jumping, Failed, Waiting, Running et Review. Chaque mode est sa propre petite boucle d'images, et c'est vous qui décidez quel mode est joué et à quel moment.
Un seul widget regroupe plusieurs comportements ; vous choisissez les conditions qui déclenchent chacun d’eux.
LVGL ne propose pas de sprite à plusieurs états en natif. PicoPixel s’appuie sur le widget Animated Image pour relier ces animations. Le guide Qu’est-ce qu’un sprite ? explique ce fonctionnement en détail.
Pourquoi utiliser une mascotte ?
Les mascottes sont conçus pour donner vie à votre projet ESP32 ou LVGL. Au lieu d'un visage statique ou d'une seule animation en boucle, le sprite réagit : il change de mode en fonction de ce qui se passe réellement sur votre appareil.
À l’origine, ces mascottes accompagnent les sessions de programmation. Imaginez un petit personnage qui attend pendant que vous réfléchissez, passe en mode « Review » lors de la lecture d’un diff et en mode « Failed » si la compilation échoue. Son animation reflète l’activité de l’application.
Dans PicoPixel, vous pouvez associer les animations aux actions et aux déclencheurs de votre projet. Par exemple :
- Passez en mode Jumping lorsqu'une lecture de température dépasse un seuil.
- Jouez Running pendant la récupération de données depuis une API, puis revenez à Idle quand la réponse arrive.
- Déclenchez Waving quand un capteur détecte un mouvement, ou Failed quand une requête expire.
Si votre projet a des états qui méritent d'être montrés, une mascotte est un moyen rapide et expressif de les afficher, sans aucun code d'animation de votre part.
Choisir une mascotte dans le répertoire
Pour commencer, créez un compte PicoPixel, puis rendez-vous dans le répertoire des mascottes sur picopixel.io/pets.
Parcourez la galerie, trouvez un personnage qui vous plaît et ouvrez sa page de détail.
Sur la page de détail de la mascotte, cliquez sur Add to project. PicoPixel importe la mascotte et le dépose directement dans votre tableau de bord : aucune configuration, aucune gestion de fichiers.
Ce que vous venez d'obtenir
L'ajout d'une mascotte crée un projet distinct contenant un widget Sprite préchargé avec tous les modes que cette mascotte propose. Ouvrez-le et vous verrez le sprite sur le canevas, avec tous ses modes listés dans le panneau de droite — Idle, Run right, Run left, Waving, Jumping et les autres — chacun avec son propre nombre d'images et sa durée.
Si vous découvrez le widget Sprite, le guide Qu’est-ce qu’un sprite ? explique les modes, les images et les durées.
Passez à l'onglet Assets et vous trouverez le même sprite enregistré en tant que composant réutilisable dans la bibliothèque locale du projet. C'est la clé pour déplacer la mascotte dans vos projets.
Trois façons d'utiliser votre mascotte
Le projet de la mascotte sert de point de départ. Voici trois façons de l’intégrer à votre propre interface.
1. Copier-coller le calque
L'option la plus rapide : sélectionnez le calque du sprite dans le projet de la mascotte, copiez-le, ouvrez un autre projet et collez-le. Le sprite arrive avec tous ses modes intacts. Parfait pour un usage ponctuel — si vous n'avez besoin de cette mascotte qu'à un seul endroit, c'est terminé.
2. Transformer la mascotte en bibliothèque (recommandé pour la réutilisation)
Si vous comptez utiliser la mascotte dans plusieurs espaces de travail, transformez son projet en bibliothèque. Publier un fichier rend ses ressources — y compris ce sprite — disponibles à l'import dans n'importe quel espace de travail de votre équipe.
Pour publier :
- Dans le projet de la mascotte, ouvrez l'onglet Assets et choisissez Add library.
- Cliquez sur Publish.
Ensuite, pour l'utiliser depuis un autre projet :
- Ouvrez votre espace de travail nouveau ou existant.
- Choisissez Add library.
- Liez la bibliothèque de la mascotte depuis la liste des SHARED LIBRARIES, comme indiqué ci-dessous.
Une fois la bibliothèque liée, le sprite apparaît dans les Assets de cet espace de travail. Glissez-déposez-le sur le canevas et il se charge entièrement préconfiguré, avec tous les modes de cette mascotte prêts à l'emploi.
Les bibliothèques concernent la réutilisation au sein de votre équipe, pas la publication au monde entier. Pour savoir exactement ce que contient une bibliothèque, comment fonctionne la publication et où apparaissent les bibliothèques liées, consultez le Guide des bibliothèques et composants réutilisables.
3. Modifier les propriétés du projet pour correspondre à votre matériel
Vous pouvez aussi simplement modifier les propriétés du projet de la mascotte (taille d'écran, carte cible) pour correspondre à votre appareil et construire directement dedans. Cela fonctionne, mais ce n'est pas l'approche recommandée : vous perdez la séparation nette entre la mascotte et votre vrai projet, et le projet de la mascotte est configuré comme une vitrine, pas comme un modèle. Privilégiez d'abord les options 1 ou 2.
Faire réagir la mascotte aux événements
L’éditeur d’événements permet à la mascotte de quitter le mode Idle et de réagir à ce qui se passe dans votre interface.
Le principe est simple : quand quelque chose se produit, basculez vers un mode. Vous choisissez le déclencheur — une pression de bouton, un changement de valeur, un minuteur — et sélectionnez l'action Set Sprite Mode, puis le mode à jouer.
Dans la capture d'écran ci-dessous, nous avons ajouté un événement sur un bouton JUMP! : lorsqu'il est cliqué, l'action passe le mode du sprite en Jumping, de sorte que la mascotte saute au moment où le bouton est pressé.
Vous pouvez utiliser d’autres déclencheurs disponibles dans votre projet : mesure d’un capteur, fin d’un appel API ou expiration d’un minuteur. Le principe reste le même. Consultez Utiliser l’éditeur d’événements pour découvrir les sources, les déclencheurs et les actions.
Quelques points à garder à l'esprit
Quelques bonnes pratiques permettront à votre mascotte d'avoir un bon rendu et de bien fonctionner sur du vrai matériel.
- Supprimez les modes inutilisés. Chaque mode ajoute des images à stocker. Ne conservez que les animations que vous comptez déclencher, surtout si votre carte dispose de peu de mémoire.
- Configurez les événements. Définissez une condition pour chaque mode que vous voulez déclencher, comme pour le bouton JUMP! de l’exemple.
- Prévoyez suffisamment de mémoire. Les images animées ont besoin de RAM. Le
README.mdde l’export LVGL décrit les réglages nécessaires ; consultez-le ou confiez-le à votre assistant de programmation. Si le sprite ne s’affiche pas après le flashage, vérifiez d’abord l’allocation mémoire.
Les sprites peuvent être lourds. Sur un petit microcontrôleur, une mascotte avec les 9 modes et de grandes images peut épuiser la mémoire et simplement ne pas s'afficher. Réduisez-le aux modes que vous utilisez réellement et confirmez que votre configuration LVGL alloue suffisamment de RAM pour les images animées.
Prochaines étapes
- Qu'est-ce qu'un sprite ? : le concept derrière les mascottes — modes, images et durées.
- Utiliser l'éditeur d'événements : chaque déclencheur et action pour faire réagir une mascotte.
- Guide des bibliothèques et composants réutilisables : publiez une mascotte une fois et réutilisez-le partout.
- Comment soumettre une mascotte : créez et partagez votre propre mascotte avec la communauté.
- Galerie de mascottes : parcourez les mascottes de la communauté et choisissez-en une autre.
