Jump to content

Using spritesheets from OpenGameArt.org


Recommended Posts



I was wondering what some of your solutions were for using open sourced artwork (namely spritesheets) from places like OpenGameArt.org. I have found a few spritesheets I'd like to use, but I'm not sure how to go about creating an atlas for them. Some of the sheets are fairly large and to go through and manually find the coordinates of each sprite seems like a waste of time. Is there a good solution for this? Something like a tool that let's me load up a complete sheet and divy up each sprite and generate a .json file?


I only ask because I can't seem to find a good solution to this. I tried an "unpacker" but it doesn't seem to work. It just seems odd that I would need to "unpack" a sheet just to repack it to get a .json file to work with. Maybe I'm going about this all wrong. Anyway, just wanted to know the community's thoughts on this. :)



Link to comment
Share on other sites

Go here and grab this tool : http://renderhjs.net/shoebox/


Download the spritesheet,  open shoebox and drag n drop the spritesheet into the "extract sprites" button.


This will find and make a seperate file for each sprite in the spritesheet. Then create a texture atlas by drag n dropping the sprites you want into the  "sprite sheet" button of shoebox.


When the window that shoes an image created with the selected sprites open do  :



Click the Setting button at the bottom right corner of the Sprite Sheet window

Go to the Advanced Tab

Select pixi.js as a template

Hit apply

The changes will take effect . Then press save on the Sprite Sheet window to create the texture atlas in the same folder as the sprites you drag n dropped.


Grab both the png and js file shoebox created and load it with phaser as you normally do with a texture atlas.

Link to comment
Share on other sites

Shoebox definitely works, but if you wanted something a little lighter, I made a web based spritesheet tool that can do this as well:


Leshy SpriteSheet Tool


To do the remapping, drag and drop the spritesheet or texture atlas onto the page.   If it is a perfect grid, the "Grid Remap" button can extract the sprites.  Otherwise, the "Remap" button will find the sprites in the image.   You can then use the "Prev" and "Next" buttons to cycle through the sprites and name them.   After everything is named, choose a filename and format.   I'm not certain which is best in Phaser, but JSON-TP-Array and JSON-TP-Hash formats are based off of the Texture Packer array and hash JSON formats, and at least one of them should work fine.   The "Save" button will save the new sprite mapping.    You can also remove sprites from the sheet, repack, etc.   Here is a demo video:   (A remapping example is done at 3:31.)




Shoebox is a good choice, but I just wanted to throw this out as another option for quickly building the mappings without leaving the browser.

Link to comment
Share on other sites


  • Recently Browsing   0 members

    • No registered users viewing this page.
  • Create New...