De quoi un système de succès a-t-il besoin côté badges ?
De plus d’une image par succès. Un joueur voit un badge avant de l’obtenir (verrouillé), parfois sans savoir de quoi il s’agit (masqué), et souvent par niveaux (bronze, argent, or). Chaque plateforme veut aussi sa propre taille et son propre format. Dessiner chaque état à la main multiplie le travail par cinq. Le créateur de badges dessine chaque succès une seule fois et crée les autres états à partir de ce dessin.
Notre jeu d’exemple pour un club de course : neuf badges issus d’une seule liste, obtenus (en haut) et verrouillés (en bas). Les versions verrouillées ont été créées à partir des mêmes dessins, sans rien redessiner.
Comment créer un jeu de badges ?
Ouvrez le générateur de logo IA et choisissez Badges, puis Un jeu.
- Listez les succès, un par puce :
première course, 5 km, 10 km, semi-marathon, marathon, lève-tôt. Un jeu peut aller jusqu’à 36 badges. - Choisissez la ligne du bas. Aucun, Level 1, 2, 3… dans l’ordre de la liste, ou Même texte sur chaque badge (le nom d’un club, une année). Le nom du succès s’inscrit en haut.
- Choisissez un look. Affirmé, Ligne ou Rétro, plus jusqu’à 300 caractères de style dans vos propres mots et jusqu’à trois couleurs : « affirmé, sportif, bleu marine et orange ».
- Envoyez. Le prix d’un nouveau jeu est indiqué sur le bouton avant.
Pour un badge unique, un écusson de club ou un sceau « Depuis 2024 », choisissez Un badge et saisissez vous-même le centre, la ligne du haut et la ligne du bas.
Le texte est-il écrit comme je l’ai tapé ?
Le texte est inscrit dans le dessin, et le dessin le demande exactement tel que vous l’avez saisi. Regardez chaque badge avant de télécharger, car une lettre peut quand même ressortir fausse. Les lignes courtes se lisent le mieux : la ligne du haut accepte jusqu’à 40 caractères et celle du bas jusqu’à 30, mais deux ou trois mots épousent bien mieux la courbe qu’une phrase. Si un mot ressort mal, refaites ce badge dans une série avec une note (« ligne du haut : HÉROS DU SEMI ») : le reste du jeu ne bouge pas. Un texte qui demande le logo ou la marque d’une autre entreprise est refusé avant tout dessin, et rien n’est facturé. Les affirmations sur votre propre activité, comme « certifié » ou « satisfait ou remboursé », vous sont présentées pour que vous confirmiez qu’elles sont vraies.
Quelles versions de chaque badge est-ce que j’obtiens ?
| Version | À quoi elle ressemble | Usage courant |
|---|---|---|
| Obtenu | le badge tel que dessiné | succès débloqué |
| Bronze, Argent, Or, Platine | l’anneau et le texte recolorés dans le métal, en aplat ou avec un léger brillant | niveaux d’un même succès |
| Verrouillé | une version grise atténuée, avec un cadenas sur l’anneau | pas encore obtenu |
| Masqué | le badge gris estompé sous un grand point d’interrogation | succès secret |
Les niveaux recolorent des formes entières de l’anneau selon leur rôle (anneau extérieur, bordure, bandeau, lettres) et gardent les lettres lisibles sur le bandeau. L’image du centre garde ses couleurs, pour que le succès se reconnaisse d’un coup d’œil.
Quels fichiers pour chaque plateforme ?
| Téléchargement | Fichiers |
|---|---|
| Web et app | un SVG par badge et par version, des PNG en 64, 128, 256 et 512 px, un sprite.svg et un badges.json qui liste chaque fichier et chaque texte |
| Steam | des JPG de 256 × 256 dans achieved/ et unachieved/ (la version verrouillée), comme le demande Steamworks |
| Game Center | des PNG de 1 024 × 1 024 |
| Google Play | des PNG de 512 × 512 de moins de 1 Mo (Google grise lui-même les succès verrouillés) |
| Twitch | des badges d’abonné en 18, 36 et 72 px, chacun de moins de 25 Ko |
| Discord | des icônes de rôle de 64 × 64 de moins de 256 Ko |
| Open Badges | des PNG carrés d’au moins 600 px et de moins de 256 Ko, pour les certifications |
| Impression | des PNG à 300 DPI et des SVG en millimètres, de 2 à 10 cm de diamètre |
Chaque téléchargement est créé aux tailles et formats de sa plateforme, et ses PNG sont compressés pour respecter la limite de poids de la plateforme. Les règles des plateformes évoluent ; le tableau les reflète telles qu’elles ont été vérifiées lors de la rédaction de ce guide.
Comment les afficher dans mon app ?
Servez-vous du badges.json du téléchargement web comme table de correspondance : chaque entrée indique le succès, ses textes du haut et du bas et le fichier de chaque version. Affichez le SVG obtenu quand le joueur a le succès, et le SVG verrouillé sinon. Les SVG restent nets sur toutes les densités d’écran. Utilisez les PNG là où un moteur ou une boutique demande des images bitmap. Le texte de l’anneau se lit facilement à partir de 128 px. En dessous, un badge se reconnaît à son image et à sa couleur : gardez le centre simple et donnez à chaque badge d’un jeu un sujet différent.