Sign in to follow this  
jackwkinsey

Using spritesheets from OpenGameArt.org

Recommended Posts

Hello,

 

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

 

Thanks!

Share this post


Link to post
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.

Share this post


Link to post
Share on other sites

Holy crap! That is amazing! I had never heard of this tool before! It works extremely well! Thanks!

 

Sorry for all the exclamation points, but I'm just very excited about this. I cannot believe this shoebox tool never came up in any of my research when trying to solve this issue!

 

Thanks again!

Share this post


Link to post
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.)

 

 https://www.youtube.com/watch?v=X67qLM8WcvE

 

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.

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

  • Recently Browsing   0 members

    No registered users viewing this page.