Texture Maker
Description
Texture Maker est un éditeur pixel art en ligne conçu pour simplifier la création de textures Minecraft pour mes Mods et Modpacks. Il m'a paru naturel de le rendre accessible à tous, c'est à la fois une manière de partager mon travail et une opportunité de recueillir des retours utilisateurs afin d'améliorer continuellement cet outil.
L'application propose quatre outils de dessin : le stylo pour dessiner pixel par pixel, la gomme pour effacer, le pot de peinture pour remplir une zone d'une même couleur, et la pipette pour prélever une couleur existante. Chaque outil est accessible via un raccourci clavier (P, E, F, I) pour une utilisation rapide et fluide.
La gestion des couleurs se fait via un sélecteur classique complété par trois curseurs fins de teinte, saturation et luminosité (HSL). L'utilisateur peut charger un template Minecraft existant (pierre, coffre, etc.) comme base de travail, ou partir d'une grille vierge. Un système d' annulation et rétablissement (Ctrl+Z / Ctrl+Y) permet de revenir en arrière à tout moment.
Une fois la texture terminée, elle s'
exporte en PNG (Ctrl+S). Un script Python
permet de générer automatiquement le fichier
manifest.json à partir des templates PNG présents
dans le dossier dédié, convertissant les noms en snake_case vers
des noms d'affichage lisibles.
Le projet a été développé en HTML/CSS/JS vanilla et Python. Il est publié sur GitHub sous licence MIT et reste ouvert aux contributions et suggestions via les Issues.
Défis & Solutions
Défi
Le premier enjeu de ce projet a été de concevoir une expérience utilisateur réellement agréable pour un outil créatif. Un logiciel de dessin qui complique la tâche de ses utilisateurs a peu de chances d'être adopté. Il fallait donc trouver le bon équilibre entre simplicité d'utilisation et puissance fonctionnelle, tout en respectant les contraintes techniques du canvas HTML5 pour offrir un dessin fluide en temps réel.
Solution trouvée
Pour l'UI/UX, chaque bouton et chaque interaction ont fait l'objet d'une réflexion approfondie grâce à des tests utilisateurs itératifs, en m'appuyant sur les ressources de Figma et Lucid Software pour affiner mes choix de conception.
Techniquement, le canvas a été optimisé pour un rendu performant : mise à jour uniquement des pixels modifiés, gestion d'état pour l'historique (annuler/rétablir), et implémentation des algorithmes de remplissage (pot de peinture) et de prélèvement de couleur (pipette) en JavaScript natif. Les raccourcis clavier (Ctrl+Z, Ctrl+Y, Ctrl+S, H) viennent compléter l'expérience pour les utilisateurs avancés.
Compétences acquises
- Développement d'un éditeur pixel art avec canvas HTML5
- Implémentation d'outils graphiques (pinceau, gomme, pot de peinture, pipette)
- Gestion de l'historique (annuler/rétablir)
- Manipulation des couleurs (modèle HSL, sélecteur)
- Design UI/UX d'une application créative
- Automatisation avec scripting Python
- Travail en autonomie sur un projet complet
Aperçu
