Your browser’s preferred language is English. Would you like to switch?

O idioma preferido do seu navegador é português. Deseja mudar?

브라우저의 기본 언어는 한국어입니다. 전환하시겠어요?

ブラウザーの優先言語は日本語です。 切り替えますか?

La langue préférée de votre navigateur est le français. Voulez-vous changer de langue ?

Die bevorzugte Sprache Ihres Browsers ist Deutsch. Möchten Sie wechseln?

La lingua preferita del tuo browser è l’italiano. Vuoi cambiare lingua?

El idioma preferido de tu navegador es el español. ¿Quieres cambiar de idioma?

你的瀏覽器首選語言是繁體中文,切換嗎?

你的浏览器首选语言是简体中文,切换吗?

Spritix
  • 功能
  • 价格
    • 准备角色参考图:从单方向到八方向动画
    • 将 Spritix 精灵图集导入 Godot:从切帧到播放
    • 调整角色动画循环:裁剪、速度与版本选择
    • 在 Spritix 中创建、调整并导出角色动画
    • Luna 动画案例:一张角色图生成五个动作
    • Spritix 导出格式指南:精灵图集、GIF、Atlas JSON 与 PNG 帧序列
    • 更多文章
    • 关于我们
      了解更多关于我们的公司、使命和价值观
    • 联系我们
      与我们的团队联系,以获取支持或咨询
    • Cookie 政策
      关于我们如何在网站上使用 Cookie 的信息
    • 隐私政策
      关于我们将如何保护和处理您在网站上的数据
    • 服务条款
      关于您与我们公司之间的法律协议和条款
登录注册
X (Twitter)
Spritix
将 Spritix 精灵图集导入 Godot:从切帧到播放
发布于: 2026/11/07更新于: 2026/11/07

将 Spritix 精灵图集导入 Godot:从切帧到播放

使用 Luna 实际输出,在英文 Godot 界面中创建 AnimatedSprite2D、切分图集并播放行走动画。

本教程把一张 Spritix 精灵图集导入 Godot,创建可播放的 walk 行走动画。我们使用 AnimatedSprite2D——Godot 中用于播放 2D 帧序列的节点,无需 JSON 导入插件或 Spritix 运行时。

示例已在 Godot 4.5.1、Compatibility 渲染器下验证,包含 Luna 的 25 帧行走动画。它演示切帧与播放,不包含角色移动、碰撞或控制器。

本文复用英文版的真实操作截图:在英文 Godot 界面中,从空场景开始导入 Luna 原始 PNG,完成切帧、设置与运行。正文用中文解释操作,保留英文菜单和属性名,方便对照。

准备示例文件

  • 下载完整 Godot 示例项目:解压后,在 Project Manager 导入 project.godot。打开 main.tscn,选择 Run Current Scene 运行当前场景;Windows/Linux 默认快捷键为 F6,macOS 为 Command–R。
  • 希望从头操作,可下载 Luna Walk 精灵图集 PNG,按下文导入。

请保存完整 PNG,不要使用图库里的小尺寸 WebP 预览。原图为 4800×4800 px,五行五列,共 25 帧,每帧 960×960 px。

使用自己的动画时,先完成循环调整,再下载 Sprite Sheet 和 Atlas JSON。你的网格和单帧尺寸可能不同,应以自己的导出文件为准。

1. 把图集加入项目

创建 Godot 4 项目,选择 Compatibility 渲染器。将 PNG 复制到项目目录,等待它出现在 FileSystem 文件系统面板中。为方便对照,可将副本命名为 luna-walk.png。

创建 2D Scene,保留根节点名称 Node2D,保存为 luna-import.tscn,再添加一个 AnimatedSprite2D 子节点:

Node2D
└── AnimatedSprite2D

