Conventions de nommage des ressources UI pour mini-jeux : PNG transparents, boutons, icônes, sprites

Votre dossier de projet contient-il des fichiers comme btn_ok.png, button_confirm.png, 按钮_确定.png ? Trois styles de nommage, trois interprétations, le début de trois catastrophes de collaboration.

Je suis tombé dans ce piège. À la fin de mon premier mini-jeu, le dossier art comptait plus de 200 assets : la moitié en abréviations anglaises, l’autre en traduction chinoise directe, et certains s’appelaient tout simplement 新建文件夹 (2).png. Trouver un fichier, c’était chercher une aiguille dans une botte de foin ; chaque retouche UI demandait une demi-journée pour confirmer quel état correspondait à quoi.

Cet article répond à une question : comment une formule de nommage rend vos ressources UI immédiatement lisibles. Préfixe, catégorie, fonction, état — quatre éléments suffisent.

Chapitre 1 : le vrai coût du chaos — pourquoi la convention compte

Une histoire vraie d’abord.

L’an dernier, avec deux amis, nous avons fait un petit jeu casual : moi le code, Lao Wang l’art, Xiao Li le game design. Au deuxième mois, Lao Wang a envoyé une série de boutons — 12 fichiers nommés de 按钮1.png à 按钮12.png. Je lui ai demandé lequel était confirmer, lequel annuler. Il a répondu : « Regarde les images, tu verras. »

J’ai fixé l’écran : 12 images, rectangles arrondis à peu près identiques, couleurs légèrement différentes. Quinze minutes pour tout remettre en ordre. Après la mise en ligne, Lao Wang a refait une palette — 12 nouvelles images, 新按钮1.png à 新按钮12.png. Les anciennes n’ont pas été supprimées : 24 « boutons » dans le dossier.

L’équipe WeChat Games de Tencent a mesuré qu’un nommage cohérent économise 80 % du temps de recherche de fichiers. Ce n’est pas marginal. Dix recherches par jour à 3 minutes, c’est 30 minutes. Après normalisation, 6 minutes. Sur un mois, 12 heures gagnées — de quoi prototyper une nouvelle fonctionnalité.

Le pire arrive avec les scripts d’automatisation. J’avais un outil pour remplacer les boutons par lot : tous les PNG commençant par btn_. Le script n’a rien trouvé — chez Lao Wang, pas de btn_, que du chinois. Script abandonné, deux heures de travail manuel.

Dans le code, c’est encore plus visible :

// Nommage conforme
this.confirmButton.spriteFrame = assets.get('btn_ok_pressed');

// Sans convention
this.confirmButton.spriteFrame = assets.get('button2');

La première ligne : bouton de confirmation, état pressé. La seconde ? button2 — il faut ouvrir le dossier art, trouver button2.png, regarder l’image. À chaque retouche UI, la lisibilité du code s’effondre.

Chapitre 2 : la formule générale — une règle pour tous les cas

Ne vous laissez pas intimider par le mot « convention ». La formule est simple :

préfixe_fonction_état.png

Ou, plus complet :

module_catégorie_fonction_état@densité.png

Quatre éléments, de gauche à droite, du général au détail. Exemple : [email protected]. Module mail, catégorie icône, fonction recherche, état pressé, image @2x. Chaque segment a un sens.

Table des préfixes courants

Quinze abréviations les plus fréquentes, d’après le tutoriel Cocos Creator Tencent Cloud et des guides UI :

Abrév.	Nom complet	Usage
bg	background	Fond d’écran, fond de popup
nav	navbar	Barre de navigation
tab	tabbar	Icônes d’onglets
btn	button	Boutons divers
icon	icon	Icônes fonctionnelles ou d’état
img	image	Images génériques
txt	text	Images de texte (titres, etc.)
pop	popup	Éléments de popup
bar	bar	Barres de progression, jauges
mask	mask	Calques masque
sep	separator	Séparateurs
del	delete	Boutons/icônes supprimer
add	add	Boutons/icônes ajouter
msg	message	Bulles, messages
logo	logo	Images logo

