ShoeBox: 2d gamedev tools
sublime tool
I posted some stuff before in the what are you working thread. Here is a first public release with some of the tools that I have been working on.
Obviously the high anticipated SWF tween to Unity or texture map and tween data parser are not yet ready but maybe there is some interesting stuff for some of you in this. I am using this at work hence the type of tools in it.
Anyway its non commercial (free) and I will update it every now and then with some fixes and new tools similar to back in the day with TexTools.
http://renderhjs.net/shoebox/
featured tools in this first public release
Sprite Packer
Your typical sprite packer with some unique flavours and quick usage.
Sprite Extractor
Tool that lets you parse sprite islands from a opaque PNG image in a fixed "read" order. All detected image sprites can be saved with names read from a variable array.
SWF/ GIF frames export
Renders either GIF or SWF (including actionscript) frames and puts them either into a sprite sheet or saves them as a image sequence.
Tile Extractor
Early preview of a upcomming Tile extractor tool
Share Folder
Tool to push and pull typical working data from and into. It supports any files you drag on it or clipboard bitmaps or clipboard text data.
Obviously the high anticipated SWF tween to Unity or texture map and tween data parser are not yet ready but maybe there is some interesting stuff for some of you in this. I am using this at work hence the type of tools in it.
Anyway its non commercial (free) and I will update it every now and then with some fixes and new tools similar to back in the day with TexTools.
http://renderhjs.net/shoebox/
featured tools in this first public release
Sprite Packer
Your typical sprite packer with some unique flavours and quick usage.
Sprite Extractor
Tool that lets you parse sprite islands from a opaque PNG image in a fixed "read" order. All detected image sprites can be saved with names read from a variable array.
SWF/ GIF frames export
Renders either GIF or SWF (including actionscript) frames and puts them either into a sprite sheet or saves them as a image sequence.
Tile Extractor
Early preview of a upcomming Tile extractor tool
Share Folder
Tool to push and pull typical working data from and into. It supports any files you drag on it or clipboard bitmaps or clipboard text data.
Replies
Thanks renderhjs!
[edit]
Just found the right click dialog.
[/edit]
I recently made some progress on the future Sprite Hull packing tool:
It generates a vector hull around every sprite (based on transparency using Marching Squares and angle & pixel thresholding / merging). The idea is to make a even more efficient sprite packer as anything that's out there so far, because the biggest bottleneck these days is texture filesize and memory size but not triangle rendering speed. So at the end this tool will generates mesh pieces for each sprite and a up to 30%-40% better use of texture space, by filling in the corners, gaps and holes.
The red corners are rough estimations on which areas of the bounding box are not used, so I can plan better where to initially place sprites. After that there will be some polygon to polygon collision detection and a push / pull force to put them tight together together (obviously with padding space in between them).
But I've just got one problem, I was using this on my laptop with a 1440 * 900 res to make a 1024 * 1024 sprite. But I can't click on the confirm button at the bottom of the window, since it keeps snaping to the top of the screen.
If this whole dialog was at the top you could make a sprite of any size.
Will be fixed in the future
Got a question for ya though, Is there a way to force a particular order of the images as it packs them? I have 12 images and they need to progress from left to right in the proper order. Your packer seems to just pick it's own order for my images
texture packing is not what you want, because they are in a order that makes sense for the most tight and compact packing. What you want is the animation seqence tool.
However right now it doesn´t support yet an image sequence as data input (only single swf or gif files). In its options there is a animation spritesheet option, so it will pack your input sequence in a sprite sheet with constant frame size so its easier to apply or use it for image sequences in engines.
and a test with the Angry birds sprites (from the chrome webstore version). It could be that best fit 90 degrees rotations might improve the result a little bit. Maybe I won't exceed my previously aimed 30% compression compared to the bounding box method.
Next is to finish the mesh generation and adding the padding and improve speed as it can be slow with large assets and loads of them.
WIth some sample maps from Bionic Command, Mega Man 4 and a 8x8 GameBoy tile game
[ame="
Also some SWFgrabber progress
Which is slowly starting to make progress again. It has a better debugging timeline preview and right now I am working on some of the tricky visible true/false states of the elements of a SWF animation.
This is an awesome tool. Any plans for a command line version?
We want to use it on Hero Academy (HeroAcademyApp.com), but we want to integrate it into the build process. That way we can work with loose sprites then pack them when the game builds.
I am using Adobe AIR and the purpose of AIR is primarily to create rich UI- driven apps for Mac and PC. If all you need is texture packing, there is for example Texture Packer which offers a command line version and UI version for booth mac and PC. I have a license for it at work and its pretty good although I still have a few specific feature reasons to build mine.
I don't mind sharing a few insights tough if you need specifics, I have lots of links on texture packing, sample code for several platforms and other free apps that all go in a similar direction.
http://renderhjs.net/shoebox/air/shoeBox_1.30_public.air
documentation
http://renderhjs.net/shoebox/
Quite a lot of bug fixes went into this release but I also managed to release some new toys like the Tile Extractor that can generate a TMX tile map with a tile map based on a screenshot, or the Extract SWF tool that is still in development. Because some tools have actually multi purposes I want to update the documentation in the near future with some practical tutorials on how to use some tools in a different way like creating bitmap fonts using the extract and pack sprite tools.
A overview screen of some of the interesting goodies in this release
Thanks for the amazing tools you are making and sorry for the double post.
I tested your tool days ago and is coming to be helpful. Using "Pack Sprite", the one im very interested with 12 frames (png format, 128x128 size).
Setting crop alpha to False i got this result.
Delicious! but there are 2 options that i believe are fundamental to make the "Pack Sprite" the perfect tool for sprite animations.
1. The order of the sprites, normally from top left to right side, now looks like the order is a bit weird, with non uniform empty spaces in the end.
2. Option to choose how many row and col you want.
I really looking for a tool with this options to make easy uniform sprite sheets.
I hope you can try to add those options if you think are so necessary like i think.
thanks!
EDIT :
I found the option "PowerOfTwo" there automatically cut the empty blocks.
But nothing about the uniform sprite order and the row/col setting.
I think what you are looking for is "Ani to Sheet" which is meant for animations and more uniform sheets that are easier to read in when you write an engine.
Here is an overview of what it does, use the templates from the settings (right click on the Ani to Sheet icon) to get familiar with the settings.
The same should work with image sequences like PNG files rendered from max or maya
I worked today on a Bitmap font genrator (*.fnt table) to be used with common frameworks such as UiToolkit for Unity3D.
The issue with tools such as BMFont from Angelcode and alike is that they don't let you customize the type effects in Photoshop.
My solution expects a PNG image with a fixed character sequence (as defined in the settings). A blob detector finds the characters back and packs the sprites into a texture sheet. From there on the texture and a *.fnt file are exported so they can be used in the engine or framework.
I don't read any kearning data from a font file hence why right now spacings are equal between the bounds of the characters.
1. I wish there was a cancel button. Sometimes I pack the sprites and immediately see that I forgot or added too many sprites. But there is no Cancel, so I save and re-pack. Not a big deal.
2. It's hard to hit the save button on a 2048x2048. The save button is off the screen, and when I move the window it snaps back to the original position.
Thanks for the awesome tool man!
a few weeks ago I was also prototyping some measure and slicing tool
But that is early stuff and again more UI building related
Thanks a lot for the tutorial! yes! you are right, using the "Ani to Sheet".
Thank you for this great tool!
btw, im only tested it with PNG files, what about TGA with Alpha Channel (Transparency Mask)?
TGA, PSD,... maybe in the future. Right now PNG is the easiest as its the most complete format I use in terms of library and tools. But if you have a tool such as XnView it should be easy to setup a auto-converter.
some improvements on the Bitmap Font tool. It has now a nicer preview window and I got 90% of the fnt format completed in the exporter.
A friend is going to try this tomorrow in Cocos2d to see if this works right out of the box for him.
pixel font test
I had to tweak a few things internally to allow detecting such tiny pixel islands as characters but now it works pretty well with pixel fonts too.
Narrow Sans Sarif font
Your typical anti aliased reading font. Even though the kerning is constant here it looks actually pretty decent if not quite good.
Bitmap Font settings
The output format can be customized but will be a *.fnt file (non XML) as a default. But it also can be a custom XML, json or anything else file.
AIR file 1.50 download link
major changes:
I'll be creating a few YouTube videos soon to demonstrate some of the new enhancements and tools.
A few days ago some of our HTML dev's had to solve a tricky font issue in which the client insisted to have a very specific outline effect in HTML (iPad, Android support) that does not work right away in HTML or with CSS.
This is what they ended up with successfully, the text on the ice cream bucket is dynamic and a css driven bitmap font exported from ShoeBox
These are the 2 sprite sheets generated. One for the outline and one as the top one. Booth had different kerning values so they would match perfectly on top of each other.
Once I get my hands on their improved JS code to add the fonts on the fly in the DOM tree I will add a sample kit on my website.
Short overview of the flickr Tool
[ame="
I use the flickr tool everyday at work. If you have a pro account at flickr (e.g. you pay a yearly fee) make sure you check the pro account setting in the settings. Also if you use this at work or NDA stuff make sure you set the public URL setting in the settings to false, otherwise your uploaded pictures will be visible to the entire world.
Creating a Bitmap Font
[ame="
I use right now this feature for a Unity project at work to get PS designed UI's 100% carried over to the Unity build. Usually I use it for bold or style driven fonts like scores, counters etc. that come with some 3d or metal like textures.
I'll be adding more videos in the next few days
It means for me that I don't have any interests in commercialisation on my part, like stripping the app at some point to sell a paid version. It is free as it is and you can use it for whatever you want.
Maybe I should rephrase that- but no worries its just like TexTools: free for anyone in any way to use.
Wow thank you very much, that is very generous
ShoeBox_1.60_public.air
some fixes I addressed
Not in this update yet but...
I also have been working on a new tool that tries to mask a image automatically by providing a separate background only image or assuming a solid background color.
It uses a difference blend to make out the pixels that make out the object we want to extract. On a second pass (not yet done) I want to increase the saturation on aliasing or transparent pixels to get rid of the sampled background pixels.
Here is another example, some of the white textures on the car itself are transparent like the background which is a side effect of this process, but it should provide a nice precise starting mask.
Another nice example with rather unexpected results at first (this one is missing a checker background image in the last result)
I see this as something useful for extracting alpha channels out of merged image data (like the Windows and OSX clipboard data) as well as photography and other source materials.
this was the idea:
right now I have a prototype that I am working on that does something like this
it first pop's up a dialog to choose the target or file you want to address in the command line. After that it will pop up a save dialog where you specify the *.bat file (or bash on mac). After that it opens the bat file in notepad so you can tweak additional values or copy paste the arguments into your script.
Not sure yet about the mac support because I don't use the mac much or at all - so it would be more painful testing it on the mac. I will have a look though on windows to see how far i can get, like cuing up commands, assigning multiple files ect.
In the tool you have a gif to sheet, any interest in add a tool for Sheet to Gif Animation and Sprites to Gif Animation? in case of yes will be cool a option to set the time of the Animation.
Thanks for this great tool
ShoeBox_1.8.0_public.air
Some highlights
Not mentioned in the image but another new tool is the HTML text
http://www.renderhjs.net/shoebox/htmlText.htm
for the web developers out there, might be more something that is used at my work but still useful if you have a mac and want to get rid of control characters.
I'll write up later a more detailed change log as a lot of stuff changed in this release.
Btw. is there an option to write our own templates for packing and bitmap fonts?
If you look at the settings for the bitmap Fonts there are 2 variables "fileFormatLoop" and "fileFormatOuter" which define the file structure of what you are about to export.
The order or structure of those 2 variable is like this
<fileFormatOuter> <fileFormatLoop/> <fileFormatLoop/> <fileFormatLoop/> </fileFormatOuter>where @loop within the "fileFormatOuter" places the looping elements like in this case each character.Characters sequences such as @x, @id, @w etc. within those variable strings get replaced with character or sprite values. More info on all of that here
http://www.renderhjs.net/shoebox/bitmapFont.htm
As for the template dropdown menu:
Sadly there is not an support yet for that, but...
You have now 2 options of exporting your setup and re-use it for future uses or different computers.
If you have a new suggestion for a template and it would be useful to other people as well I am more than happy to pick it up and add it with the next update of shoebox.
There are other tools which do what I need, but i always liked the way you design your programs and how easy to use they are
http://www.ogre3d.org/tikiwiki/Gorilla
Could you provide me some sample files? Is the lookup file ASCI based or a Binary? If it's within my range of possibilities I could create a template for BFG.
Otherwise I'll have a look whenever I have some extra time.
https://github.com/betajaen/gorilla/blob/master/GORILLA_SCHEMA.md
This is the example gorilla file shipping with it:
https://github.com/betajaen/gorilla/blob/master/dejavu.gorilla
That´s why i asked if we/i could change the template , to put it out as something i can work with