【开源100】003号开源项目：SpritePet — 一个AI辅助开发的宠物精灵图集预览与校准工具

这是「开源100」计划的第 003 个项目。我会把自己开发过的项目逐步整理并开源，目标是积累 100 个真实项目案例。

在线预览

👉 https://opensource-100.github.io/sprite-pet/

打开浏览器即可体验，无需下载。

开源地址

• GitHub：https://github.com/opensource-100/sprite-pet（MIT）

项目简介

SpritePet 是一个纯前端工具，用于预览和校准宠物精灵图集（sprite sheet）。鼠标移到哪，宠物就看哪。

故事的起点

做桌面宠物时，需要一种直观的方式来预览精灵图集在不同方向下的表现。市面上的工具大多是面向游戏开发的，功能重、门槛高。于是我用 AI 辅助写了一个。

核心函数 progress2DToFrame 把鼠标坐标转成精灵帧，涉及角度归一化、校准点插值、顺/逆时针分段计算。AI 写主体逻辑，边界情况（校准点少于 2 个时的处理、角度靠近 0/2π 边界的精度）由我测试修复——这是我用 AI 做项目时反复出现的模式。

功能展示

校准编辑器

点击 "Calibration" 打开校准面板，圆盘上的每个点代表一个方向对应的精灵帧。帧之间的方向会自动插值。

• 拖拽/点击圆盘添加校准点
• 调整中心点位置
• 实时预览每帧效果
• 导出校准 JSON

鼠标交互与光标样式

内置猫爪、星星轨迹、Hello Kitty 等趣味光标，通过 Canvas 2D 渲染。

视频转精灵（可选后端）

启动本地 Python 后端上传视频，AI 逐帧抠图、去背景、合成透明 WebP 精灵图集 + JSON 元数据。

技术栈

如何本地运行

git clone git@github.com:opensource-100/sprite-pet.git
cd sprite-pet
pnpm install
pnpm dev

打开 http://127.0.0.1:5173/ 即可使用。

后端（可选）详见项目 README。

开源100 计划会持续更新，欢迎 Star、Fork、提 Issue。