Traits communs : court, mémorable, sens immédiat. Préférez btn à button, bg à background. Plus c’est long, plus on se trompe en tapant.

Ressource de module vs ressource commune

Posez-vous la question : cet asset sert-il un seul module ou tout le projet ?

Ressource commune : pas de préfixe module, catégorie en tête. Fond d’accueil : bg_home.png, pas home_bg.png. Les fonds se retrouvent ailleurs ; classer par catégorie facilite la recherche.

Ressource de module : préfixe module pour traitement par lot. Icône recherche du module mail : mail_icon_search.png. Nouveau skin mail : filtrez mail_, remplacez tout d’un coup.

Nommage selon la taille

Parfois le même bouton existe en grande et petite version :

btn_ok_big_n.png      # Grand bouton OK (normal)
btn_ok_small_n.png    # Petit bouton OK (normal)

Ou avec des dimensions explicites :

btn_ok_128_n.png      # Bouton OK, 128 px de large
btn_ok_64_n.png       # Bouton OK, 64 px de large

Les deux approches sont valides ; uniformisez dans le projet. Ne mélangez pas big/small, chiffres et l/s — le chaos vient surtout de l’incohérence, pas de la règle elle-même.

Chapitre 3 : boutons et icônes — des états lisibles d’un coup d’œil

Les boutons sont les assets UI les plus nombreux et aux états les plus variés : normal, pressé, sélectionné, désactivé. Les guides UI recommandent mots anglais ou abréviations uniformes :

État	Nom complet	Abrév.	Exemple
Normal	normal	n / def	btn_ok_n.png
Survol	hover	h	btn_ok_h.png
Pressé	pressed	p / pre	btn_ok_p.png
Sélectionné	selected	s / sel	btn_ok_s.png
Désactivé	disabled	d / dis	btn_ok_d.png

Je préfère une lettre : court. btn_ok_n.png vs btn_ok_normal.png — cinq caractères de moins, plus rapide à taper. Si l’équipe préfère le mot entier, restez cohérents. Pas de mélange btn_ok_normal et btn_ok_n.

Boutons en pratique

Bouton « confirmer », bleu, coins arrondis, quatre états :

btn_ok_n.png          # Normal
btn_ok_p.png          # Pressé
btn_ok_s.png          # Sélectionné
btn_ok_d.png          # Désactivé

Versions rouge et verte :

btn_blue_ok_n.png     # Bleu, normal
btn_red_ok_n.png      # Rouge, normal
btn_green_ok_n.png    # Vert, normal

Ordre : catégorie (btn) + couleur (blue) + fonction (ok) + état (n). Au tri alphabétique, les boutons de même couleur se regroupent — remplacement par lot facilité.

Icônes : la fonction d’abord

La plupart des icônes n’ont que deux états : normal et désactivé.

icon_search_n.png     # Recherche, normal
icon_search_d.png     # Recherche, désactivé

Décrivez la fonction précisément. Pas icon1.png, mais icon_search.png ou icon_delete.png. Le nom seul doit suffire.

Erreur fréquente

Nom vu en production : button_确认_正常.png. Préfixe anglais, fonction et état en chinois. Problèmes :

1. Tri instable : règles de tri des caractères chinois imprévisibles
2. Scripts : regex et traitement par lot plus difficiles
3. Équipe / i18n : renommage massif si le projet s’internationalise

Le plus sûr : anglais, minuscules, underscores. btn_ok_n.png — concis, triable, scriptable, prêt pour l’i18n.

Chapitre 4 : sprites de personnage — fini le chaos des séquences

Un personnage principal peut avoir huit actions (idle, marche, course, attaque, hit, mort, saut…), plusieurs directions, des dizaines de frames par séquence.

Mon plus gros piège : numéros sur un seul chiffre.

hero_run_left_1.png
hero_run_left_2.png
hero_run_left_3.png
...
hero_run_left_10.png

Dans l’explorateur, hero_run_left_10.png se place entre 1 et 2 — tri lexicographique, le 1 de 10 vient avant le 2.

Catastrophe.

Depuis, numérotation sur deux chiffres obligatoire :

