cs-pixel-explainer

cs-pixel-explainer：像素风动画解说视频

参考风格：夜晚像素街道 + 左上角「关系坐标」HUD + 打字机字幕 + 把道理抽象成坐标系/老虎机/网络图。 全部画面由代码绘制（Canvas），页面暴露 window.render(t)，Playwright 逐帧截图 + FFmpeg 合成 1080p MP4；配音用 edge-tts，每句真实时长驱动整条时间轴，字幕和动画自动对齐配音。

流程总览：问 5 项输入 → 设计隐喻 → 分镜表（等确认）→ 3 张关键帧（等确认）→ 配音 → 逐场景制作自检 → 整片 → 交付。

0. 引擎在哪

引擎 = engine/ 目录下 5 个文件：engine.html（场景库）timeline.mjs render.mjs tts.py 配音.bat。 按顺序找，找到一处即可，复制到工作目录 ~/pxe/engine/：

1. 本 skill 目录：engine/（从 GitHub 安装时就在这里；没有就 git clone https://github.com/ChenShuo2004/cs-skills，目录 cs-pixel-explainer/engine/）
2. 用户电脑（已关联时）：读取用户提供的 engine 目录，通过当前可用文件工具获取；不假设固定电脑路径。
3. Project「陈硕 video」文档：claude/pixel-explainer/engine.html 等 → project_read 后写入文件

像素纯度参考实现：assets/reference-wizard.html（施法巫师，128×96 调色板索引缓冲、整数倍放大、10 张/秒姿势量化、预分配粒子池、固定步长重放的 render(t)、无缝循环）。新场景、新角色从它的写法起步。

运行依赖：node + playwright、ffmpeg、Noto CJK 字体；Playwright 需有 Chromium 浏览器，若未安装其自带浏览器，渲染脚本会尝试使用本机 Chrome。Claude Cowork 环境若已预装这些依赖，无需重复安装。配音需要 Python、edge-tts 和可访问语音服务的网络；tts.py 缺少 edge-tts 时会自动安装。 配音.bat 缺了就按下面内容重建（必须 CRLF 换行，UTF-8）：

@echo off
chcp 65001 >nul
cd /d %~dp0
where python >nul 2>nul && (python tts.py) || (py tts.py)
echo.
echo 配音完成后回到 Claude 说一声「配音好了」即可
pause

示例 spec：assets/example-spec.json（10 个场景全覆盖，写新 spec 前先读它）。

1. 开工先问 5 项输入（一条消息问完，没给的不编）

原材料里已经能确定的项直接写出来请用户确认，不重复问：

1. 主题，以及看完以后希望观众记住的一句话（主题和这句话必须由用户给，可以帮忙改写，不能代填）
2. 时长和画幅：__ 秒（本系列常见 90–180 秒），1920×1080 / 1080×1920 / 1080×1080，30 / 60 帧
3. 风格：本系列锁定像素风；问有没有参考视频或截图、这支要不要换场景主题（夜晚街道 / 别的地点）
4. 配色和字体：沿用系列调色板（黄=正向、红=负向、青=主角），还是这支换主色 #……
5. 声音：用户提供的音乐文件（放项目目录，bgm）/ 代码合成芯片配乐 / 无配乐；要不要配音（默认要，男声 zh-CN-YunxiNeural）

用户回答「你定」的项才用默认值，并在分镜表顶部标注。无人值守时主题取自文案，其余用默认值，并在报告最前面列出假设。

2. 导演规则（每支都遵守）

• 整片一套风格、一套调色板；主角、NPC、HUD 在每个场景里长得一样。
• 每个场景只讲一件事；画面上的字少而大，每段文字（标题、标签、大字）至少停 2.5 秒；字幕每句 ≤ 22 字。
• 动画用缓动或弹簧，不用匀速（路人行走除外）。
• 转场从画面内容里长出来：地面塌陷 → 坠入 abyss、落地线变成 axes 的横轴、坐标点放大成下一场的角色。pixelDissolve 只作兜底，不要每场都用。
• 镜头跟着内容动：推近主角、拉远看全局、跟随奔跑；主体至少占画面三分之一。
• 禁止：居中大字 + 渐变背景的默认风格、所有元素同时淡入、满屏小字、任何看起来像模板的东西。