ShoeBox: 2d gamedev tools

This is a non commercial (free) Adobe AIR app (Win, Mac) that emphasizes on drag and drop tools. The majority of these tools are Game Development related. Its a collection of tools that I developed and use at my work, several other tools are in development and will be released in the future including a SWF animation to Unity converter.

http://renderhjs.net/shoebox/



some tools of this first 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. I use this between my Mac with Unity Iphone and my PC workstation so I can paste text snippets back and forth.


this is a early release, I am sure many of the features will feel even more polished and streamlined in the future but for now expect some errors if you do crazy things (to many files, to large bitmaps as in 8k+).

 

Great tool

 

got some progress with the sprite hull packing algorithm. Obviously in these examples the padding is missing but it should't change much of the compression statistics.



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.

 

A progress video on the Tile Grabber
WIth some sample maps from Bionic Command, Mega Man 4 and a 8x8 GameBoy tile game

http://www.youtube.com/watch?v=vk9NoiW-FKo

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.

 

Very nice

 

updated to version 1.30
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

 

how the fck I missed this one.. thanx. you are making great tools, constantly prolonging my life..

 

Im very interested for the SWFgrabber.

The screen shoot looks good!

 

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.
Once it does ok what it should do I will release an update with a preview on this new tool.

 

I made some improvements today on the Bitmap Font tool. It has now a nicer preview window and I got 90% of the fnt format completed in the exporter. Almost ready to go public, needs some testing with Unity and uiToolkit though before I release it in the wild.

 

Testing the Bitmap Font exporter in Unity3D using uiToolkit as ui framework



I'll create a template for uiToolkit too as it requires some changes such as

• 
  [li]extention to be txt instead of fnt[/li]
  [li]pack in 2x and normal res (if you need that)[/li]
  [li]pack the text texture into another texture atlas with json (as txt extention) file.[/li]

A friend is going to try this tomorrow in Cocos2d to see if this works right out of the box for him.

 

some more tweaking on the Bitmap Font Tool, pretty much done with this tool

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 an be a custom XML, json or anything else.

 

I just released version 1.50
AIR file 1.50 download link



major changes:

• Sprite packer supports now also animated GIF and SWF (AS1,AS2,AS3) files and splits them into individual frames along with the other frames to be packed.
• sprite packer supports iOs _2x convention option to export packed sprite sheets in standard and retina _2x files (uiToolkit for Unity supports this for example).
• Flickr upload supports private uploading now (see settings) and custom tags for each uploaded shoeBox picture.
• Bitmap font plugin added. This tool comes with a CSS export option as well as the famous fnt file for Unity, Cocos 2d Starling or other frameworks. A HTML bitmap font demo is also part of the documentation sample page.
• Added initial help screen to explain the basic controls. It shows only on every major version update, you can show it again by right clicking next to a tool in the shoeBox main area.
• Extract sprites detects automatically transparency. Meaning if a file doesn't have an alpha channel it uses the first color in the upper left corner as transparency masking color.

I'll be creating a few YouTube videos soon to demonstrate some of the new enhancements and tools. Including one that shows how to use the sprite packer and bitmap font tool in conjunction with uiToolkit and Unity3D

 

2 new video tutorials for ShoeBox on YouTube:

Short overview of the flickr Tool

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

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

 

Man, I was just about to write a thread about your awesome tool in the unity gossip forums to praise it's awesomeness when I thought about doing a little forum search first. And like I expected there was a thread that didn't get the well deserved attention because it was created in some weird subforum

I'd suggest you to open up another thread on the Assets and Asset Store or the Unity Gossips.
Man, this tool has to go places !
For our litle game Droppin' Bombs we constantly talked about how important it was to use a custom bitmap font to make the menus and everyplace where font is used, really shine.
And we did it it with creating a png but Blake hacked together the actual .txt file himself. Now your tool covers all these steps at once. How awesome is that !

Will definitely use these on every future project !
Thank you so much for this tool. Now making textools and ShoeBox the only plugins/tools that I ever bothered to install and utilize ever

 

Thanks Acumen,
Maybe I will create another thread, but the way things go right now it doesn't hurt if everything goes a bit slow paced - that gives me more time fleshing out things - and figuring out what ideas will turn into final tools.


Update
ShoeBox_1.60_public.air

some fixes I addressed

• replaced the GIF parsing library to fix the issues people had with some GIF files
• Fixed a stupid error on the CutOut Sprites tool, it should now proper detect all blobs (before it used to skip some on complex sheets).
  
• packing: id name overlay so you can see (if fitting size wise) which id is assigned to which sprite even on animated sprites like GIF or SWF frames
  

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.

 

God.. I just found this. Why I did now?
You tools are AWESOME. Thank you!

 

