[GitHub #8051] Import Sprite Sheets / Core sprite sheet support

GDevelop general Feature requests
, ,
42

Hi, I read this topic and used AI to quickly create the spritesheet extension (including the UI for GDevelop). Don’t beat me up!

Since I don’t have time to test it or use GitHub, I’m leaving it here, hoping someone can make it fully functional and share it (basically it’s just a starting point).

Of course, I also vote for this feature, which should be added alongside the existing single-sprite system (which is useful in many situations and should remain).

Draft: Sprite Sheet Importer for the Sprite Editor (newIDE)

Status: prototype / untested / for discussion & feedback.
Goal: add a small dialog to the Sprite editor that imports frames from an external spritesheet (PNG) + atlas JSON and turns them into GDevelop image resources + frames/animations.

What it does (current draft)

  • Supports Aseprite JSON and TexturePacker JSON (auto-detect, or force a format).

  • Slices the sheet client-side via a canvas, writes out individual PNGs (desktop app only), and:

    • creates ImageResource entries;
    • appends Sprite frames to the selected animation;
    • if Aseprite tags are present, also creates extra animations per tag (simple mapping).

  • Handles rotated frames (90°) from the atlas.

Output (desktop app): files are saved under
images/<ObjectName>/<AnimationName>/frame_XXX.png inside the project folder.

Web IDE fallback: can’t write files to disk; frames can still be created for preview but paths won’t be persisted until a desktop save.

How to install (very short)

  1. Copy files into the editor:
newIDE/app/src/ObjectEditor/Editors/SpriteEditor/
  SpriteSheetImportDialog.tsx
  useSpritesheetParser.ts
  addSpritesFromSpritesheet.ts
  types.ts
  parsers/aseprite.ts
  parsers/texturePacker.ts
  utils/slice.ts
  1. Add a toolbar button in SpritesList.js/tsx to open the dialog (a tiny snippet is included in the ZIP).
  2. Run the editor:
cd newIDE/app
npm install
npm start

Alternative (not recommended): patch the installed Electron app by extracting/repacking app.asar and editing the compiled JS. Safer to run from source.

How to use (once wired)

  1. Open a Sprite object and pick/enter an animation.

  2. Click “Import spritesheet” (new toolbar button).

  3. Select:

    • Spritesheet image (PNG),
    • Atlas JSON (Aseprite or TexturePacker),
    • optional format (Auto/Aseprite/TexturePacker) and FPS (fallback when no per-frame durations).

  4. Press Import → frames/resources are created; Aseprite tags become separate animations.

Limitations / open questions

  • This prototype creates individual PNG files (GDevelop Sprite doesn’t reference sub-rects from a single texture today).
  • Per-frame durations: Aseprite’s duration is read but the Sprite editor uses animation-level FPS; the draft sets a default FPS (configurable). Mapping durations precisely would need per-frame timing support or duplicating frames.
  • Web IDE can’t write to disk; desktop write is via window.require (Electron).
  • No UI yet for grid slicing (this draft is atlas-only). Could be added.
  • Needs proper integration with existing external editors patterns (icon, i18n, theming, error toasts, etc.).

Files overview

  • SpriteSheetImportDialog.tsx – React dialog UI (file pickers, preview count, import button).
  • useSpritesheetParser.ts – format auto-detection + dispatch.
  • parsers/aseprite.ts / parsers/texturePacker.ts – minimal JSON readers.
  • utils/slice.ts – HTML canvas slicer (handles rotation).
  • addSpritesFromSpritesheet.ts – writes PNGs (desktop), registers resources, appends sprite frames, and builds animations from tags.
  • PATCHES/SpritesList-toolbar-snippet.diff – tiny example to add the button.

GitHub workflow (quick guide)

Prereqs: Node LTS, Yarn or npm, Git.

  1. Fork + clone
git clone https://github.com/<your-account>/GDevelop.git
cd GDevelop
git remote add upstream https://github.com/GDevelopApp/GDevelop.git
git checkout -b feature/spritesheet-import
  1. Drop in the draft files
    Unzip the starter kit and copy the contents to the same paths in the repo:
newIDE/app/src/ObjectEditor/Editors/SpriteEditor/
  SpriteSheetImportDialog.tsx
  useSpritesheetParser.ts
  addSpritesFromSpritesheet.ts
  types.ts
  parsers/aseprite.ts
  parsers/texturePacker.ts
  utils/slice.ts

Optional: apply the tiny toolbar patch (paths may vary by version):

git apply PATCHES/SpritesList-toolbar-snippet.diff || echo "If this fails, patch SpritesList manually."
  1. Install & run the editor
cd newIDE/app
yarn        # or: npm install
yarn start  # or: npm start
  1. Code style & checks (adjust to repo scripts)
yarn lint || npm run lint        # if available
yarn prettier -w src || npx prettier -w src
  1. Commit & push
git add newIDE/app/src/ObjectEditor/Editors/SpriteEditor
git commit -m "feat(sprite-editor): draft spritesheet importer (Aseprite/TexturePacker)"
git push origin feature/spritesheet-import
  1. Open a PR (Draft)
  • Title: Sprite Editor: draft spritesheet importer (Aseprite/TexturePacker)
  • Include: short description, screenshots/GIF, status = prototype/untested, limitations (desktop write only; web IDE fallback), and a brief test plan.

Maintainer notes

  • Safer path is testing from source (yarn start in newIDE/app).
  • Patching a released Electron build (app.asar) is possible but not recommended for review.
  • If TypeScript causes friction, the files can be converted to plain JS for a quick spike; the logic is framework-agnostic.

Starter kit (same as above):
gdevelop-spritesheet-importer.zip (includes files + a tiny toolbar diff and a short README).

2 Likes
43

I wish people wo have trried this commented their experience