Communitygithub.com

代码卡通

用代码逐帧画出卡通,再配上角色配音和音效,渲成 MP4,不靠生图或视频模型。

代码卡通 是什么?

每场戏是一个 JavaScript 文件,自己画出第 u 帧。小引擎按录好的声音时间线播放,无头 Chrome 截下每一帧,ffmpeg 再混入对白、音效和氛围。从附带的示例片复制,再换掉其中的场次即可。

兼容平台~Claude Code~Codex CLI✓Cursor
npx skills add https://github.com/krisuuu2/code-cartoon-skill/tree/HEAD

在你喜欢的 AI 中提问

打开一个已预加载此 Agent Skill 的新对话。

文档

代码卡通 是做什么的?

这里的影片是一个网页。每个场景都是一个 JavaScript 文件,用于绘制自己世界的第 u 帧;一个小型引擎根据录制语音构建的时间线播放场景;无头 Chrome 截取每帧截图;ffmpeg 将它们与语音、生成的音效和环境音混合。图像和视频均不涉及任何图像模型或视频模型。

example/ 是一个以这种方式制作的完整影片:《气球》,时长2分41秒,13种风格,16个场景。通过复制 example/ 并替换其场景来开始一部新影片;引擎、工具和契约旨在按原样复用。

工作顺序(请勿重新排序)

  1. 风格板优先(references/styles.md)。每种候选风格一张静态图,每种风格采用不同技术,都展示同一角色。共享调色板和字体的风格视作同一种,因此请确保它们在调色板、纹理、维度和技术上均有差异。在开始动画前获得风格板批准。
  2. 故事(references/story.md)。一个在每场戏中都出现的载体对象,以及每次风格改变的理由。编写剧本时,为每句台词的情绪添加标签。
  3. 语音优先于画面(references/voices.md)。录制每句台词,然后根据实际时长构建时间线。场景根据该时间线进行动画,反之则不行。
  4. 引擎和契约。 复用 example/balloon.html、example/balloon/film.js、example/tools_balloon.mjs 和 example/balloon/CONTRACT.md。在编写任何场景之前阅读契约:它很短,其中的每条规则都是因为之前没有它时出了问题。
  5. 场景(关于每种风格的做法请参考 references/styles.md,关于并行构建请参考 references/parallel-build.md)。每个场景一个文件,draw(u, S) 是 u 的纯函数。
  6. 音效(references/sound.md)。每个场景声明自己的效果、提示时间和环境音;工具生成并混合它们。
  7. 逐场景渲染,然后合并。 bash balloon/final.sh 为每个场景渲染一个 MP4,这样只需重新渲染更改过的场景。
  8. 检查完成的文件(references/checking.md)。你无法观看或聆听,因此检查可测量的内容,并如实说明哪些内容未被检查。

适用于每个场景的规则

  • 帧是时间的纯函数。 帧被一次一个地渲染,有时顺序是乱的。没有上一帧的状态,没有时钟,没有未设置种子的随机数。昂贵的固定工作放在 init 中。
  • 载体在每个场景的同一屏幕位置打开和关闭(示例中:红色气球在 (700, 560),半径 64)。下一个场景通过从该点向外扩展的圆来揭示,这使每个过渡自动成为匹配剪辑。
  • 主角在所有风格中保持其比例。 只重新设计渲染方式,不改变形状。
  • 谁说话,谁移动,其他人则不动。没有口型同步;一个弹跳、一个喙或一个闪烁的光标就足够了。
  • 屏幕上的数字是真实的。 显示 600 行或 512 条射线的计数器展示帧实际使用的内容。
  • 动作有因: 跳跃前的预期、着陆时的挤压、冲击在帧上的效果、笑点前三分之一到半秒的静止。
  • 字幕属于引擎; 场景将脸部和手部保持在该带之外。

命令(在影片文件夹中运行)

npm install                                             # three + puppeteer-core;如果 Chrome 不在默认位置,请设置 CHROME_PATH
node tools_styles8.mjs                                  # 风格板:每种风格一张静态图 -> out/styles8/board.jpg
python tools_balloon_vo.py                              # 语音 + 时间线(需要 ELEVENLABS_API_KEY);--timeline 仅重建时间线
node tools_balloon.mjs --scene=book --sheet=auto        # 一个场景的 8 个静态帧 + 拼接成一张图
node tools_balloon.mjs --glide=book                     # 一个场景的结束姿态
node tools_balloon.mjs --film --sheet=13.1,24.8         # 整部影片在那些秒数的静态帧(在场景边界使用它们)
bash balloon/final.sh                                   # 渲染每个场景、音效、合并、混合;`final.sh comic pixel` 仅重新渲染这些场景

需要 Node 18+、Chrome、ffmpeg、包含 requests numpy soundfile pyloudnorm 的 Python 3。画面不需要 API 密钥;语音和音效需要 ElevenLabs 密钥。

参考文件

文件何时阅读它
references/styles.md选择风格,或在十三种风格之一中构建场景时
references/story.md编写剧本时
references/voices.md选角、录制、定时时
references/sound.md效果、环境音、混音时
references/checking.md在声称一个场景或整部影片已完成之前
references/parallel-build.md同时构建多个场景,或机器 GPU 较弱时
example/balloon/CONTRACT.md始终在第一个场景之前阅读

相关技能