Générateur universel de personnages pixel LPC — Comment assembler une spritesheet pour un jeu 2D en quelques minutes

Créer des sprites pour un RPG en pixel art est une tâche fastidieuse et chronophage. Quand vous avez besoin de dizaines de personnages différents avec des cycles de marche, des coups d'épée, des tirs à l'arc et des animations de mort, la charge de travail double instantanément. C'est encore plus difficile de s'assurer que tous les vêtements, coiffures et armures se superposent correctement sur chaque frame.

En 2012, la communauté OpenGameArt, avec Creative Commons et Mozilla, a lancé le concours Liberated Pixel Cup. L'objectif était simple : établir une norme graphique ouverte unifiée pour les jeux 2D. Ce concours a évolué vers le projet Universal LPC Spritesheet Character Generator. C'est une application web et un ensemble de sprites mutuellement compatibles avec lesquels vous pouvez assembler des héros prêts à l'emploi.

Comment fonctionne le générateur

L'outil s'exécute directement dans le navigateur. Vous sélectionnez un modèle corporel de base, ajoutez des vêtements, une armure, choisissez une coiffure et une arme. L'application superpose tout dans le bon ordre et génère une seule image spritesheet.

Cette approche présente deux avantages principaux :

• Chaque détail est pré-animé pour un ensemble standard de mouvements (marche, attaque à l'épée, course, coup de balancier, dégâts).
• Les différents éléments de style LPC correspondent en proportions et en grille de pixels.

Si vous avez besoin d'un garde en armure complète avec une hallebarde ou d'un paysan en chemise de jute, vous les assemblez à partir de pièces prêtes à l'emploi en trois clics.

Licences et nuances juridiques

Différents auteurs ont créé des assets pour le projet sous différentes licences. Une seule spritesheet peut contenir des éléments avec des licences CC0, CC-By, CC-By-SA, OGA-By et GPL qui se chevauchent.

Le principal défi des graphiques ouverts est la nécessité de créditer tous les auteurs. Si vous avez pris une barbe personnalisée d'un artiste et un bouclier d'un autre, vous devez les mentionner dans les crédits.

Les auteurs du générateur ont facilité cette tâche. Avec l'image finale, le service fournit un fichier texte ou CSV avec la liste des auteurs de toutes les couches utilisées.

Vous devez simplement joindre CREDITS.csv à votre jeu ou afficher les noms dans un menu de crédits en jeu. Si vous prévoyez une sortie sur des plateformes avec DRM (comme Steam ou l'App Store), les développeurs recommandent d'être plus prudent avec les assets sous CC-By-SA et de choisir des variantes avec CC0 ou OGA-By.

Sous le capot

Le frontend du projet est construit avec Vite et TypeScript. Un détail intéressant est le système de changement de couleur des éléments.

Auparavant, la recoloration des cheveux ou de l'armure se faisait sur le CPU par remplacement couleur par couleur pixel dans l'API Canvas. Sur les grandes spritesheets, cela provoquait des délais lors du changement de curseurs dans l'interface. Les développeurs ont réécrit ce mécanisme critique en utilisant les shaders WebGL.

Maintenant, la palette est passée au shader de fragment sous forme de texture, et la recoloration se fait sur le GPU. Le temps de génération de l'aperçu est passé de 200 millisecondes à 90. Si le navigateur ou la carte graphique ne supporte pas WebGL, l'application revient automatiquement à l'ancien rendu CPU.

Vous pouvez contrôler le mode de rendu directement depuis la console du navigateur :

// Проверить текущий режим
getPaletteRecolorConfig();

// Принудительно включить CPU для отладки
setPaletteRecolorMode("cpu");

// Вернуть WebGL
setPaletteRecolorMode("webgl");

Pour le suivi des performances, un profileur est intégré au code. En mode de développement local, il mesure les FPS, l'utilisation de la mémoire et le temps de dessin des couches sur Canvas.

Configuration locale et intégration avec les moteurs

Si vous souhaitez déployer le générateur en local ou ajouter vos propres sprites, le projet est facile à exécuter en local :

git clone https://github.com/LiberatedPixelCup/Universal-LPC-Spritesheet-Character-Generator.git
cd Universal-LPC-Spritesheet-Character-Generator
npm install
npm run dev

Après cela, l'application est disponible à http://localhost:5173.

Pour le moteur Godot, des plugins prêts à l'emploi ont été créés (pour les versions 3.5 et 4.2) qui peuvent importer des spritesheets LPC et les slicer automatiquement en pistes d'animation. La communauté assemble également un pack de plugins de démarrage pour RPG Maker MZ.

Qui trouvera ce projet utile

Universal LPC Spritesheet Generator est une bouée de sauvetage pour les développeurs indépendants et les participants aux game jams. Quand il n'y a pas de budget pour un artiste 2D, cet outil couvre vos besoins en personnages pour un prototype ou même un RPG rétro complet.

Les graphiques ici sont spécifiques, avec leur propre style reconnaissable de jeux 16 bits des années 90. Mais si ce style correspond à votre jeu, vous économiserez des centaines d'heures de travail sur les sprites.