像素动画 Hitbox 与 Hurtbox 帧编辑器

在精灵动画每帧上绘制碰撞判定图层,通过洋葱皮预阅动作连贯性,精确编辑像素坐标并导出引擎中立的 JSON 项目。

载入动画素材,确认切片划分,然后绘制判定攻击、受击、物理挤压、抓取或检测的碰撞区域。

本地动画工作台,图像不会上传至服务器。
将动画素材放置于工作台

选择一张等分雪碧图或多张有序的 PNG、WebP 帧图片。

帧切片划分
动作播放预览
动画工作台

请载入精灵素材以显示帧画面并开始绘制碰撞图层。

碰撞时间胶片
导出动画项目

JSON 文件仅记录图像文件名、切片、轴心点及碰撞几何数据,不内嵌像素数据。

Zoom 100%
工具工作室

想把这个工具添加到你的网站吗?

为 WordPress、Notion 或你自己的网站自定义配色和深色模式。

常见问题

Hitbox(攻击框)与 Hurtbox(受击框)有什么区别?

Hitbox 通常用于判定发起攻击或产生作用的区域,而 Hurtbox 用于定义可以接收该攻击的受击区域。Pushbox 用于保持角色间距,Grabbox 用于判定投掷范围,Sensor 用于触发检测。

我的精灵图文件会被上传到服务器吗?

不会。图像的解码、裁切、绘制和导出完全在您的浏览器本地完成。本地仅保存播放速度、洋葱皮开关等编辑偏好。

导出的 JSON 使用什么坐标系?

每一帧均以该帧裁切矩形的左上角为原点 (0,0) 测量像素坐标。矩形与圆形碰撞框保存非负的 x、y、宽度和高度值,并记录每帧自有的轴心点 (Pivot)。

我可以同时编辑雪碧图(Sprite Sheet)和单帧图片序列吗?

可以。您可以载入一张 PNG 或 WebP 雪碧图并设置行列数进行等分裁切,也可以选择多张有序的单帧图片序列。

导出的数据可以直接在所有游戏引擎中使用吗?

JSON 数据保持引擎中立。它记录了帧切片、轴心点、语义图层名称及几何形状,不强制绑定具体引擎。请在项目解析器中根据引擎的坐标原点与缩放规则进行转换。

参考文献