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)

Usage

Opening an Atlas File

1. Automatic: If you have a .atlas file in your workspace, it will be detected automatically
2. Manual: Use Ctrl+Shift+P → "Atlas Visualizer: Open Atlas File"
3. Context Menu: Right-click on a .atlas file in the Explorer and select "Open Atlas File"

Viewing Regions

Once an atlas file is loaded:

1. Sidebar: Open the "Atlas Visualizer" in the Activity Bar (left sidebar)
2. Browse: Expand images to see all their regions
3. View: Click on any region to view it in the editor
4. 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

Atlas File Format

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 visualization
• Atlas Visualizer: Search Regions - Search for a specific sprite/region
• Atlas Visualizer: Refresh - Refresh the Atlas Visualizer view

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.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