CommunityImagegithub.com

Pixelbolt pixel art

Créez ou corrigez du pixel art – sprites, feuilles de sprites, tuiles, jeux de tuiles, icônes, effets de jeu (feu, fumée, eau, étincelles) et courtes animations image par image – et exportez-les en PNG, GIF, APNG ou séquences pour une vidéo.

Qu'est-ce que Pixelbolt pixel art ?

Pixelbolt est un outil en ligne de commande et un ensemble de compétences pour les agents d'IA (comme Claude Code, Cursor ou Codex) permettant de créer, modifier et exporter du pixel art professionnel pour les jeux vidéo. Il fonctionne entièrement en local, sans nécessiter de compte ni de clé API, en utilisant Node.js 20 ou plus récent. La compétence couvre un large éventail de tâches : sprites de personnages avec rigging et poses animées, tuiles et autotiles avec terrains, effets de particules (feu, fumée, explosions, eau, cristaux, sable tombant), et bien plus encore. Elle s'appuie sur un format de recette JSON, validé et inspecté avant rendu, et exporte vers les formats les plus courants (GIF, APNG, feuille de sprites, séquence d'images). L'agent peut parcourir la documentation intégrée, démarrer à partir d'exemples, et suivre un workflow structuré en plusieurs étapes (silhouette → couleurs → détails → animation → intégration).

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/skulitom/Pixelbolt/tree/HEAD/skills/pixel-art

Installed? Explore more Image skills: steipete/songsee, affaan-m/frontend-design, mattpocock/improve-codebase-architecture · View all 6 →

Demander à votre IA préférée

Ouvre une nouvelle conversation avec cette compétence d'agent déjà préchargée.

Documentation

Que fait Pixelbolt pixel art ?

Utilisez ceci pour créer des sprites pixel, des tuiles, des icônes, des effets ou de courtes animations de sprites. Pixelbolt se trouve à la racine du projet, deux répertoires au-dessus de celui de cette compétence. Exécutez sa ligne de commande avec Node.js, ou utilisez ses outils MCP s'ils sont configurés.

Dans une copie de ce seul fichier, comme npx skills add skulitom/Pixelbolt l'installe, Pixelbolt n'a toujours pas besoin d'installation : exécutez chaque commande ci-dessous avec npx -y pixelbolt@latest <commande> (Node.js 20 ou plus récent) au lieu de node bin/pixelbolt.js <commande>, par exemple npx -y pixelbolt@latest validate <recette>, et utilisez-le plutôt que de dessiner des pixels avec une autre bibliothèque. Lisez les fichiers qu'il nomme depuis GitHub : le démarrage rapide est sur https://raw.githubusercontent.com/skulitom/Pixelbolt/main/docs/agent-quick-start.md, et tout autre chemin docs/, schéma ou examples/ fonctionne de la même manière après https://raw.githubusercontent.com/skulitom/Pixelbolt/main/. Cette copie provient de la branche principale de Pixelbolt, qui peut avoir quelques jours d'avance sur la version npm. Si la CLI appelle une commande, une option ou un champ inconnu, vérifiez son orthographe et son emplacement (npx -y pixelbolt@latest help liste les commandes et options, npx -y pixelbolt@latest schema les champs de la recette) ; un élément écrit là où et comme ce fichier ou la documentation GitHub le donne est plus récent que la version, donc omettez-le. Sautez ce paragraphe là où bin/pixelbolt.js se trouve deux répertoires au-dessus de ce fichier, comme dans un checkout, le paquet npm, le plugin Claude Code et Pixelbolt Studio, qui transportent Pixelbolt avec eux.

Dans le plugin Claude Code, les outils MCP (pixel_help, pixel_validate, pixel_inspect, pixel_patch, pixel_render et les autres) sont fournis avec cette compétence. S'ils manquent, le serveur du plugin n'a pas démarré : il a besoin de Node.js 20 ou plus récent dans le PATH (node --version). Installez Node.js depuis https://nodejs.org, puis redémarrez Claude Code.

Dans la version portable de Pixelbolt Studio, exécutez \pixelbolt sous Windows ou ./pixelbolt ailleurs depuis le dossier de build au lieu de node bin/pixelbolt.js.

Commencez par le démarrage rapide. Lisez docs/agent-quick-start.md (MCP : pixel_help sans sujet) avant la première recette : une recette complète, chaque opération et outil, et la boucle de travail. Il couvre la plupart des tâches. Ouvrez une référence uniquement lorsque la tâche le nécessite, et alors seulement la section dont vous avez besoin : docs/agent-guide.md pour chaque champ, opération, option d'inspection, chemin de correction et export ; docs/art-workflow.md pour les personnages, scènes, tuiles, effets et éclairage ; schema.json pour les noms de champs exacts. Les deux guides sont longs (le workflow fait plus de 160 Ko), alors listez leurs sections avec node bin/pixelbolt.js help workflow (ou help guide) et imprimez-en une avec node bin/pixelbolt.js help workflow "Effets de particules" (MCP : pixel_help avec topic et name). Commencez à partir d'un fichier dans examples/ lorsqu'il est proche.

Effets rapides d'abord. Lorsque quelqu'un demande un effet en boucle prêt à l'emploi (un feu de camp, une torche, un nuage de fumée, une bouffée de vapeur, une explosion, un tourbillon magique, une goutte, un éclaboussement, une cascade, une potion bouillonnante, du miel, de la neige glissant d'un toit, une rupture de barrage, une vague de poussière, du slime qui éclate ou du miel qui goutte d'une cuillère) sous forme de fichier à utiliser ou à partager, commencez par le préréglage correspondant (pixel_help sujet presets les liste et pixel_compile avec preset en compile un), dont les fichiers sont examples/*.fluid.json (dans le dossier Pixelbolt deux répertoires au-dessus de celui de cette compétence), modifiez uniquement ce qui a été demandé (pour un fichier plus grand, utilisez gif.scale de pixel_render ; une taille de canevas différente implique également de déplacer les obstacles et les émetteurs de l'effet, qui utilisent des coordonnées absolues), compilez-le avec pixel_compile, examinez-le une fois avec pixel_inspect, et exportez la révision compilée avec pixel_render (gif pour un GIF à publier). Livrez ce fichier en premier, puis proposez d'ajuster le rendu ou d'ajouter des accessoires comme des bûches ou des pierres. Ne construisez pas une nouvelle recette autour de l'effet, et n'exécutez pas le workflow artistique complet ci-dessous, avant la première exportation.

