jackwkinsey Posted October 13, 2014 Share Posted October 13, 2014 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! Link to comment Share on other sites More sharing options...
j0hnskot Posted October 13, 2014 Share Posted October 13, 2014 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 windowGo to the Advanced TabSelect pixi.js as a templateHit applyThe 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 More sharing options...
jackwkinsey Posted October 13, 2014 Author Share Posted October 13, 2014 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! Link to comment Share on other sites More sharing options...
dhaber Posted October 15, 2014 Share Posted October 15, 2014 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. j0hnskot 1 Link to comment Share on other sites More sharing options...
valueerror Posted October 16, 2014 Share Posted October 16, 2014 this tool looks awesome.. unfortunately the website is down :/ Link to comment Share on other sites More sharing options...
Recommended Posts