这是 aogl.cn 的一篇猴子精灵图转头个人原创手记：把短转头视频抽成雪碧图（sprite sheet），用 contact sheet 做角度到帧号校准（禁止简单用 angle/360*总帧数 线性映射），再在浏览器里用鼠标位置驱动 background-position 切换帧，并配上桃子自定义光标。利于检索的词包括：精灵图转头、CSS 雪碧图、鼠标跟随角色、绿幕抠图 WebP。
流程概览
抽帧，制作校准总表确认真实朝向，建立角度键位表，打包 10×12 共 120 帧 到 sprite_hd_120.webp，在本地浏览器验证上、右、下、左、斜向与正中。
calibration_sheet.jpg：角度与帧号对照用总表。正面参考帧
中性「朝镜头」单帧导出为 frame_front.webp，用于缩略图与打包前检查。
frame_front.webp：正面姿态参考。在线演示：120 帧高清 + 桃子光标
移动鼠标：角色在 sprite_hd_120.webp 上切换 120 个背景位置（10 列 × 12 行）；桃子图跟随指针，pointer-events: none 避免挡住点击。
original/monkey2/gemini-code-1778834915677.html（sprite_hd_120.webp、cursor.png）。雪碧图资源
三份 WebP 记录迭代：标准密度、高清版、最终 120 帧 生产用网格，均在 original/monkey2/。
源片静帧 turn_head_1–10
十张编号 PNG 在打包全网格前抽样旋转弧线，便于质检与图库 alt 覆盖。
源视频（MP4）
两版导出记录早期与 refined 转头；抠绿前保留主体、避免误抠白/灰区域。
turn_head_v1.mp4turn_head_v2.mp4生成式风格锚点
两张 Gemini 图与工程资产并列，用于分享预览与图像检索，不替代校准后的精灵图。
离线脚本
Python 助手 gemini-code-1778834954429.py、gemini-code-1778835935559.py、gemini-code-1778835961926.py 与 txt.txt 记录抽帧与抠像规则（保留主体、避免吃掉白/灰）。本文固定公开 HTML、图片与视频路径，便于 SEO 与长期引用。
校准表 vs 线性角度公式
浪费我一下午的错误，是假设视频帧均匀就等于罗盘度数均匀。转头在侧面附近会压缩、在四分之三角度附近会拉伸。我打印 calibration_sheet.jpg，每隔约 30° 标真实朝向，再在演示 JS 里建查找表。之后斜向才不再「跳」到错误帧。若复用这条管线，请把校准表当强制项，而不是可有可无的 contact print。
抠像与 WebP 打包笔记
第一版残留灰色棚拍背景像素，吃进 WebP alpha，缩放时出现光晕。第二版对绿幕抠图并保守抑制溢色（写在 txt.txt）。打包顺序是行优先 10×12；高清网格偏重（数 MB），所以文章懒加载 iframe，并另放 sprite.webp 给慢网速对比。目录里还有 sprite_hd_120 bak.webp 备份，不进生产 HTML。
桃子光标交互
桃子 PNG 故意有点傻——证明指针跟踪是活的，又不挡住角色。pointer-events: none 在光标层上不可妥协；没有它，移动端点按到不了滚动容器。我测过八个罗盘点加正中；任何仍指向帧 0 的角度，意味着查找表还要在校准表里加一行。
与猴子短片文章的关系
这套精灵图是同一角色家族从 猴子短片幕后 分出来的技术支线，交付物不同：这里关心角向保真与体积，那里关心故事节拍。拆成两个 URL，避免一页变成互不相关的 MP4 杂烩——即便素材很大，AdSense 也容易判成「薄内容」。
演示里的帧索引算法
在 10×12 网格上，帧号 i 对应列 i % 10、行 floor(i / 10)。背景位置为 -col * frameWidth、-row * frameHeight。查找表把罗盘桶（N、NE、E…）映射到索引，而不是映射到度数，因此侧面帧比正脸占更多条目。把表写进 txt.txt，免得每次重导 WebP 都重推角度。
内存与网络预算
sprite_hd_120.webp 最重；我懒加载 iframe，图库里保留较轻的 sprite.webp 做对比截图。慢网上演示仍可先用正面参考画出帧 0，等网格解码。避免在同一 iframe 里加载三份 WebP 母版——生产 HTML 只装 120 帧网格。
发布前 QA 脚本
- 指针移到八个罗盘点 + 正中，在开发者工具记下帧索引。
- 移出热区，确认自定义光标隐藏、图层回到中性。
- 每次重导精灵图后，禁用缓存至少完整刷新一次。
过完这套脚本，才算本篇「完成」——不是唇形同步或游戏级绑定。替换 WebP 母版时，我会在提交说明里写一行最终帧索引快照，方便回滚。
备份与不上架的文件
sprite_hd_120 bak.webp 是糟糕打包后的本地安全副本，不链进演示 HTML。光标只有 cursor.png。中间抠像遮罩与绿幕原片不进文章图库——那会塞满 alt、也容易被看成「薄图库」。公开契约就是：校准表 → 正面帧 → 120 帧 WebP → 桃子光标演示。
何时才会重开这条管线
只有斜向映射在重导后出错，或 WebP 体积逼我再做一版给手机的轻量网格时，我才重开文件夹。只改服装外观却没有新角度表，不够成为重新发布的理由——宁愿本页稳定、在此写明限制，也不为没读者收益的素材 churn。