Overview
Sgg-SpriteEditor brings a full sprite atlas editing environment into VS Code. Open any atlas file, see your sprites on a live canvas, manipulate frames visually, and export in the format your engine expects — without leaving your editor.
Features
| Feature |
Description |
| 🗂️ Custom Editor |
Native editor for *.atlas.json, *.plist, *.atlas.plist, *.atlas |
| 🖼️ Frame Editing |
Move, resize, rotate, duplicate, delete, and rename frames on the canvas |
| ↔️ Transform Tools |
Hand mode, Transform mode, Rectangle multi-select, Create mode |
| 📋 Atlas Outline |
Sidebar tree with lock, visibility, inline rename, and keyboard navigation |
| ⚙️ Batch Image Process |
Convert (PNG/JPG/WebP) or resize entire image folders in one step |
| 🔧 Image Tools |
Smart resize presets, chroma key removal, open external image editor |
| 📤 Multi-Format Export |
JSON, Plist, LibGDX Atlas, custom Handlebars templates, PNG unpack |
Also included
- Split / Grid generation — fill an atlas with uniform cells from name patterns (
<index>, <row>, <col>)
- Batch alignment — left / H-center / right / top / V-center / bottom across multi-selections
- Generate atlas from image — right-click any
.png/.jpg to create or open a matching atlas
- Settings system — per-project
SpriteEditor.Settings.json (grid, guidelines, undo depth)
- Undo / Redo stack — configurable depth, keyboard shortcuts work inside the webview
Quick Start
- Install from the VS Code Marketplace.
- Open a sprite atlas file (
.atlas.json recommended) or right-click any .json in Explorer.
- Choose
Open with Sprite Editor from the context menu.
- Edit frames on the canvas — drag to move, pull handles to resize, use the toolbar for transforms.
- Save (
Ctrl+S) and Export to the format your game engine needs.
Tip: Right-click a .png / .jpg and choose Generate/Open with SpriteEditor to auto-create an atlas pre-filled with the image dimensions.
{
"frames": {
"hero_idle_00": { "frame": { "x": 0, "y": 0, "w": 64, "h": 64 } },
"hero_idle_01": { "frame": { "x": 64, "y": 0, "w": 64, "h": 64 } },
"hero_run_00": { "frame": { "x": 128, "y": 0, "w": 64, "h": 64 } }
},
"meta": {
"app": "sggspriteeditor",
"image": "hero.png",
"size": { "w": 1024, "h": 1024 },
"scale": "1"
}
}
Supported input formats: JSON (Pixi/Phaser), Plist (Cocos2d), LibGDX Atlas.
Explorer Commands
| Command |
Trigger |
Sprite Editor: Open with Sprite Editor |
Right-click any .json file |
Sprite Editor: Batch Image Process |
Right-click any folder |
Sprite Editor: Generate/Open with SpriteEditor |
Right-click any .png / .jpg / .jpeg |
Requirements
- VS Code
^1.105.0
- Atlas PNG/image file alongside the atlas metadata file
Development
git clone https://github.com/SGGames/SpriteEditor-vscode-addon.git
cd SpriteEditor-vscode-addon
npm install
npm run compile # one-time build
npm run watch # rebuild on change
Press F5 in VS Code to start an Extension Development Host.
npm test # run extension tests
npm run lint # ESLint check
Documentation
License
MIT © 2026 SGGames
| |
