跳到正文
AI Sprite Maker

精灵图锚点编辑器

在问题进入引擎之前解决“滑步”:设置每一帧的原点,看动画以它为基准播放,并把数据导出为 JSON。

  • 免费
  • 本地运行
  • 无需注册
载入一张图片开始。

所有处理都在你的浏览器中完成。文件绝不会上传,页面加载后即使离线也能使用。

精灵图锚点编辑器使用方法

  1. 拖入一张精灵图集,检查检测到的网格。
  2. 在大的帧视图上点击放置锚点,或使用预设:中心、底部中心、左上,或脚底(根据最低处的像素自动检测)。
  3. 用箭头按钮或 , 和 . 键逐帧切换,用方向键微调锚点(Shift = 4 px)。
  4. 观察预览:各帧以锚点对齐绘制在地面线上,任何抖动都一目了然。
  5. 设置 FPS、每帧时长和循环模式,然后导出通用、Aseprite 风格或 Godot 风格的 JSON。

你能得到什么

  • 通用 JSON:帧矩形、锚点(像素和 0–1)、时长、fps、循环
  • Aseprite 风格 JSON(带 frameTags 的 json-array)
  • 适配 Godot 的 JSON(区域、偏移、相对时长)

来自游戏开发实战的技巧

  • “脚底”会找出每帧可见像素的底部中心,这是大多数横版角色的正确锚点。
  • 洋葱皮会按锚点对齐绘制上一帧,方便你精确对齐两帧之间的脚或头。
  • 给关键帧单独设置时长让它停留更久:预备动作帧和命中帧通常需要基础时长的 2–3 倍。
  • 重新导入导出的 JSON 会恢复锚点和 FPS,之后可以随时回来调整。

适用场景

  • 消除 AI 生成或描摹动画中的抖动
  • 为每帧不同的攻击和跳跃设置原点
  • 为读取逐帧原点的引擎准备精灵图集
  • 把节奏数据交给程序员

常见问题

什么是锚点?
帧上与游戏中精灵坐标重合的那个点。对角色来说通常在两脚之间,这样无论这一帧怎么画,角色都站在地面上。
为什么我的动画会滑步或抖动?
角色在每一帧中的位置不一致。有了逐帧锚点,引擎就能进行补偿,而这里的预览能让你在导出前就看到结果。
可以导出哪些格式?
包含全部信息的通用 JSON、带帧标签和归一化锚点的 Aseprite 风格 json-array,以及带区域和相对帧中心偏移的 Godot 风格 JSON。
能把锚点重新导入吗?
能。三种导出格式中的任何一种都可以重新载入,恢复锚点、时长和 FPS。
会改动我的图片吗?
不会。图集保持原样,只导出 JSON 数据。
我的图集会被上传吗?
不会。所有处理都在你的浏览器本地完成。
全部免费工具 →