1.8.0 is now out
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.

 

Auto- masking tool in shoeBox

I pretty much copy bitmaps from Photoshop, Browser, XnView,.. into the clipboard and then click on the tool within ShoeBox to mask it. In order to get good results there should be a background color that is not part of the foreground object.



It assumes at the moment that a solid background fill of the first pixel color is the background. Using a difference mask it then assumes the alpha channel with full anti aliasing. The last step is to create a color map that bleeds over the anti alias pixels.




one more testing image, If I use this input image:



I get this output result:



will be released as part of ShoeBox once its ready

 

Can you add the ability for shoebox to be shutdown after a command has been run?

 

Do you mean when it is triggered from the command line or from within the regular interface?
For command line: Sure can do - might add in the next release an argument for exit after completing the command- I guess that makes it easier to detect if the command has been completed in a scripting environment.

 

Do you mean when it is triggered from the command line or from within the regular interface?
For command line: Sure can do - might add in the next release an argument for exit after completing the command- I guess that makes it easier to detect if the command has been completed in a scripting environment.

 

Excellent, just the command line is what I'm after.

Got a couple more questions:

1) What character sets are allowed? I tried to use chinese characters but didn't have any luck. Would love to use this for my localisation stuff.
2) Can this tool be used for commercial use?

 

Ok, I got chinese characters to work... At least it atlases and creates the txt file, not sure how it looks just yet.

 

1.) Anything UTF-8 I presume, might depend more on Unity or whatever you use to parse the fnt/ txt file.
2.) Yes, it's a free tool, use it for whatever you want to use it for.

 

uploaded 4 new videos today
A update on shoebox will come in in the next few days but should install automatically as since the last release a update manager was added.

Masking flat images

Extract sprites update

Sprite packing update

JPNG bitmaps

 

Hi,

I think there is some issues with "unfiltered" fonts and/or very thin/small fonts
the font mapping is incorrect in these cases ( or one of these ? )

Great tools by the way!

 

I want to pack sprite from folder have sub folder. How can I do it ?

 

I will look into this do you perhaps have an example file for me so I can see exactly what you mean?

Working on that feature, right now it doesn't like it, so sorry not yet supported.


I uploaded today ShoeBox version 2.0.0
http://renderhjs.net/shoebox/air/ShoeBox_2.0.0_public.air




It's main change is some UI enhancements to aid with more hints on how to use the controls. If you hold the mouse for a brief second over a button or tool it reveals the mechanics on how to use each tool or what it actually does.

other changes:

• Middle mouse click repeats the last action and remembers which file was lastly dropped, or what clipboard data was used. This is useful if you need to tweak settings and want to see how things changed. Or when you simply want to update the last change you did in Photoshop for example.
• If you are now using the commandline system it quits the application if all you did was launching shoebox for the command line. This makes it easier for developers to detect when an operation has been finished.
• Flickr upload supports now animated GIF files (useful in conjunction with LICEcap).
• settings and plugin panel support the Enter key and ESC key (confirm / save and cancel).
• improved Canvas component (area where you can pan and zoom)

For the UiToolkit I uploaded today another YouTube video on how to create animated sprites, buttons and bitmap fonts for UiToolkit. The post can be found here: http://forum.unity3d.com/threads/87...nd-it-s-free?p=1013109&viewfull=1#post1013109

linked video

 

ty for the command line exit.

 

I uploaded today another video on how to upload animated GIF's using LICEcap and shoeBox's upload to Flickr feature. LiceCap is a neat little free tool (mac pc) that lets you create little animated GIF files from anywhere on your computer screen.
http://www.cockos.com/licecap/

The last update of ShoeBox added support for uploading animated GIF files to Flickr so that with a simple drag and drop my animated GIF is already on its way to the forums. For more information on how to use the Flickr upload (works with free accounts too) see:
http://renderhjs.net/shoebox/flickrUpload.htm

example GIF

 

hey renderhjs, here a font picture you can use to see the issue I wrote before.

In the options, I chose to display as message "123456789"

If you try to build the font ( with unity default settings ), you can see an offset on some numbers.

 

@Renderhjs
I really like shoebox. It made sprite sheet generation a breeze for UIToolkit.
I only have 2 problems with it:
1. I dont have the option of generating a square spritesheet, while it is always a power of two, it doesnt always stay square. I wanted to have my background and all other ui elements in a single sheet and it generated a sheet that was 4096x2048 which I can tell you really messes up the toolkit
2. When i try to turn it off I get a not responding force close error. I dont know if this has happened to anyone else, and its not really that annoying as i want to close this anyway but thought I should put that out.

Again. Great program.

 