要与示例布局一致,在 Project Settings → Display → Window 中将视口设为 800×600。选中动画节点,在 Inspector → Transform 中将 Position 设为 (400, 300),Scale 设为 (0.4, 0.4)。原始单帧比较大,这样可以缩小显示,不必修改 PNG 本身。

2. 创建 SpriteFrames 资源

选中 AnimatedSprite2D,在 Inspector 中找到 Sprite Frames,通过旁边的菜单新建 SpriteFrames。这个资源保存动画帧和播放参数。

英文 Godot 中为 AnimatedSprite2D 新建 SpriteFrames

打开 Sprite Frames 旁的菜单,在 New 下选择 SpriteFrames。

点击资源打开下方 SpriteFrames 面板。导入时先保留默认动画名称 default,添加帧后再改成 walk。

3. 按五行五列切帧

Luna 行走图集的五行五列预览

这里只是网格预览。实际导入请使用前面链接中的完整 PNG。

在 SpriteFrames 面板点击 Add frames from a Sprite Sheet,打开 luna-walk.png。

SpriteFrames 面板中的图集导入按钮

点击工具栏中的网格图标。

文件选择窗口中选中的 Luna 原始 PNG

选择 luna-walk.png,然后点击 Open。

将 Horizontal 设为 5,Vertical 设为 5。它们分别表示列数和行数,不是像素尺寸。将 Frame Order 设为 Left to Right, Top to Bottom,即从左到右、从上到下,再点击 Select All。

Luna 图集按五行五列切分,并按行顺序选中全部二十五帧

每个单元为 960×960 px,按钮显示 Add 25 Frame(s)。图集太大时,用减号缩小预览。

每个矩形应包含一个完整角色姿势。若边界切到了身体,先修正网格再继续。点击 Add 25 Frame(s) 后检查帧列表,应从左上角开始,到右下角结束,共 25 项。

使用自己的 Spritix 输出时,可按下表设置:

导出帧数Horizontal(列)Vertical(行)
422
1644
2555
4977
6488

每格周围的透明留白属于该帧。不要分别贴着每个姿势裁掉透明边缘,否则各帧的画布位置变化,播放时可能出现抖动。

4. 设置速度和循环

在动画列表选中 default,按 F2 将其改名为 walk。之后代码调用也要使用相同拼写。

Luna 示例将 Speed (FPS) 设为 10,并启用循环。FPS 是每秒播放的帧数,25 帧以 10 FPS 播放,一轮为 2.5 秒。这里的 10 FPS 是教学示例选值,不是从 Luna 历史生成记录恢复的参数。

使用自己的单方向输出时,请采用 Spritix Export → Frame rate 中的帧率,或对应 Atlas JSON 中的 meta.fps。按此方式设置时,保留各帧默认的相同时长权重。导出已经包含 Studio 的速度设置,不要再乘一次倍率。

PNG 本身不记录速度,只导入图片时 Godot 无法推断你希望如何播放。导出格式指南说明了时序保存在哪里。

Luna 的 walk 动画、10 FPS、循环与自动播放设置

FPS 位于循环按钮旁。动画名称前的小 A/播放图标表示已启用 Autoplay on Load,下一步会说明。滚动帧面板可以检查全部 25 帧。

用 SpriteFrames 面板的播放按钮预览,连续观察几轮,尤其检查最后一帧回到第一帧的衔接。

5. 运行场景

为 walk 开启 Autoplay on Load,保存场景,再用顶部工具栏的 Run Current Scene 运行。Windows/Linux 默认快捷键为 F6,macOS 为 Command–R。只在编辑器里点击预览播放,并不会让运行中的场景自动开始播放。

也可以关闭自动播放,在 Node2D 根节点上挂载以下脚本:

extends Node2D

func _ready() -> void:
    $AnimatedSprite2D.play("walk")

这个简单示例在自动播放和脚本中任选一种即可。实际游戏有移动状态时,再由角色控制器决定播放哪个动画。

手动导入后,Luna 在英文 Godot 运行窗口中播放