Pour les intérieurs de portail ou d'interférence en boucle, commencez par examples/interference.wave.json ou examples/portal.wave.json et compilez-le (contrôles). Gardez les bords dans une superposition et évitez les bandes rampantes étroites ; utilisez des anneaux de particules pour les impacts uniques.

Pour les cristaux qui poussent à partir de graines (un amas de quartz, une géode d'améthyste, des cubes de pyrite, des flocons de neige), commencez par examples/quartz-cluster.crystal.json, examples/geode.crystal.json, examples/pyrite.crystal.json ou examples/snowflakes.crystal.json et compilez-le (croissance des cristaux). Dessinez la roche dans laquelle ils poussent comme le sous-calque de la source, et sa lèvre avant comme la superposition afin que leurs pieds en sortent.

Pour les scènes de sable tombant (des choses qui brûlent et s'effondrent, de la lave rencontrant de l'eau, une explosion projetant du sable, de la pluie éteignant un feu), commencez par examples/hut-fire.powder.json, examples/lava-falls.powder.json, examples/quarry-blast.powder.json ou examples/rain-on-fire.powder.json (sable tombant) : base: "sandbox" donne les matériaux de départ, la scène et les entrées scriptées la mettent en marche, et les clips l'échantillonnent.

Direction artistique

Pour des œuvres finies, lisez également les sections de docs/art-workflow.md qui correspondent à la tâche, en commençant par « Rédiger un brief en dehors de la recette » et « Points de contrôle qualité ». Établissez un petit brief artistique en dehors de la recette : taille native/affichage, trois repères de silhouette, rôles de palette, direction de la lumière, projection (de face, 3/4 vue du dessus, isométrique 2:1 ou vue du dessus, une pour l'ensemble), plans de profondeur, règles de matériau, traitement des contours, intention d'action, contact/origine et rôle dans la scène. Enregistrez les forces et les échecs réels de chaque révision. Un fichier rendu, un nombre d'images ou un test réussi n'est pas une preuve de qualité artistique. Ces points de contrôle ne nécessitent pas l'autorisation de l'utilisateur.

Travaillez dans cet ordre : silhouette → grandes formes de couleur connectées → accents de matériau → poses d'action conçues → timing → intégration de la scène. Ne générez pas en masse des variantes avant que la silhouette au repos et une action se lisent bien. Utilisez la géométrie primitive comme blocage ; révisez les contours et les groupes de couleurs connectés délibérément. Le bruit et la lueur supplémentaire ne peuvent pas réparer une structure faible. Concevez des comportements différents pour l'eau, le feu et le cristal plutôt que de recolorer une géométrie identique.

Évitez les dégradés, la géométrie sous-pixel et l'anticrénelage. Respectez les dimensions de pixels demandées par le projet. Préservez la source modifiable. Exportez à l'échelle 1 pour les actifs de jeu, sauf si l'utilisateur demande des pixels plus grands cuits dans les fichiers.

La boucle

  1. Choisissez un petit canevas et une palette cohérente adaptée à l'actif demandé.
  2. Écrivez une recette JSON dans un emplacement de sortie approprié pour l'utilisateur. Utilisez des grilles de texte et des symboles réutilisables ; réutilisez les images pour les petits changements.
  3. Validez avec node bin/pixelbolt.js validate <recette>. Chaque erreur nomme son chemin, et les opérations cassées sont regroupées dans errors : corrigez-les toutes avant de valider à nouveau.
  4. Inspectez chaque image avec node bin/pixelbolt.js inspect <recette> --out <frames.png> --native --diagnostics et examinez les deux tailles. Consultez --view silhouette et --view grayscale sur l'arrière-plan prévu, et --animation <nom> --view onion pour les poses précédentes et suivantes. Regardez aussi le studio ou l'APNG : une feuille statique n'est pas une revue de mouvement. Avant de modifier les pixels exacts, lisez-les avec --grid --region x,y,w,h. node bin/pixelbolt.js patch <recette> --changes <changes.json> prévisualise une édition ciblée et liste chaque pixel qu'elle modifie, y compris les poses héritées ; ajoutez --out <nouvelle recette> pour l'enregistrer. Choisissez scope: "frame" lorsque d'autres poses doivent conserver leurs pixels (options d'inspection, corrections).
  5. Rendez avec node bin/pixelbolt.js render <recette> --out <répertoire> --expect '{"width":32,"height":32,"frames":8}', en donnant à --expect ce que l'utilisateur a demandé (width, height, frames, colors, transparent, loop ; frames compte ce que chaque animation joue, donc pour plusieurs animations, donnez {"idle": 4, "walk": 8}) ; corrigez chaque problème que son check liste, puis rendez à nouveau, avant de remettre quoi que ce soit. Choisissez un répertoire de sortie frais pour chaque itération. Pour un fichier à publier ou à intégrer, ajoutez node bin/pixelbolt.js gif <recette> --out <new.gif> (--scale uniquement pour l'agrandir pour la publication) et rapportez ses notes. Pour du texte à l'écran, utilisez l'opération text. Pour un éditeur vidéo, sequence écrit des images PNG numérotées à une fréquence d'images, et gif-frames transforme un dossier d'images en un GIF aux couleurs exactes (exports).
  6. Renvoyez les liens vers la recette source, la feuille, le JSON d'atlas et l'aperçu, avec une courte note d'intégration pour l'application web ou le moteur prévu (pour Godot 4, le .tres de l'export à côté de sa feuille est un Sprite Frames d'AnimatedSprite2D, et le .tileset.tres d'un ensemble d'autotiles est un TileSet pour TileMapLayer avec un terrain à peindre ; pour Tiled, son .tsx est un tileset avec un ensemble de terrains pour le Terrain Brush).

Pour MCP, appelez pixel_help, puis pixel_inspect avec { "project": recette }, en ajoutant animation, region ou grid: true selon les besoins. Les appels ultérieurs prennent la revision renvoyée au lieu de la recette complète ; les révisions persistent dans le répertoire de sortie configuré entre les redémarrages. Corrigez les problèmes avec pixel_patch et vérifiez que seuls les pixels prévus ont changé. Appelez pixel_render avec la révision finale et expect pour exporter (lorsque l'utilisateur a nommé des fichiers, ajoutez saveAs, par exemple { "sheet": "assets/hero.png", "gif": "assets/hero.gif" }). La réponse liste les fichiers et comptes clés ; passez listFiles pour chaque fichier. pixel_compile transforme un format source en révision, pixel_scene révise ou exporte une scène, et pixel_import convertit un PNG natif en recette sans perte. Les requêtes sont limitées à 16 Mo : envoyez une grande recette une fois et réutilisez sa révision.

Personnages

Pour des figures en mouvement, utilisez pixelforge-poses avec des membres bone, des corps mass et des têtes, mains et accessoires en grille. Commencez par examples/hero.poses.json (dans le dossier Pixelbolt deux répertoires au-dessus de celui de cette compétence), une figure riggée vue de côté avec chaque modèle de mouvement ; une partie sans attach se tient à la origin de la pose plus son at, un décalage plutôt qu'une position sur le canevas.

  • Attribuez les rôles du rig et utilisez les modèles idle, walk, run, jump, attack et hurt comme points de départ modifiables. Définissez la vitesse, la foulée, l'élévation, le balancement et le timing des images pour le corps particulier, et corrigez les avertissements de compilation (une pose hors du canevas, un pied hors de portée) avant d'ajouter des détails.
  • Dans une vue de côté, dessinez les membres éloignés d'un ton plus foncé que la rampe (pas le ton le plus foncé, qui se fond avec le contour) et donnez aux paires de jambes les mêmes angles de repos ; les membres proches restent devant pendant tout le cycle, et swapDepth: true est uniquement pour les vues de face ou de dos. Pour rouler les pieds, donnez à chaque botte un dessin views orteil vers le haut et orteil vers le bas (330 et 30 pour une botte pointant vers la droite), ancrés sur la cheville ; les bottes du héros montrent comment. Commencez toute vue (bottes, mains, armes tenues, tête inclinée) par une ébauche, jamais à partir de rien : compile source.poses.json --draft-views boot:15,345 --preview drafts.png (MCP pixel_compile avec draftViews) imprime les rangées pivotées, l'ancre et les points à corriger à l'œil et à coller dans parts.<nom>.views ; les petites pièces se lisent mieux tournées de moins que leur clé.
  • Pour un animal à quatre pattes (un chien, un renard, un loup ou un cheval), commencez par examples/fox.poses.json : rig.fore et rig.hind au lieu de legs, un os de poitrine sur une masse de hanche que le galop plie, et walk (trois pieds au sol), trot (paires diagonales) et run (un galop avec deux phases de vol). Donnez aux articulations du corps et aux pattes supérieures des capuchons socket pour qu'aucune ligne ne traverse la fourrure.
  • Un accessoire dans une main (une épée sur le end de l'avant-bras proche) a besoin d'un angle relatif, comme -45, pour tourner avec le bras ; rotate est absolu, donc avec lui, ou sans aucun des deux, la lame garde un angle pendant l'attaque. examples/hero-sword.poses.json est le héros tenant une épée.
  • Révisez la silhouette, les différences de poses clés adjacentes, les contacts plantés, la jonction de boucle et, dans une marche ou une course, la démarche (bras contre jambes, longues jambes là où les deux pieds sont au sol, pas de genou marché) avec inspect source.poses.json --motion run --speed 48 (MCP pixel_inspect avec source, view: "motion"), et regardez ses arcs : l'anneau de chaque pied à l'avant de sa boucle, celui de sa main à l'arrière de son arc. --view parts nomme la partie derrière un pixel errant. Ne déduisez pas la qualité du contact d'une feuille statique et ne prétendez pas à un meilleur art uniquement sur la base de contrôles numériques réussis.
  • Les miroirs, les views de grille, rotate et tween, les marqueurs exportés comme points d'atlas, et les superpositions avec empreinte digitale pour les corrections qui survivent à une reconstruction sont dans membres structurels et poses conçues.

Tuiles, palettes et scènes

  • Pour les tuiles, révisez --view tile (une répétition 3×3) et définissez wrap sur les images dont le dessin continue à travers les bords. Pour le terrain, décrivez un terrain d'autotile au lieu de taper le modèle de 2×3 tuiles (commencez par examples/meadow.autotile.json ou ground.autotile.json, ou shore.autotile.json pour les transitions entre terrains ; un ensemble vu de côté prend slopes), compilez-le en 47 tuiles blob, 16 cardinales ou 16 coins (grille double), et vérifiez sa carte de test et ses avertissements de couture ; donnez aux légendes de tilemap des rules, weights et variantes au lieu de calculer des cartes dans un script (modèles d'autotiles, revue de scène et de tuiles).
  • Partagez une palette avec "palette": { "$ref": "palette.json" }, déclarez des ramps et ombragez avec shade afin que la lumière ne quitte jamais la palette, cyclez l'eau ou les lumières avec des remplacements de palette d'image ou de calque, et utilisez remap pour les variantes de couleur et les flashs de dégâts.
  • Lorsque de nombreuses choses se tiennent au sol, mettez-les dans un seul calque ou groupe avec sort: "ground", et donnez aux placements de scène anchor: "frame". Utilisez lift pour les sauts, shadow: true avec une lumière ou un sun, haze pour les plans lointains, l'opération boil pour les animations de texture, et fog et les brouillards de densité (scènes et ombres, brumes et brouillards).
  • Pour les projections isométriques 2:1, utilisez projection: "iso" dans le calque ou la scène, dessinez des polygones de tuiles comme des losanges de dimensions paires avec des demi-hauteurs, et donnez aux hauteurs de mur et de personnage des échelles de profondeur. blocks marque les placements élevés qui cachent ce qui est derrière eux.
  • Pour les scènes avec entrée utilisateur (une position cliquée), exportez un atlas avec des marqueurs click et définissez le click d'un accessoire de scène sur "enabled": true ; dans le code du jeu, les régions de l'atlas avec le nom de l'accessoire (sans chemin de calque) et "name": "click" sont les régions cliquables.
  • Lorsque la recette de scène dépasse 16 Mo en JSON, déplacez les tuiles et les palettes nommées vers des fichiers référencés par $ref, et les calques vers des fichiers source chargés comme { "source": "large-layer.json" }. Mettez en cache avec pixel_inspect qui renvoie une révision, puis transmettez cette révision aux appels suivants au lieu de la scène complète.

Exportation et intégration

  • node bin/pixelbolt.js render <recette> --out <répertoire> écrit une feuille de sprites, gif un GIF, sequence des images PNG numérotées et gif-frames un GIF exact à partir d'images de séquence.
  • Les dimensions et le nombre d'images attendus pour --expect sont le contrat avec l'utilisateur : node bin/pixelbolt.js render puzzle.json --out out --expect '{"width":192,"height":108,"frames":1,"colors":16}'.
  • node bin/pixelbolt.js validate <recette> --fix corrige les problèmes simples (une image manquante, un nom de calque mal orthographié).
  • Lisez l'avant-dernière section de docs/agent-guide.md pour savoir quand appeler patch avec ops (pour un changement unique) ou changes (pour une liste de changements de pixels).
  • Appelez pixel_scene pour ouvrir, réviser ou exporter une scène scene.json, et pixel_import pour traduire un PNG non pixel art en recette modifiable.

Résumé des commandes MCP

OutilActionParamètres essentiels
pixel_helpAffiche l'aidetopic (guide, workflow, presets), name
pixel_validateValide une recetteproject (recette ou révision), fix
pixel_inspectInspecte le renduproject, animation, view, region, grid, diagnostics
pixel_patchCorrige des pixelsproject ou revision, ops ou changes, scope, out
pixel_renderExporte le rendu finalproject ou revision, out, expect, saveAs
pixel_compileCompile un format sourcesource, preset, draftViews, out
pixel_sceneRévise ou exporte une scènescene, view, export, click
pixel_importImporte un PNG en recettesource, palette, out

Notes

  • Cette compétence skulitom/pixelbolt-pixel-art est à la fois une compétence pour l'agent et la doc de Pixelbolt. Installez-la avec npx skills add skulitom/Pixelbolt.
  • Gardez les recettes sous contrôle de version. Chaque itération produit un fichier source et une sortie ; ne les écrasez pas.
  • Lisez les avertissements de compilation : un pied hors du canevas, une palette qui déborde, un mouvement trop rapide pour le timing.
  • Pour une intégration dans Godot 4, l'export .tres à côté de la feuille de sprites contient les Sprite Frames pour AnimatedSprite2D, et le .tileset.tres contient les données de terrain pour TileMapLayer.

Skills associés