Thx for that, it seems that the pixel island (blob) detection gets stuck at individual pixels per island- this is because of the way some pixels are not connected to form their own blob. For example if you use a bold typeface or make sure the 45 angles connect with another pixels in ▲,►,▼,◄ it will work, an outline effect might do the same so that your stroke width becomes at least 2 pixels or 3. I might have an idea on how to fix this though for you, will tinker about it tonight - thx for the sample file much appreciated.

Yeah just noticed too, UiToolkit doesn't like non-square textures which is a bummer as its obviously a flawed implementation as unity itself pretty much deals with those kind of textures. Will add in an option to force square textures - hopefully out there in a few days. Thx for the feedback.

 

I'm having a problem with the bitmap font generator, if I have the application open before I run the below code from my mono app it works but if shoebox isn't open before hand, it opens, does nothing, then closes.

Any idea what it could be?

Code (csharp):

1. System.Diagnostics.Process.Start("/Applications/ShoeBox.app/Contents/MacOS/Shoebox",
2.                 string.Format("\"plugin=shoebox.plugin.bitmapFontGenerator::PluginBitmapFontGenerator\" \"files={0}\" \"file={1}\" \"fileName={2}\" " +
3.                               "\"txtChars=abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789!?,.:;$%()-+=/\"", file, png, fnt));

 

Yes I am aware of that one, about to push a new version where the command line for mac is fixed. My main platform for development is windows so I didn't get much of a chance so far to test it on the mac. But me and a a friend made it work today on the Mac and as a result of that I fixed a few things which I will push live in a few hours.
Just be patient for now, will have update very soon

 

Cheers mate, happy to wait.. it's free

 

Typical, I find this a day after I pay for Texture Packer Pro.

This looks seriously awesome Renderhjs. Some of my old Uni friends work at Soap in Sydney, you guys and girls do super work.

Seeing as you're providing this for free have you ever considered open sourcing it? A lot of the Unity community have flash development experience as well so you there's a chance you'll get some good contributions that can feed back into it, not to mention all of the other potential 2d game devs around the net that could make great use ot such a flexible tool.

 

Is there a way to increase the default spacing between letters using the font generator?

I'm using standard standard black text with prime31 ui toolkit and it comes out squished together.

 

Figured it out.

 

I'm not sure how it works but is it possible to pass through the name of the font you are using so the letter spacing works as it would in something like bmGlyph?

 

An update should come automatically if you close ShoeBox, or download
ShoeBox_2.1.0

Hi trooper, its fixed
I tried it even with your provided file and now it detects even single pixel islands or small sets of characters at pixel level.



Not included but in development is a Slice-9 or patch-9 grabber and exporter

For those that don't know:
Slice-9 components are images with slice definitions that can scale without loosing proportions like so:

I plan on having the .9.png Android standard export, HTML with css3 export and some Foxhole compatible solution.

 

working on a possible redesign of the UI

• Less ui details / decorations, cleaner look
• More drag- able space
• Tabs with labels

 

Awesome work, that slice exporter would be cool.

I reckon I'll knock up a slice component for Prime31's uitoolkit when you get it ready.

 

I will try to wrap up what I have right now so that it works at least as a preview already. At some point I want to be able to tweak the looping bits and a nice preview area with size variations.

I have a Quick update
as I added Unicode support for the settings so that for example the Bitmap Font tool supports Chinese, Japanese, Russian or other foreign characters as well.

It should update automatically if you quit the app or you can download it from here
ShoeBox 2.2.5

 

Added another Video
For a Chinese user I uploaded this video showing how to use create a Chinese bitmap font (a real one would need some more characters ha ha)

 

Can i change temple of sheet.xml ?

Thanks your tool. I love it.

 

Yes, just go to the settings (right mouse click) and look for these settings

• txtFormatLoop
• txtFormatOuter

they define the output format, so if you change those settings you can actually change the way the output file is formatted. For a detailed description of how to do that and what special code does what have a look here:
http://renderhjs.net/shoebox/bitmapFont.htm
I lined out all the special characters and codes that you can use. And you can always have a look at the different templates that come with it, e.g. how to write a fnt file, or the Starling XML one.

 

I am almost done porting the new UI,
its using a new UI rendering technique which uses Android's Patch .9.png system. Here a screen in the debug mode with wireframes and bounds.



The settings are actually a lot easier to read and manage now I think. There are some new little details in the UI that you might notice if you use it but all in all less UI clutter.


Also pretty much done is a new Pivot Editor for sprites



It allows you to edit pivot points of multiple sprites and or sequences. The way it stores the pivot position within a sprite is by extending the sprite canvas so that the center of the sprite represents the pivot.

I expect this to be released within a few days

 

Feature Request

Any chance of having a command line flag to hide the UI? I'm processing 50+ fonts at a time and it'd be nice to continue working whilst it's processing.