Atlas Visualizer
A Visual Studio Code extension for visualizing and debugging sprite atlas files. Easily view texture regions, coordinates, and properties directly in VS Code.
Features
- 📁 Automatic Detection: Automatically finds
.atlas files in your workspace
- 🔍 Search Regions: Quickly find any sprite/region with
Ctrl+Shift+P → "Atlas Visualizer: Search Regions"
- 📊 Visual Canvas: See all regions drawn on the source texture images
- 📋 Sidebar Explorer: Browse all textures and regions in a tree view
- ℹ️ Detailed Info: View region properties including position, size, rotation, offset, and more
- 🎯 Interactive Selection: Click on regions to highlight them
- 🔄 Rotation Support: Properly handles rotated regions (90° rotations)
- 🎬 Animation Frame Sequencer: Auto-detects numbered frame sequences (e.g.
Walk_001, Walk_002…) and plays them as a live animation preview with configurable FPS, frame stepping, and frame export
Usage
Opening an Atlas File
- Automatic: If you have a
.atlas file in your workspace, it will be detected automatically
- Manual: Use
Ctrl+Shift+P → "Atlas Visualizer: Open Atlas File"
- Context Menu: Right-click on a
.atlas file in the Explorer and select "Open Atlas File"
Viewing Regions
Once an atlas file is loaded:
- Sidebar: Open the "Atlas Visualizer" in the Activity Bar (left sidebar)
- Browse: Expand images to see all their regions
- View: Click on any region to view it in the editor
- Search: Use
Ctrl+Shift+P → "Atlas Visualizer: Search Regions" to quickly find a specific sprite
Features in the Visualizer
- Canvas View: Shows the full texture with all regions outlined in red
- Selected Regions: Highlighted in green when selected
- Hover Tooltips: Hover over regions to see detailed information
- Region List: Click regions in the list to highlight them on the canvas
- Statistics: View total regions, rotated regions, and selected region info
This extension supports the standard TexturePacker/libGDX atlas format:
texture-name.png
size: 2048, 2048
format: RGBA8888
filter: Linear, Linear
repeat: none
sprite-name
rotate: false
xy: 10, 20
size: 100, 150
orig: 100, 150
offset: 0, 0
index: -1
Requirements
- Your atlas file (
.atlas) must be in the same directory as the referenced texture images
- Supported image formats:
.png, .jpg, .jpeg, .webp
Extension Commands
Atlas Visualizer: Open Atlas File - Open an atlas file for visualizationAtlas Visualizer: Search Regions - Search for a specific sprite/regionAtlas Visualizer: Refresh - Refresh the Atlas Visualizer view
Animation Frame Sequencer
When an atlas contains sprite-sheet animation frames named with a numeric suffix (e.g. Explosion_001, Explosion_002, Explosion_003), Atlas Visualizer automatically groups them into playable sequences.
How to use
- Open any atlas file — Atlas Visualizer scans region names automatically
- If sequences are detected, a Sequences section appears at the bottom of the sidebar showing each animation group and its frame count
- Click any sequence to open the Animation Player panel at the bottom of the canvas
- Use the playback controls:
- Play / Pause — toggle the animation loop
- ← / → — step one frame back or forward (auto-pauses)
- FPS slider — adjust playback speed from 1 to 60 fps in real-time
- Click Export Frames to download all frames of the active sequence as individual PNG files in a ZIP archive
Naming conventions detected
Any region whose name ends with a number is eligible. Common patterns:
Walk_001, Walk_002, Walk_003Idle001, Idle002Hit_0, Hit_1, Hit_2Explosion_Frame_01, Explosion_Frame_02
Sequences must have at least 2 frames to appear in the list.
Tips
- Find Images Fast: Use the search command (
Ctrl+Shift+P → Search Regions) instead of browsing through the tree
- Check Rotation: Rotated regions are marked in the region details
- Verify Coordinates: Hover over regions on the canvas to verify positions match your expectations
- Multi-Page Support: If your atlas spans multiple texture pages, each page is listed separately
Known Issues
- Images must be in the same directory as the atlas file
- Only supports 90° rotations (as per standard atlas format)
Release Notes
0.1.6
- Animation Frame Sequencer: auto-detects numbered frame sequences, plays them with configurable FPS, supports frame stepping and PNG export
0.0.1
Initial release:
- Atlas file parsing
- Visual canvas with region highlighting
- Sidebar tree view
- Region search functionality
- Interactive region selection
0.1.1
- Zoom controls
- Improved UI
0.1.2
- Added rotation controls for individual/all regions together
- Added download funcitonality for individual/all regions together
- Improved UI/UX
0.1.3
- Fixed rotation controls such that bounding box does not shift when rotating the frame
- Added theme switching functionality for canvas such that white region/frame are visible easily
0.1.4
- Fixed selection sync: selecting a region in the sidebar now highlights the same region on the canvas and updates the header/stats instantly.
- Added canvas click selection: click a region on the canvas to select it in the sidebar and header.
- Persisted canvas theme: canvas dark/light preference is saved and restored so toggling/selection won't revert the canvas background.
- Center selected region: selecting a region will scroll/center it into view for easier inspection.
Contributing
Found a bug or have a feature request? Please open an issue on GitHub.
License
MIT