应看到一个正在运动的角色,而不是整张网格图。

常见问题排查

问题检查方法
一次显示整张图集使用 AnimatedSprite2D 和切好的 SpriteFrames,不要把整张 PNG 当作 Sprite2D 纹理显示
单帧出现两个姿势的一部分检查行列数,并确认导入的是完整 PNG
编辑器能播放,运行后不动开启 Autoplay on Load,或调用 play("walk")
动作过快或过慢对照导出 FPS,确认没有重复应用速度倍率
像素画变模糊将节点的 Texture Filter 设为 Nearest;插画可比较 Linear 的效果再选择
循环处突然跳变先查帧顺序,再回 Studio 检查 Trim 或 Perfect Loop
脚步滑动、装备变形检查源帧,网格切分不能修复生成画面的问题

添加其他动作或方向

在同一个 SpriteFrames 资源里新增命名动画,导入对应图集,再分别设置 FPS 和循环。Idle、Walk 通常循环;单次 Jump、Attack 可能需要关闭循环,并由游戏逻辑在结束后返回其他状态。

八方向图集 ZIP 解压后,将各可用方向分别导入为 walk_e、walk_w 等动画。西侧镜像图片已经翻转,不要再次翻转。不同方向的时序可能不同,请读取对应方向的 Atlas 动画信息,不要一律套用同一个 FPS。

本示例没有实现八方向输入或状态切换。先按角色与方向指南准备素材,再把动画选择接入游戏移动逻辑。

最后,按玩家实际看到的尺寸运行,检查轮廓、透明边缘、脚底接触与循环点。需要创建更多动作时,可回到完整工作流;素材来源与限制见 Luna 案例。

Godot 官方的 2D 精灵动画指南也介绍了 AnimatedSprite2D 和另一种 AnimationPlayer 方案。本文使用更直接的 AnimatedSprite2D 流程。

全部文章

作者

avatar for Spritix 团队
Spritix 团队

分类

  • 产品
准备示例文件1. 把图集加入项目2. 创建 SpriteFrames 资源3. 按五行五列切帧4. 设置速度和循环5. 运行场景常见问题排查添加其他动作或方向

更多文章

准备角色参考图:从单方向到八方向动画
产品

准备角色参考图:从单方向到八方向动画

从图片或文字创建角色,检查标准化结果,并为多朝向游戏准备一致的方向参考图。

avatar for Spritix 团队
Spritix 团队
更新于 2026/11/07
在 Spritix 中创建、调整并导出角色动画
产品

在 Spritix 中创建、调整并导出角色动画

从角色图片或文字描述开始,完成动作生成、循环调整和文件导出,再把动画用到游戏中。

avatar for Spritix 团队
Spritix 团队
更新于 2026/11/07
Luna 动画案例:一张角色图生成五个动作
产品

Luna 动画案例:一张角色图生成五个动作

查看 Luna 原图与 Spritix 实际生成的五组角色动作,按统一方法检查外观一致性和循环接缝,并了解案例保留了哪些文件证据、缺少哪些模型与提示词记录。

avatar for Spritix 团队
Spritix 团队
更新于 2026/11/07
Spritix

用 AI 精灵图生成器,将一张角色图变成一致、可直接用于游戏的动画资产。

GitHubGitHubXX (Twitter)DiscordYouTubeYouTubeEmail
产品
  • 功能
  • 价格
  • 常见问题
资源
  • 博客
公司
  • 关于我们
  • 联系我们
  • Crunchbase
  • G2 用户评价
法律
  • Cookie政策
  • 隐私政策
  • 退款政策
  • 服务条款
🇺🇸English🇧🇷Português (Brasil)🇰🇷한국어🇯🇵日本語🇫🇷Français🇩🇪Deutsch🇮🇹Italiano🇪🇸Español🇨🇳繁體中文🇨🇳简体中文
© 2026 Spritix All Rights Reserved.