這是 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。