[{"data":1,"prerenderedAt":-1},["ShallowReactive",2],{"project-92697":3},{"id":4,"name":5,"fullName":6,"owner":7,"repo":5,"description":8,"homepage":9,"htmlUrl":10,"language":11,"languages":10,"totalLinesOfCode":10,"stars":12,"forks":13,"watchers":14,"openIssues":15,"contributorsCount":15,"subscribersCount":15,"size":15,"stars1d":15,"stars7d":15,"stars30d":16,"stars90d":15,"forks30d":15,"starsTrendScore":15,"compositeScore":17,"rankGlobal":10,"rankLanguage":10,"license":18,"archived":19,"fork":19,"defaultBranch":20,"hasWiki":21,"hasPages":19,"topics":22,"createdAt":10,"pushedAt":10,"updatedAt":30,"readmeContent":31,"aiSummary":32,"trendingCount":15,"starSnapshotCount":15,"syncStatus":33,"lastSyncTime":34,"discoverSource":35},92697,"2dimg2motion","WU-HAOTIAN34\u002F2dimg2motion","WU-HAOTIAN34","Agent skill for converting 2D character into style-consistent transparent animation sequences and spritesheets for game engines | 用于将静态 2D 角色\u002F物体图片，通过 agent 转化为一致的透明背景游戏动画序列帧。","",null,"Python",65,1,52,0,10,41.9,"MIT License",false,"main",true,[23,24,25,26,27,28,29],"agent-skills","claude-skills","codex-skill","game-development","skill","sprite-animation","spritesheet","2026-07-22 04:02:06","\u003Cdiv align=\"center\">\n\u003Cp align=\"center\">\n  \u003Cimg src=\"examples\u002Fe1res.gif\" height=\"110\" alt=\"claudecy idle\" \u002F>\n  \u003Cimg src=\"examples\u002Fe2res.gif\" height=\"110\" alt=\"claudecy running\" \u002F>\n  \u003Cimg src=\"examples\u002Fe3res.gif\" height=\"110\" alt=\"claudecy success\" \u002F>\n  \u003Cimg src=\"examples\u002Fe4res.gif\" height=\"110\" alt=\"claudecy talking\" \u002F>\n  \u003Cimg src=\"examples\u002Fe7res.gif\" height=\"110\" alt=\"howl success\" \u002F>\n  \u003Cimg src=\"examples\u002Fe6res.gif\" height=\"110\" alt=\"howl running\" \u002F>\n\u003C\u002Fp>  \n\n# 2dimg2motion.skill\n\n\u003Cp align=\"center\">\n  \u003Cstrong>English\u003C\u002Fstrong>\n   · \n  \u003Ca href=\"README-CN.md\">\u003Cstrong>简体中文\u003C\u002Fstrong>\u003C\u002Fa>\n\u003C\u002Fp>\n\n[![License: MIT](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FLicense-MIT-yellow.svg)](LICENSE)\n[![Agent Skills](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FAgent%20Skills-Standard-green)](https:\u002F\u002Fagentskills.io)\n[![Multi-Runtime](https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FRuntime-ClaudeCode%20·%20Codex-blueviolet)]()\n\n\u003Cbr>\n\n\u003Cp align=\"center\">\n2dimg2motion.skill -- not a filter that \"makes an image move\", but a runnable framework for generating game animation frames\n\u003C\u002Fp>\n\u003Cbr>\n\u003Cp align=\"center\">\nSpritesheet delivery pipeline via key-pose redrawing, identity locking, and limb topology constraints,\u003Cbr>\nit turns every instinct of \"how should this character move?\" into an executable, verifiable, reusable animation-generation pipeline.\u003Cbr>\nInput one 2D character, creature, weapon, vehicle, or prop image,\u003Cbr>\nand output a style-consistent transparent action sequence ready to import into a game engine.\n\u003C\u002Fp>\n\n\n![head](examples\u002Fgithub-header-1.png)\n\n\u003C\u002Fdiv>\n\n---\n\n\n\n## What Is This\n\n`2dimg2motion.skill` is a 2D game-animation generation skill for Codex \u002F Claude Code \u002F Agent Skills. It takes one static character, creature, vehicle, weapon, or prop image and generates a style-consistent transparent action sequence that can be packed into a spritesheet.\n\nIt is not a \"single-image motion filter\". Filters usually translate, rotate, scale, or warp local image layers; the core of this skill is **whole-character key-pose redraw**: first lock the character identity, then let the model redraw complete key poses, then generate in-between frames, with local scripts handling transparency, canvas normalization, packing, and validation.\n\n## Why It Exists\n\nAI can easily draw characters that look like they belong to the same series, but it is much harder to draw continuous motion for the same character. Game animation adds more requirements:\n\n- every frame must be a transparent RGBA PNG;\n- character proportions, foot baseline, and canvas size must stay stable;\n- weapons, arms, horns, tails, and wings must not swap sides or disappear;\n- keyframes and in-betweens must form readable motion;\n- the final output must be directly usable in Godot, Unity, Cocos, or a custom 2D engine.\n\nThis repository turns those lessons into an executable workflow: analyze the baseline image, establish the identity lock, design action beats, generate a shared key-pose sheet, generate in-betweens, remove the background, normalize frames, pack assets, validate structure, and visually inspect the result.\n\n## Quick Start\n\n### 1. Install The Skill\n\nPut the repository into your Agent Skills directory. Keep the repository structure intact, because the main skill, sub-skills, scripts, references, and project knowledge files refer to each other.\n\nCodex example:\n\n```powershell\ngit clone https:\u002F\u002Fgithub.com\u002FWU-HAOTIAN34\u002F2dimg2motion.git $env:USERPROFILE\\.codex\\skills\\2dimg2motion\n```\n\nClaude Code example:\n\n```bash\ngit clone https:\u002F\u002Fgithub.com\u002FWU-HAOTIAN34\u002F2dimg2motion.git ~\u002F.claude\u002Fskills\u002F2dimg2motion\n```\n\nYou can also run it directly from this repository during local development. Confirm the dependency:\n\n```powershell\npython -m pip install pillow\n```\n\n### 2. Use The Main Skill To Generate Animation\n\nIn Codex or Claude Code, provide a baseline image and describe the motion:\n\n```text\n\u002F2dimg2motion use sample\u002Fs3.png to generate an arm-swing attack animation\n```\n\nOr:\n\n```text\nGenerate a walk action from this character image.\n\u002F2dimg2motion use sample\u002Fs7.png to generate a sword-slash action.\n\u002F2dimg2motion use sample\u002Fs1.png to make a heavy ground-smash attack animation.\n```\n\nThe main skill runs the full workflow: analyze the baseline image, establish the identity lock, design key poses at 02\u002F05\u002F08\u002F11, generate in-betweens, remove the background, normalize frames, pack the spritesheet, and output `preview.gif` and `manifest.json`.\n\n### 3. Use The Baseline Standardization Sub-Skill\n\nIf the input image is too large, tightly cropped, visibly white-backed, or lacks enough transparent margin for attacks or walking motion, call the standardization sub-skill first:\n\n```text\n\u002Fimg2mo-std s7\n\u002Fimg2mo-std sample\\s7.png\n```\n\nIt resolves the image path and calls the script to create a standardized baseline image:\n\n```powershell\npython scripts\\standardize_baseline.py sample\\s7.png\n```\n\nUseful options:\n\n```powershell\npython scripts\\standardize_baseline.py sample\\s7.png --check-only\npython scripts\\standardize_baseline.py sample\\s7.png --subject-max 360 --margin-ratio 0.75\npython scripts\\standardize_baseline.py sample\\s7.png --output sample\\s7-standard.png\n```\n\nDefault output:\n\n```text\nsample\\\u003Cinput-stem>-standard.png\n```\n\nThe standardized image should become the `00` and `13` baseline frame for later animation generation.\n\n### 4. Use The Learning Sub-Skill\n\nIf you have reference videos, existing outputs, failed attempts, GIFs, spritesheets, Spine assets, or frame folders, the skill can extract reusable project knowledge from them:\n\n```text\n\u002Fimg2mo-learn output\\s3-arm-swing-attack\n\u002Fimg2mo-learn motion\\some-reference-folder\n\u002Fimg2mo-learn sample\\attack-reference.mp4\n```\n\nLearned notes are written to:\n\n```text\nimg2mo-knowledge\u002F\n|-- index.md\n|-- learnings.jsonl\n|-- action-patterns.md\n|-- style-patterns.md\n|-- prompt-patterns.md\n`-- failures.md\n```\n\nFuture animation generations read this project-level knowledge first, improving action timing, prompt clauses, canvas margins, and failure checks.\n\n### 5. Use Scripts Directly\n\nScripts are for non-creative post-processing and validation only. They do not draw motion.\n\nStandardize a baseline image:\n\n```powershell\npython scripts\\standardize_baseline.py sample\\s7.png\n```\n\nConvert transparent fullframe PNGs into a white-background GIF preview:\n\n```powershell\npython scripts\\fullframes_to_gif.py output\\s3-arm-swing-attack\\fullframe --output output\\s3-arm-swing-attack\\preview.gif --duration-ms 75\n```\n\nValidate the 14-frame delivery structure:\n\n```powershell\npython scripts\\validate_14frame_pattern.py --baseline sample\\s3-standard.png --keyframes-dir output\\s3-arm-swing-attack\\keyframe --fullframes-dir output\\s3-arm-swing-attack\\fullframe --preview output\\s3-arm-swing-attack\\preview.gif --prefix s3-arm-swing-attack\n```\n\nOn success, it prints:\n\n```text\nOK\n```\n\n## Showcase\n\n\u003Ctable>\n  \u003Ctr>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Ronin - Slash\u003C\u002Fp>\u003C\u002Fth>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Golem - Smash\u003C\u002Fp>\u003C\u002Fth>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Monster - Claw\u003C\u002Fp>\u003C\u002Fth>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Giant - Sword Swing\u003C\u002Fp>\u003C\u002Fth>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Worker - Walk\u003C\u002Fp>\u003C\u002Fth>\n    \u003Cth align=\"center\">\u003Cp align=\"center\">Beetle - Crawl\u003C\u002Fp>\u003C\u002Fth>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs1.png\" width=\"110\" alt=\"ronin input image\">\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs2.png\" width=\"110\" alt=\"golem input image\">\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs3.png\" width=\"110\" alt=\"monster input image\">\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs5.png\" width=\"110\" alt=\"giant input image\">\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs6.png\" width=\"110\" alt=\"worker input image\">\u003C\u002Ftd>\n    \u003Ctd align=\"center\">\u003Cimg src=\"examples\u002Fs4.png\" width=\"110\" alt=\"beetle input image\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs1-spritesheet .png\" width=\"1200\" alt=\"ronin slash 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs2-spritesheet.png\" width=\"1200\" alt=\"golem smash 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs3-spritesheet.png\" width=\"1200\" alt=\"monster claw 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs5-spritesheet.png\" width=\"1200\" alt=\"giant sword-swing 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs6-spritesheet.png\" width=\"1200\" alt=\"worker walk 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n  \u003Ctr>\n    \u003Ctd colspan=\"6\">\u003Cimg src=\"examples\u002Fs4-spritesheet.png\" width=\"1200\" alt=\"beetle crawl 14-frame spritesheet\">\u003C\u002Ftd>\n  \u003C\u002Ftr>\n\u003C\u002Ftable>\n\n## Input And Output\n\nThe input is usually one static PNG:\n\n```text\nsample\u002Fs3.png\n```\n\nDescribe the action you want:\n\n```text\nuse sample\u002Fs3.png to generate an arm-swing attack animation\n```\n\nThe output is a standard delivery bundle:\n\n```text\noutput\u002F\u003Caction-id>\u002F\n|-- keyframe-prompts.md   # prompts and identity lock for 02\u002F05\u002F08\u002F11\n|-- keyframe\u002F             # 4 keyframes at fixed indices 02, 05, 08, 11\n|-- fullframe\u002F            # 14 transparent RGBA sequence frames, fixed indices 00-13\n|-- spritesheet.png       # horizontal packed spritesheet\n|-- contact-sheet.png     # visual review sheet\n|-- preview.gif           # 14-frame white-background playback preview\n`-- manifest.json         # canvas, frame order, topology lock, keyframe indices, and processing notes\n```\n\n`fullframe\u002F*.png` contains the transparent frames you should import into your engine. `preview.gif` is only a human-readable playback preview.\n\n## Core Mechanisms\n\n### 1. Identity Lock\n\nBefore generation, record the character invariants: face, eyes, silhouette, proportions, palette, outline, clothing, weapon, horns, tail, wings, claws, markings, and other accessories. Every later prompt inherits this identity lock.\n\n### 2. Topology Lock\n\nFor attacks, waves, sword swings, tail sweeps, and similar actions, the skill records the active limb and anchor limb in screen space, for example:\n\n```text\nactiveLimb: screen-right arm\nanchorLimb: screen-left arm\n```\n\nThis reduces failures like \"the right hand suddenly becomes the left hand\", \"the weapon switches hands\", or \"the tail root disappears\".\n\n### 3. 14-Frame Structure\n\nDefault actions use fixed anchors:\n\n```text\n00 -> 02 -> 05 -> 08 -> 11 -> 13\n```\n\n`00` and `13` are the baseline image. `02\u002F05\u002F08\u002F11` are the four model-generated key poses. The other frames are in-betweens generated from adjacent anchors. This structure keeps short actions compact and easy to validate.\n\n### 4. Whole-Character Redraw\n\nKeyframes and in-betweens must be generated by an image model as complete character poses. Scripts may only perform non-creative post-processing: baseline standardization, cell splitting, chroma-key removal, canvas normalization, GIF generation, spritesheet packing, and validation.\n\n### 5. Verifiable Delivery\n\nThe repository includes a validator that checks frame count, naming, RGBA mode, canvas size, transparent corners, whether 00\u002F13 match, whether keyframes are pixel-identical to their corresponding fullframes, and whether the GIF is a 14-frame white-background preview.\n\n## Supported Action Types\n\n| Action | Common Beats |\n|---|---|\n| idle | settle -> rise -> settle |\n| walk \u002F move | contact -> down -> passing -> up -> opposite contact |\n| attack | guard -> anticipation -> acceleration -> contact -> follow-through -> recovery |\n| block | raise guard -> hold -> return |\n| hit \u002F suffer | impact -> recoil -> squash\u002Fstretch -> recovery |\n| death | imbalance -> fall -> impact -> rest |\n| born \u002F spawn | small\u002Fcurled shape -> unfold -> full identity |\n| skill \u002F cast | anticipation -> charge -> peak cast -> recovery |\n\n## Workflow\n\n1. **Standardize the baseline image**: when needed, crop and resize the input image onto a transparent padded canvas to prevent action poses from going out of bounds.\n2. **Analyze the character**: record body structure, colors, style, face, limbs, weapons, accessories, and uncertain areas.\n3. **Establish locks**: write the identity lock, topology lock, weapon\u002Fprop ownership, and canvas constraints.\n4. **Design key poses**: design action beats for `02\u002F05\u002F08\u002F11`.\n5. **Generate the key-pose sheet**: generate the four key poses together to reduce identity drift from independent calls.\n6. **Generate in-betweens**: generate 8 in-between frames with the fixed `1\u002F2\u002F2\u002F2\u002F1` insertion plan.\n7. **Post-process**: remove the chroma-key background and normalize canvas, scale, center, and foot baseline.\n8. **Package deliverables**: output fullframe, keyframe, spritesheet, contact-sheet, preview.gif, and manifest.\n9. **Validate and visually inspect**: run structural validation, then inspect the contact sheet and GIF for hand swaps, clipping, cyan fringe, scale popping, or unreadable motion.\n\n## Repository Structure\n\n```text\n.\n|-- SKILL.md                  # main skill instructions and full generation contract\n|-- references\u002F               # key-pose redraw and motion prompt references\n|-- skills\u002Fimg2mo-std\u002F        # baseline standardization sub-skill\n|-- scripts\u002F\n|   |-- standardize_baseline.py\n|   |-- fullframes_to_gif.py\n|   `-- validate_14frame_pattern.py\n|-- sample\u002F                   # input sample images\n|-- examples\u002F                 # README showcase assets\n|-- motion\u002F                   # local motion reference library\n`-- img2mo-knowledge\u002F         # project-level learned knowledge\n```\n\n## Design Principles\n\n- **Prefer whole-character generation**: do not fake key poses by rotating local limbs with scripts.\n- **Generate shared key poses together**: do not generate 02\u002F05\u002F08\u002F11 as four independent calls.\n- **Keep 00\u002F13 identical to the baseline**: loop endpoints must be the same baseline frame.\n- **Use one scale strategy per batch**: avoid frame-by-frame auto-fit that causes scale popping.\n- **Do not skip visual inspection**: validation scripts catch structural issues, not every animation failure.\n- **Keep final directories clean**: final output directories should contain deliverables only, not failed drafts or model source sheets.\n\n## Dependencies\n\n- Python 3.x\n- [Pillow](https:\u002F\u002Fpython-pillow.org\u002F)\n- Codex \u002F Claude Code \u002F Agent Skills style runtime\n- Available image-generation capability for key poses and in-between frames\n\n## License\n\nMIT © 2026 Haotian Wu\n\n---\n\n## Use Case\n\n\u003Cdiv >\n  \u003Ctable>\n    \u003Ctr>\n      \u003Ctd align=\"center\">\n        \u003Ca href=\"#小程序:\u002F\u002F搬家塔防\u002FbQrrvXJtLMv04Bh\">\n          \u003Cimg src=\"examples\u002Flogo.png\" width=\"120\" height=\"120\" alt=\"Moving Tower Defense Battle\">\u003Cbr>\n          \u003Cstrong>Moving Tower Defense Battle\u003C\u002Fstrong>\n        \u003C\u002Fa>\n        \u003Cbr>\n        \u003Cspan>WeChat Mini Game · Tower Defense Strategy\u003C\u002Fspan>\n        \u003Cbr>\n        \u003Cimg src=\"https:\u002F\u002Fimg.shields.io\u002Fbadge\u002FWeChat%20Mini%20Game-Live-07C160\" alt=\"WeChat\">\n      \u003C\u002Ftd>\n    \u003C\u002Ftr>\n  \u003C\u002Ftable>\n\u003C\u002Fdiv>\n","这是一个面向游戏开发的AI动画生成工具，将单张2D角色\u002F物体静态图转化为风格一致、透明背景的动画序列帧与精灵图集（spritesheet）。核心采用基于身份锁定的全姿态重绘机制：先稳定角色特征与肢体拓扑结构，再生成关键帧，插值补全中间帧，并自动完成透明化、画布归一化与图集打包。适用于Unity、Godot等2D游戏引擎的快速原型制作与小规模资源生产，尤其适合需保持美术风格统一性的独立游戏或可视化项目。",2,"2026-07-10 02:30:10","CREATED_QUERY"]