Communitygithub.com

hanamorix/image-to-animated-pixel-art

Transformez une image en pixel art détaillé animé dans Aseprite (boucle de repos, respiration, clignement, balancement de cheveux ou de vêtements, jiggle, etc.) via Aseprite MCP.

Qu'est-ce que image-to-animated-pixel-art ?

Ce skill permet de transformer une image ou illustration en pixel art animé de haute qualité dans Aseprite, en utilisant Aseprite MCP. Il guide l'utilisateur à travers un workflow rigoureux de 8 étapes : de la réduction à la taille cible, en passant par la création du sprite fixe, les poses de clignement, l'animation, les effets et les finitions. Chaque étape est vérifiée avec des contrôles automatisés (décalage zéro, pops, sauts, carte de chaleur, etc.) pour garantir une animation propre, sans artefacts de scintillement ni de rupture. Le résultat doit rester fidèle à la source originale, en évitant l'invention de détails et en corrigeant les pertes dues à la réduction. Le skill gère également les préférences de pixel art de l'utilisateur et propose des scripts Lua spécialisés pour chaque étape du processus.

Compatible avec✓Claude Code~Codex CLI~Cursor
npx skills add https://github.com/hanamorix/hana-pixel/tree/HEAD/skills/image-to-animated-pixel-art

Demander à votre IA préférée

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

Documentation

Conversion d'image en pixel art animé

Le résultat doit rester fidèle à la source : corriger ce que la réduction à la taille de pixel a endommagé, ne jamais inventer de détail. En mouvement, l'ennemi est la rupture : tout pixel qui saute, se déchire, apparaît ou scintille. Claude ne peut pas regarder un GIF, donc chaque présentation est précédée de vérifications mesurées, jamais de "ça a l'air bien sur un fixe".

Si l'utilisateur conserve des préférences de pixel art (dans son CLAUDE.md ou un fichier pointé), les lire en premier ; elles remplacent les valeurs par défaut ici. Nécessite Aseprite MCP : references/aseprite-mcp.md. Lire quand vous arrivez à cette étape : references/still-recipe.md, references/motion-and-breaks.md.

Workflow

Chaque point de contrôle est un message : une image côte à côte (source | avant | après, ou un GIF plus un flip-book recadré) et une question. Copier le fichier actuel dans _vN avant chaque modification, afin qu'un round rejeté soit restauré à partir de celui-ci. Chaque round effectue exactement la modification demandée et rien d'autre.

  1. Brief. Demander ce qui est souhaité avant de planifier : quelles parties bougent, combien et à quelle vitesse, ce qui reste immobile, ce qui est protégé. Écrire un court plan (demi-page) et obtenir un oui. Terminé lorsque l'utilisateur approuve le plan.
  2. Source. Rogner ou redimensionner la source pour que sa taille soit exactement 3x le sprite cible (environ 200-260 px de large). Les scripts supposent 3x.
  3. Fixé (1_still.lua, puis corrections avec 2_local_rerender.lua, 3_join_outline.lua). Mesurer les paramètres dans still-recipe.md pour cette image. Points de contrôle dans l'ordre : mains, puis visage et yeux, puis contours, métal et arrière-plan. Terminé lorsque chaque partie est approuvée et que le fixe est enregistré sous *_still_FINAL.
  4. Poses de clignement (4_blink_poses.lua, tracés des yeux à la main en 14x). Montrer les quatre poses côte à côte plus un GIF de clignement en un seul point de contrôle, construit comme dans motion-and-breaks.md. Terminé lorsque approuvé.
  5. Mouvement (5_animation_frames.lua). Remplir son bloc SETTINGS à partir des mesures sur le fixe, exécuter avec BF_ZERO = true d'abord (doit changer 0 px), puis l'exécution réelle, puis 6_deflicker_metrics.lua. Passer les vérifications ci-dessous, puis montrer le GIF complet plus un flip-book recadré de la partie mobile.
  6. Effets (8_effects.lua, couleur uniquement, après dé-flicker). Vérifier, puis montrer.
  7. Extras une demande à la fois (bras, eau, ...), chacune avec son propre point de contrôle.
  8. Final. Copier vers *_FINAL (.aseprite + 3x GIF), en conservant les finaux précédents.

Vérifications avant chaque point de contrôle d'animation

VérificationRéussiteOù
Rendu à décalage zéro égal à la pose0 px changé avec BF_ZERO5
Parties rigides (mains) exactesLa boîte de chaque image, décalée de son soulèvement en px entier, égale le fixe : 0 pxpropre comparaison Lua
Pops d'une image (A→B→A)aucun en dehors du clignement et des effets6 les imprime
SautsLes images de pas listées dans BA_STEPS sont exclues ; toute autre image ≤ ~2x médiane des px changés, et toute image au-dessus a une cause nommée6
Carte de chaleurpas de rouge (≥ 8 changements par boucle) sur les contours, bretelles, cils, yeux7_flicker_heatmap.lua
Effetschaque pixel d'effet tient ≥ 2 images ; le nombre de px changés est supérieur à 0 (un mélange faible peut revenir à la même couleur de palette)8 imprime les comptes
Œil ferméaucune couleur d'iris restante sur les images ferméesview_sprite en 12x
Flip-book8-16 images des mains, du visage et de chaque bord mobile en 6x+ paraissent continuesview_sprite région + images

Scripts (scripts/)

Chaque script a besoin que PA_DIR (dossier du projet, se terminant par le séparateur de chemin : \ sous Windows, / sous macOS) et PA_SRC (nom du fichier image source) soient définis en premier, ainsi que ses propres variables globales listées dans son en-tête. Les exécuter via run_lua_script avec un lanceur court ; <skill> est le répertoire de base de ce skill, donné au chargement du skill :

PA_DIR, PA_SRC = [[/chemin/vers/projet/]], "reference.jpg"
BF_POSES, BF_OUT, BF_PUSH = "blink_poses.aseprite", "frames", true
dofile([[<skill>/scripts/5_animation_frames.lua]])
ScriptFait
1_still.luaRéduction 3x3 avec préservation des lignes, palette k-means + accents, passe de taches de rousseur, fusion des orphelins
2_local_rerender.luaRe-rendu de boîtes à un autre seuil de ligne ou avec des couleurs supplémentaires (mains, lèvres)
3_join_outline.luaJoindre les contours pointillés là où la source a une ligne fine
4_blink_poses.luaPoses ouverte, à moitié, proche, fermée (les étendues des yeux dans le fichier sont par image)
5_animation_frames.luaToutes les images ; chaque coordonnée vit dans son bloc SETTINGS (exemples de valeurs inclus)
6_deflicker_metrics.luaDé-flicker, pops, vérification des sauts (BA_SKIP boîtes rigides, BA_STEPS images de pas)
7_flicker_heatmap.luaPNG de carte de chaleur
8_effects.luaLumière compressée, reflet, étincelles de mer, reflets de sable (bloc SETTINGS par image)
checkin_sheet.luaFeuille source / avant / après pour une région
example_metal_rerender.luaExemple travaillé uniquement : métal re-rendu avec des bandes d'ombre issues de la source

5_animation_frames.lua contient les types de mouvement rencontrés jusqu'à présent (bande de respiration, dômes souples, boîtes de balancement, poussée rigide en pixel entier, segments de membres, mer). Une nouvelle image avec des parties mobiles différentes ajoute un champ ici.

Skills associés