hero_run_left_00.png
hero_run_left_01.png
hero_run_left_02.png
...
hero_run_left_09.png
hero_run_left_10.png

00–09 restent avant 10. Plus de 100 frames : trois chiffres (000–999).

Formule personnage

nom_personnage_action_direction_frame.png

Exemples :

• hero_idle_down_00.png — héros, idle, bas, frame 0
• player_run_left_01.png — joueur, course, gauche, frame 1
• enemy_attack_right_02.png — ennemi, attaque, droite, frame 2

Vocabulaire d’actions

Action	Anglais	Abrév. (optionnel)
Idle	idle	—
Marche	walk	—
Course	run	—
Attaque	attack	atk
Touché	hurt	—
Mort	death	die
Saut	jump	—
Sort	cast	—

Abréviations ou mots entiers selon l’équipe. atk est court ; les nouveaux peuvent ne pas le deviner. Moins de 20 frames par action : mots entiers ; au-delà, abréviations pour éviter des chemins tronqués.

Directions

Quatre directions simples : up, down, left, right.

Huit directions : numéros 0–7 (0 = haut, sens horaire) — mais il faut une table de référence. Je préfère les noms :

hero_attack_up.png
hero_attack_upright.png
hero_attack_right.png
hero_attack_downright.png
hero_attack_down.png
hero_attack_downleft.png
hero_attack_left.png
hero_attack_upleft.png

Noms un peu longs, mais sans ambiguïté. Quatre directions ou gauche/droite seulement : noms explicites. Huit directions et plus : numéros parfois plus compacts.

Chapitre 5 : arborescence Cocos Creator — classer pour aller plus vite

La convention répond à « comment s’appelle le fichier ». L’arborescence répond à « où il est ». Les deux ensemble accélèrent la recherche.

Structure recommandée (tutoriel Cocos Creator Tencent Cloud) :

assets/
├── textures/           # Textures
│   ├── ui/             # UI (boutons, barres)
│   ├── icons/          # Icônes fonctionnelles
│   ├── backgrounds/    # Fonds
│   └── characters/     # Sprites personnages
├── audio/              # Audio
│   ├── effects/        # Effets
│   └── music/          # Musique
├── animations/         # Clips d'animation
├── prefabs/            # Prefabs
└── scripts/            # Scripts TypeScript

Communes vs modules : séparer

J’ai tout mis dans textures/ui/ — 300 fichiers, ouverture, défilement et recherche interminables.

Mieux :

Communes sous textures/, ex. textures/icons/ pour les icônes partagées.

Par module :

assets/
├── modules/
│   ├── login/          # Module connexion
│   │   ├── textures/
│   │   ├── prefabs/
│   │   └── scripts/
│   ├── battle/         # Module combat
│   │   ├── textures/
│   │   ├── prefabs/
│   │   └── scripts/

Retouche combat : seulement modules/battle. Connexion : seulement modules/login.

Ne pas sur-segmenter

Cinq niveaux textures/ui/buttons/blue/rounded/ pour deux ou trois fichiers — plus lent que de lire le nom du fichier.

Un niveau de catégorie suffit, sauf volume énorme (ex. plus de 50 sprites personnage). textures/ui/ pour boutons et barres, textures/icons/ pour icônes, textures/backgrounds/ pour fonds. Trois niveaux max.

Prefabs et scripts à proximité

Prefabs et scripts du login dans modules/login/prefabs/ et modules/login/textures/ côte à côte. Chemins courts, moins de sauts entre dossiers.

La doc Cocos Creator insiste : fichiers liés regroupés, moins de références cross-dossiers — chemins courts, refactor plus simple.

Chapitre 6 : 7 règles d’or — retour d’expérience Tencent Games

L’équipe WeChat Games de Tencent a formalisé sept principes ; voici mon interprétation terrain.

1. Concision : assez de détail, pas de verbosité

Le nom doit informer sans devenir une phrase.

Bon : btn_ok_n.png — bouton, OK, normal.

Mauvais : button_confirm_normal_state_blue_rounded_large.png — illisible à l’écran et au clavier.

Ma règle : 3 à 5 segments. Au-delà, retirez le secondaire (ex. « rounded » en commentaire code).

