It's on AIR, so I suspect it's built using AS3 and AIR, this is purely assumption my side, but considering his coding history, and the fact that it's an air app.
Ok that's nice to know. I have some experience creating a game prototype with AS3, I wasn't sure regarding the UI. Is there some sort of dedicated UI library/framework being used here? What I'm seeing here looks pretty powerful, but I'm only used to working with AS3 in FlashDevelop, none of the fancy Adobe apps.
It looks like flashbuilder (adobe app), it integrates a whole UI library with extra classes increasing build speed in terms of windows and UI systems (makes that stuff very quick and simple to do - the styling of the UI is also very simple, combines html/css and AS3 - the last time I used it anyway, FB4 first release)
I personally quite like flashbuilder, never used flashdevelop though.
Ok, thanks kaptainkernals. Looks like I should give FlashBuilder a try. It's pretty expensive compared to FlashDevelop (the latter being free), but looks like there's some substantial advantages to it.
I'll stop derailing the thread now!
Was trying to remember the correct name of the language, remembered it now, it's flex. I think you might be able to get some of those classes into flashdevelop, not sure.
Anyway, enough of a derailment, can't wait to see the next update to shoebox.
Yes I am using AS3 and FlashDevelop, no fancy expensive Adobe software.
Here is a screengrab
I just use the FlexSDK (odd name), its the open source SDK to compile AS3 AIR or SWF content. I used the flashdevelop templates and bat scripts to build and test the AIR apps. What I like about AIR so far for ShoeBox is that it is cross platform (mac & PC), I have an update manager and I can do work with very visual stuff without much effort.
As for the UI, its all just sprites & shapes with events turned into custom UI elements. Some pages ago I posted this image that shows how I work with the UI
I use the patch9 system that Android developers use too a lot. Its a way of indicating within the sprite with a certain color where the slice 9 loops are within the image. In my AS3 code I can then automatically read those sprites and draw rectangular areas with them by drawing them into a shape.graphics element.
Thanks for illuminating your process, this is cool to see. I pimp your tools often, they're very useful for all kinds of game dev. Also going to be interesting to my Tech Art students.
Hey renderhjs, this is really a cool project you have going here! I was wondering if you are planning to add support for 16bit pngs?
We are currently moving to a 16bit texture workflow at work and I would really like to use ShoeBox to combine sheets of 16bit pngs rendered from max, but they are getting squashed down to 8bit when I save from ShoeBox.
Yeah the library that I used to encode and decode PNG's is handling just plain 8bits per RGBA channel. That's not something that I can easily change at this point.
I am not sure if you would be more lucky with other 2D packering apps out there as most of them I would imagine use plain or simple PNG encoding and decoding libraries and or do not support more than 8bit per channel.
I wrote also a packer in Unity not long ago - but even in Unity there is no way at this point to save a PNG with more than 8 bit per channel to the hard disk, even if Unity supports more (which I think it does not actually).
The basic idea of this tool is to define 4 sided areas in your source image.
The 2D and photo space behave different. For booth spaces a preview grid shows you if slices are aligned correctly.
Once cool nice feature is that you can transform the slices in local space to extend or trim for example edges or simply move the slice in local space.
fixes for several templates for the Sprite packing
Early monospace support in the Bitmap Font tool. I haven't fully tested it yet but I think it should work fine in most UI frameworks.
Read Sprites: A tool that lets you reverse parse sprites from bitmap fonts or existing sprite sheets. This can be useful in combination with other tools of ShoeBox when you don't like for example the standard packing inside Bitmap Fonts and want to convert them to fixed Frame Sheets.
Frame Sheets: This was before part of the "Ani Frames" tool but it made more sense to split the 2 of them apart. What this tool does is that it packs your sprites, animations etc. in a fixed grid which is easier to parse in your code.
Wow, this is a nice little app i just found today, quite a timesaver.
Thank you for this and kudos for keeping it in development for so long.
Might i persuade you in considering the following addons, if it's not too much trouble.
- Auto cropping bundles of individual sprites, something like "extract sprites" but for a set of images. Keeping the maximum bounding box of the set not of each individual image. Maybe an extra option to crop to closest box(say 96x96) or crop to closest rectangle (eg. 96x 48).I think it's called keeping the image ratio.
- The only thing this app is missing is a sprite animation player, where you can see the animation of various images or sprite sheet, change the preview speed, compare the animation on different background colors, maybe some technical features like calculating the amount of RAM the animation uses (i used to know how this is calculated, something like image width*height*color depth*4 i think).
Thanks again for this great app, you are awesome (but you probably knew that).
Really loving the whole suite, it's such a great set of tools. I had a request concerning the sprite packer, though.
I'm currently looking at using it to atlas 2d fx animations. These tend to have wildly different sizes per frame (think of a slash fx that starts as a dot, grows to a line, ends as a dot), so a regular animsheet is quite wasteful. Would it be possible for the packer to [optionally] include an entry in the xml for the original pivot/center of each sprite? That way when I pull it into Unity, I can read that data and set up my sprites/anims accordingly.
I read your uservoice requests as well and for now here is one option for you:
You can already calculate the original center (pivot) of each sprite Here is a picture that I made for you to better illustrate all these custom shoebox variables
@fw = frame width or total width of the original un-cropped sprite
I could implement variables that would really help you to read out just those center values - but I think that right now you already have all the values exported that you need.
Oh, that's excellent! I hadn't actually looked at the different templates in the dropdown (was using Default with just a couple tweaks to the fields), so all I was seeing in the xml files were x/y/w/h. I had no idea the other formats actually had original frame size info as well (and as you say, with original frame, calculating the pivot is trivial).
Thanks, definitely helped
[edit]
...and that I can just add those entries in the output fields. I facepalmed when I realised I'd entirely overlooked being able to edit the text output
[/edit]
Some upcoming new features that I have been working on recently
New reworked Animation Frames tool
Like before it allows you to drop SWF, GIF or PNG sequences but this time it previews the animation and frames. Another new feature is that you can drag and drop frame sheets (just a single image instead of an animation file) and it will extract all the frames in reading order automatically.
Some additional features in this new tool will be to
nudge and offset frames
delete frames
onion skinning
quickly seeking through the timeline
In order to better detect free form animation sheets I improved the Extract Sprites algorithm. It takes less input values and works now more automatic.
first off, thanks for this great piece of software.
I just generated my first handwritten bitmap font and i was surprised it was so easy to get a great result.
Now i want to use that font in Unity, but the more i research the more confused i get. Do i understand it correctly, that i need uitoolkit to use the generated ".fnt"? I thought i could use bitmap fonts with the Unity custom fonts ".fontsettings". Isn't there a way to convert the .fnt to .fontsettings.. ?
Or is the easiest way to just use Stuff like
the Font setter (https://www.assetstore.unity3d.com/en/#!/content/6594) and start new? I kinda like the shoebox result, and im afraid Font Setter does not adjust the kerning as nice as your software does
as you probably notice, i'm pretty confused
Thanks a lot!
Paul
How does anyone manage to instal Adobe AIR to instal shoebox? I just can't! Adobe killed this so badly, and not in the good way. tex ripper is the beeeest
@Yoji Adobe AIR is now being maintained by a company called Hartman Harman. You can find the end user AIR runtime for download in here: https://airsdk.harman.com/runtime
Replies
I added a basic and advanced tab in the settings UI.
The Animation tool is now split into 2 tools
One generates or modifies frame sequences, the other one creates frame sheets.
I am a bit stuck atm. on some math for the texture extraction - but I hope to have some good progress soon on that as well.
I personally quite like flashbuilder, never used flashdevelop though.
I'll stop derailing the thread now!
Anyway, enough of a derailment, can't wait to see the next update to shoebox.
Here is a screengrab
I just use the FlexSDK (odd name), its the open source SDK to compile AS3 AIR or SWF content. I used the flashdevelop templates and bat scripts to build and test the AIR apps. What I like about AIR so far for ShoeBox is that it is cross platform (mac & PC), I have an update manager and I can do work with very visual stuff without much effort.
As for the UI, its all just sprites & shapes with events turned into custom UI elements. Some pages ago I posted this image that shows how I work with the UI
I use the patch9 system that Android developers use too a lot. Its a way of indicating within the sprite with a certain color where the slice 9 loops are within the image. In my AS3 code I can then automatically read those sprites and draw rectangular areas with them by drawing them into a shape.graphics element.
We are currently moving to a 16bit texture workflow at work and I would really like to use ShoeBox to combine sheets of 16bit pngs rendered from max, but they are getting squashed down to 8bit when I save from ShoeBox.
I am not sure if you would be more lucky with other 2D packering apps out there as most of them I would imagine use plain or simple PNG encoding and decoding libraries and or do not support more than 8bit per channel.
I wrote also a packer in Unity not long ago - but even in Unity there is no way at this point to save a PNG with more than 8 bit per channel to the hard disk, even if Unity supports more (which I think it does not actually).
Direct download link:
ShoeBox_3.5.0_public.air
The biggest update is the Texture Ripper tool which has its own documentation here:
http://renderhjs.net/shoebox/textureRipper.htm
The basic idea of this tool is to define 4 sided areas in your source image.
The 2D and photo space behave different. For booth spaces a preview grid shows you if slices are aligned correctly.
Once cool nice feature is that you can transform the slices in local space to extend or trim for example edges or simply move the slice in local space.
Here is a video showcasing how to use this new tool
[ame="
Other updates and changes include
Thank you for this and kudos for keeping it in development for so long.
Might i persuade you in considering the following addons, if it's not too much trouble.
- Auto cropping bundles of individual sprites, something like "extract sprites" but for a set of images. Keeping the maximum bounding box of the set not of each individual image. Maybe an extra option to crop to closest box(say 96x96) or crop to closest rectangle (eg. 96x 48).I think it's called keeping the image ratio.
- The only thing this app is missing is a sprite animation player, where you can see the animation of various images or sprite sheet, change the preview speed, compare the animation on different background colors, maybe some technical features like calculating the amount of RAM the animation uses (i used to know how this is calculated, something like image width*height*color depth*4 i think).
Thanks again for this great app, you are awesome (but you probably knew that).
a few things I would really love to see getting added for it;
a function so you could more easily work on top or near other shapes.
like different line colors and you have to click a shape so it is active.
Mirror/Flip horizontal option - for now you are only able to rotate the picture. which is already quite nice.
a resize to original ripped pixels -I might have overseen that but getting stretched results back to the original is not easy for now.
a preview mode with disabled blue lines
I'm currently looking at using it to atlas 2d fx animations. These tend to have wildly different sizes per frame (think of a slash fx that starts as a dot, grows to a line, ends as a dot), so a regular animsheet is quite wasteful. Would it be possible for the packer to [optionally] include an entry in the xml for the original pivot/center of each sprite? That way when I pull it into Unity, I can read that data and set up my sprites/anims accordingly.
I read your uservoice requests as well and for now here is one option for you:
You can already calculate the original center (pivot) of each sprite
If you use the Starling XML format for example your loop statement inside the ShoeBox settings looks like this:
So when you parse inside the game code the file, in order to calculate the center you would use something along the lines of:
I could implement variables that would really help you to read out just those center values - but I think that right now you already have all the values exported that you need.
Hope this helps.
Thanks, definitely helped
[edit]
...and that I can just add those entries in the output fields. I facepalmed when I realised I'd entirely overlooked being able to edit the text output
[/edit]
New reworked Animation Frames tool
Like before it allows you to drop SWF, GIF or PNG sequences but this time it previews the animation and frames. Another new feature is that you can drag and drop frame sheets (just a single image instead of an animation file) and it will extract all the frames in reading order automatically.
Some additional features in this new tool will be to
In order to better detect free form animation sheets I improved the Extract Sprites algorithm. It takes less input values and works now more automatic.
Here is another example
And the processed animation sheet
first off, thanks for this great piece of software.
I just generated my first handwritten bitmap font and i was surprised it was so easy to get a great result.
Now i want to use that font in Unity, but the more i research the more confused i get. Do i understand it correctly, that i need uitoolkit to use the generated ".fnt"? I thought i could use bitmap fonts with the Unity custom fonts ".fontsettings". Isn't there a way to convert the .fnt to .fontsettings.. ?
Or is the easiest way to just use Stuff like
the Font setter (https://www.assetstore.unity3d.com/en/#!/content/6594) and start new? I kinda like the shoebox result, and im afraid Font Setter does not adjust the kerning as nice as your software does
as you probably notice, i'm pretty confused
Thanks a lot!
Paul
tex ripper is the beeeest