XP Bar

What is the sheet PNG (ui-bar-xp_sheet.png)?

Every animation frame is packed into a single PNG image in rows. Each frame is 32×32 pixels. Your game draws only the rectangles it needs from this image.

What is the sheet JSON (ui-bar-xp_sheet.json)?

This text file describes where each frame sits on the PNG and which frames belong to each animation name (Idle, etc.). It uses Aseprite’s JSON Array format, which many 2D tools understand.

Using them together

The PNG alone does not tell you “where frame 1 of idle is.” The JSON is the map. The game reads the JSON for positions and playback order, then cuts the matching regions from the PNG to animate.

Examples in game engines

• Godot: import the JSON + PNG as Aseprite data into AnimatedSprite2D or SpriteFrames.
• Unity: use 2D Animation or an Aseprite importer from the Asset Store to turn the JSON + PNG into sprite clips.
• Phaser: load.aseprite() reads the JSON and PNG together; this.add.sprite().play() runs the animation.

What is the Aseprite file (ui-bar-xp.aseprite)?

It is the native Aseprite project shipped with this asset. Layers, palettes, animation tags (Idle), and frame timing are preserved so you can customize the art without starting from scratch.

Opening and editing

Install Aseprite (aseprite.org), then open the file with File → Open. Edit frames on the timeline, add layers, or change export tags—changes stay in this project until you export again.

Animation tags

Preview GIFs on this page correspond to tags inside the file (Idle). Renaming or adding tags in Aseprite lets you organize how you export animations.

Relationship to the sheet PNG & JSON

The sheet PNG and JSON in this package were exported from this source. If you change the artwork or tag names, re-export a sprite sheet (File → Export Sprite Sheet) to regenerate matching PNG/JSON for your game.