2. Imbrication logique : du général au particulier

Ordre cognitif : grande catégorie, fonction, détail.

environment_forest_tree_01.png

Environnement → forêt → arbre → variante 1. Même préfixe environment_forest : tous les assets forêt ensemble.

3. Tri alphabétique utile

Le préfixe fixe l’ordre dans l’explorateur.

Sprites héros : hero_ regroupe sous « h », mieux que character_hero_ perdu sous « c ».

4. Format uniforme : snake_case ou camelCase

Choisissez une convention pour tout le projet.

Je reste sur snake_case :

• Compatibilité fichiers (casse)
• Lisibilité (limites de mots)
• Regex simples (_ comme séparateur)

camelCase si l’équipe l’impose — mais pas les deux.

5. Numérotation uniforme : 01/02 ou 001/002

Un seul chiffre fausse le tri (chapitre 4).

• ≤ 99 frames : deux chiffres (00–99)
• > 99 : trois chiffres (000–999)

6. Grammaire cohérente : une forme verbale

spin vs spinning, attack vs attacking — une seule forme.

Erreur :

cha_sonic_spin_01.png
cha_sonic_spinning_02.png

Même action, noms différents — un script en oublie un.

Correct :

cha_sonic_spin_01.png
cha_sonic_spin_02.png

7. Orthographe cohérente

Britannique vs américain : ambience / ambiance, colour / color.

Standard unique (souvent américain) sur tout le projet. Pas bg_ambience.png et bg_ambiance.png mélangés.

Chapitre 7 : PNG transparents et cas particuliers

Certains assets UI demandent des suffixes ou dossiers dédiés.

PNG transparents

Boutons, icônes, overlays — suffixe _trans ou _overlay :

btn_trans_round.png        # Bouton rond transparent
icon_overlay_star.png      # Étoile overlay (badge)

La transparence ne se devine pas au nom seul ; le suffixe évite d’ouvrir le fichier.

Masques

mask_rounded.png           # Coins arrondis
mask_circle.png            # Cercle
mask_gradient.png          # Dégradé

Peu de fichiers : textures/ui/masks/ ou directement textures/ui/.

Multilingue

title_zh.png               # Titre chinois
title_en.png               # Titre anglais
title_ja.png               # Titre japonais

Codes ISO :

btn_start_zh-CN.png
btn_start_zh-TW.png
btn_start_en-US.png
btn_start_ja-JP.png

ISO plus précis, noms plus longs. ≤ 5 langues : zh / en / ja suffisent.

Densités d’écran

Cocos Creator recommande @1x, @2x, @3x :

[email protected]
[email protected]
[email protected]

Aligné iOS/Android ; TexturePacker reconnaît ces suffixes.

Note : densité après l’état. [email protected] lit « bouton OK normal », puis « @2x » — pas btn_ok@2x_n.png.

Caractères spéciaux

À éviter : espaces, parenthèses, chinois.

Espace → underscore. btn ok.png → btn_ok.png.

Parenthèses → chiffres. btn_ok(1).png → btn_ok_01.png.

Chinois → anglais. 按钮_确定.png → btn_ok.png.

Windows tolère parfois le chinois ; Linux, FTP, CI/CD peuvent échouer. Anglais, minuscules, ASCII : le plus sûr.

Conclusion

Quatre éléments : préfixe, fonction, état, détail.

btn_ok_n.png — bouton + OK + normal. hero_run_left_00.png — personnage + action + direction + frame. La formule couvre 90 % des cas UI.

Les 10 % restants : deux chiffres pour le tri, anglais pour la plateforme, abréviations uniformes pour les scripts. Détails qui font la différence au quotidien.

Trois actions pour commencer :

1. Auditer le projet : repérer les noms incohérents, appliquer la formule
2. Glossaire d’abréviations : bg/btn/icon/nav — écrit et visible pour toute l’équipe
3. Arborescence : communes vs modules, pas tout dans un seul dossier

La convention n’est pas un one-shot, c’est une habitude. btn_ok_n.png, deux chiffres, anglais partout — vos fichiers deviennent lisibles, la recherche accélère.