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.
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 Unity Community I uploaded today another YouTube video on how to use ShoeBox with UiToolkit. I show how to create or use Buttons, animated Sprites (e.g GIF's or SWF's) and bitmap fonts.
[ame="http://www.youtube.com/watch?v=Px6sRKKwzd4"]ShoeBox: Sample usage for Unity's UiToolkit framework - YouTube[/ame]
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
An update should come automatically if you close ShoeBox, or download ShoeBox_2.1.0
some fixes:
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.
*Quick update*
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
You're awesome. I haven't used these tools, but your updates are great to see!
The term "slice-9"... is this yours, or a standard from elsewhere? How does the large red button example work? Are the multiple rows scaled together to semi-preserve the smooth gradient?
You're awesome. I haven't used these tools, but your updates are great to see!
The term "slice-9"... is this yours, or a standard from elsewhere? How does the large red button example work? Are the multiple rows scaled together to semi-preserve the smooth gradient?
9-Slice is a term Macromedia (now Adobe) coined with Flash and Fireworks
Patch-9 is something I never heard before but is used in the Android world.
Either way this is already a old concept. As per request, here is an example of what that red button would behave or look like in different sizes
The corner pieces remain identical, only the inbetween parts get stretched either only horizontal, only vertical or booth like the middle piece.
Like with some more tricky loop or slice definitions you can even do stuff like these speech bubbles, drop down elements (with a fixed axis) and plenty more.
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)
[ame="http://www.youtube.com/watch?v=KABsHfkd8OU"]ShoeBox: Chinese Bitmap Font example - YouTube[/ame]
What I meant was, the red button looks like it has 8 horizontal slices. Is there a special reasoning behind cutting it up like this? Seems like it could be a way to preserve a gradient when scaling it vertically, if there was a vertical gradient in the source art.
@Eric:
Yeah those multiple sections are because of a uneven gradient / threshold in the settings. That's why I want manual input so you can override or exclude some parts. But in the Android app "9-Patch App" which is part of the Android SDK this would be perfectly doable. It would just distribute the stretch to all sub - loop parts of the particular axis.
But if we are talking CSS3 or other more simple implementations they would only allow 3x3 or 3x1 / 1x3 setups, not complex like in Android's 9-Patch aka .9.png.
Finally got some time to play with it - very nice app!
But is there a chance to include a different UI scheme? My eyesight is not that good and in a studio with the lights on all the time it's really hard to work with it. Your eyes will just try to focus and make sense of those black on dark grey UI elements.
@Kwramm
yeah I am reworking the UI recently as can be see at this post
I might keep that in mind. If you don't mind asking are you using any of the dark themes in Photoshop, Max or alike? And if so are they better readable to you?
I prefer light themes. But personally, if it were up to me to change the UI, I would just add more contrast - the fonts are hard to read for me, even more so on me 30" monitor at home where everything is even smaller than here at work. Or use bold fonts. The default Air UI used by Adobe - the one when installing Air apps - is very readable for me, even though it's dark. I'd say just make everything that's medium greyish much lighter. With the exception of the black on dark-grey tabs the new UI is an improvement!
With the lighting here in the studio I cannot really read the numbers on the tabs (1, 2, 3) unless a tab is selected. It also took me a while to find the close button - it's hard to see for me, plus it's on an unusual location (bottom right).
I have some problems with my eyes + a quite bright work place. But I also know some artists who have worse eye sight than I have - one of them even has one of those super ugly high-contrast windows theme on. But that'd be a bit too much
@Kwramm
Don't worry I will take that into consideration. A few friends at work here mentioned also on the new theme very dark hardly readable tabs. I have a look if by changing the brightness I can keep the mood I want.
edit
Some brighter shades of gray and a selection or drop area animation
Now if only we had a graphical tool to set pivot points and action points, that would be cool! Like, setting several action boxes with their own tags per frame. Boxes could be used for collisions and points for spawning coordinates of, say, bullets, or be used as anchor points for separate images like weapons.
Doing this manually is a big downside of using spritesheets IMO. Professional teams have to build in-house tools to ease the process but they never seem to share the tools, so everyone keeps reinventing the wheel over and over.
Is it Possible to package a spritesheet with saying the exact number of images, horizontal ordered ?
For example, i have 20 Images = 4 different animations, and i want them to go from left to right
on top of each other (4 lines - 5 images each )
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.
Hi! That's a pretty great tool you have there, I've been using it since September.
Are you continuing development ? I'm starting to wonder because the new UI and pivot point feature never seemed to reach your website, which still delivers v2.2.5. Pivot points are a pretty good feature that will save time, providing it does not add huge transparent borders to the resulting image as extracted in game... does it ? ^^
Feature ideas:
As someone else said in some other thread about ShoeBox, being able to add anchor points and extra data to sprites would be nice in that we'd know exactly where to attach items to a character, instead of having to either add coordinates manually to the code or include multiple images of the same item at different positions, "following" the character's animation so it can be attached in the right places.
Action boxes for collision detection would be even more useful, it's a real pain to do it by hand for certain games and even more so when characters are animated and more complex than squares. (e.g. the Street Fighters in 2D use action boxes)
Anyway thanks for Shoebox and I hope you'll be able to keep up development!
If you quit your current ShoeBox it should auto update your existing one. Alternatively you can download it here ShoeBox 3.0.0
We at Soap creative have been using it recently on GangsterSquad a heavy sprite powered 2d game. There is a behind the scenes page here http://labs.soapcreative.com/GangsterSquad/
The new sprite pivot tool for example was created for the project so we could set custom pivot points for every sprite or sprite sets.
A few other feature were also used for this game like symmetry sprite packing but they are not yet available in the public release as they are not very user friendly to use.
A new uservoice page will take care of all the feedback and suggestions. So people can submit bugs to me that I can queue and sort, same with feedback and new ideas.
If you have some ideas add them here http://shoebox.uservoice.com/
I will add soon some new YouTube videos on how to use some of the new features as well as update the website to reflect some of the changes in this release.
great celestia ! i never though i could find such software ! i will now use it for to make my games now ! anyway, the next step would probably packing the 3D uv and rebake them automatically. but i guess it's what "NAPE Mesh Packing" mean for ? can't wait to see it how it work !
Allaze-eroler:
Yes already planned before - I got a basic FBX and OBJ parser in the works. Definitely something I need soon at work for a Unity Project.
I made some progress with my automatic slice-9 (or any slice setup for that matter) detection and realtime resize preview
I am using it right now for some website CSS stuff, in the UI there is also a code output (CSS, xml, engine XYZ,.. ) which I use to copy and paste CSS attributes. The slices themselves are generated as well with the same tool and packed to a minimal size.
I updated the website today and uploaded a couple of new introduction videos for 2 new tools.
Several sub pages have been updated to cover the latest settings and variables that have been added in the new release. In particular I have 2 new pages covering new tools:
Advanced technique: Extracting sprites over sequences and restore their relative positions [ame="http://www.youtube.com/watch?v=RGTupzEnnls"]ShoeBox: Advanced technique: Extracting sprites over sequences and restore their relative positions - YouTube[/ame]
I will push out another update pretty soon that covers some improvements and additions for the bitmap font tool, like importing any UTF-8 text files to generate character sets and settings or tab character support.
Also somewhat related, at work some of my coworkers have been working on this rather complex avatar builder in HTML5. We used ShoeBox and some new updates to generate the massive sprite sheets with CSS-sprite data. All in all I believe they ended up with over 1500 individual sprites all grabbed with the Extract Sprites tool from a frame sequence that flash exported. Here is a zoom out version of all 6 sprite sheets next to each other:
Working at the moment on a automated optical kerning solution that will build a kerning pair table based purely on the shapes of each bitmap letter.
The first step is already done which was detecting with rays certain line heights (shown in red). This will be an advantage when it comes to non western languages as there are not many tools out there for this that support non western characters. Another advantage is that it is completely bitmap based, not taking away the freedom of creating the font which ever way you want.
I found some typical kerning pairs on the internet that I am then looping against and compare for each pair their ideal offset in kerning.
A' AC AG AO AQ AT AU AV AW AY BA BE BL BP BR BU BV BW BY CA CO CR DA DD DE DI DL DM DN DO DP DR DU DV DW DY EC EO FA FC FG FO F. F, GE GO GR GU HO IC IG IO JA JO KO L' LC LT LV LW LY LG LO LU M MG MO NC NG NO OA OB OD OE OF OH OI OK OL OM ON OP OR OT OU OV OW OX OY PA PE PL PO PP PU PY P. P, P; P: QU RC RG RY RT RU RV RW RY SI SM ST SU TA TC TO UA UC UG UO US VA VC VG VO VS WA WC WG WO YA YC YO YS ZO Ac Ad Ae Ag Ao Ap Aq At Au Av Aw Ay Bb Bi Bk Bl Br Bu By B. B, Ca Cr C. C, Da D. D, Eu Ev Fa Fe Fi Fo Fr Ft Fu Fy F. F, F; F: Gu He Ho Hu Hy Ic Id Iq Io It Ja Je Jo Ju J. J, Ke Ko Ku Lu Ly Ma Mc Md Me Mo Nu Na Ne Ni No Nu N. N, Oa Ob Oh Ok Ol O. O, Pa Pe Po Rd Re Ro Rt Ru Si Sp Su S. S, Ta Tc Te Ti To Tr Ts Tu Tw Ty T. T, T; T: Ua Ug Um Un Up Us U. U, Va Ve Vi Vo Vr Vu V. V, V; V: Wd Wi Wm Wr Wt Wu Wy W. W, W; W: Xa Xe Xo Xu Xy Yd Ye Yi Yp Yu Yv Y. Y, Y; Y: ac ad ae ag ap af at au av aw ay ap bl br bu by b. b, ca ch ck da dc de dg do dt du dv dw dy d. d, ea ei el em en ep er et eu ev ew ey e. e, fa fe ff fi fl fo f. f, ga ge gh gl go gg g. g, hc hd he hg ho hp ht hu hv hw hy ic id ie ig io ip it iu iv ja je jo ju j. j, ka kc kd ke kg ko la lc ld le lf lg lo lp lq lu lv lw ly ma mc md me mg mn mo mp mt mu mv my nc nd ne ng no np nt nu nv nw ny ob of oh oj ok ol om on op or ou ov ow ox oy o. o, pa ph pi pl pp pu p. p, qu t. ra rd re rg rk rl rm rn ro rq rr rt rv ry r. r, sh st su s. s, td ta te to t. t, ua uc ud ue ug uo up uq ut uv uw uy va vb vc vd ve vg vo vv vy v. v, wa wx wd we wg wh wo w. w, xa xe xo y. y, ya yc yd ye yo
hey, its a really nice tool with some neat tech going on.
one thing i still miss, is some better control over the "fileGenerate2xSize" option in the texture packer. as its even for iOs pretty useless with the introduction of the ipad retina resolution.
so im still pretty much locked into texture packer for generating different sized atlases of the same source material ( in combination with its "smart folders" its pretty powerful )
I am currently reworking the bitmap font tool, so including the kerning support there will also be a multi row parser for extra large documents. It turned out that one user had a input image that was exceeding 8192 pixels (a lot of characters) and the AIR framework that I use can't operate on any larger images that exceed 8192 pixels either in width or height.
So instead you will be able to use multiple rows (if exceeding the size limit), which looks at the moment like this:
But this is just optional and it will detect it automatically, and you will be able to just continue the normal way.
Hi, I'm not sure if shoebox is capable of this or if there are other options out there that do so. But is there a way to combine atlas's? Such as combining bitmapfonts to be used with other art assets within another atlas? I can combine the texture side with your tool, it's just updating the xml files, or producing a new xml that can be used with the atlas.
Was wondering if it were possible to get a hold of a alpha/beta release with the kerning pair option? It would be really useful for a styled bitmap font I'm using which without kerning pairs looks horrid.
I started to use angelcode's BMFont tool for non-styled fonts but the styled bitmap font I have been exporting the strings from photoshop and adding each one to an atlas, it's wasting too much space now. Going to try use BMFont to output kerning pairs from the font I used and see if that'll work.
If there are other alternatives out there that are recommended please let me know. I've seen some for mac but I have windows.
Was wondering if it were possible to get a hold of a alpha/beta release with the kerning pair option? It would be really useful for a styled bitmap font I'm using which without kerning pairs looks horrid.
Version 3.2.0 has the kerning all working and implemented. I am actually quite proud of how this now works with its all automated optical kerning with quite nice results.
In the settings panel you can define whether you want to build the kerning pairs. I have about 500+ kerning pairs added as a default which I got from a typography website. If 2 characters don't seem to kern at all in your preview window you can add them in this list seperated by a space character.
The 3rd variable is the kerning rays value which determines how many rays should be cast for each bitmap character. This screenshot shows the green rays hitting the bitmap silhouette.
By averaging each side's rays lengths into a volume unit I can then determine the optical kerning as in volume that fits between character pairs.
For each of those kerning pairs it will determine a kerning offset on top of the regular kerning distance. It will store this information in the *.fnt format like this:
But of course this can be fully customized. I will update the documentation page soon with all the added dynamic variables for the output syntax.
For very big bitmap font input bitmaps I rewrote the whole bitmap font parsing part so that it supports multiple rows should you input bitmaps that exceed 8191 in width or height.
This makes sense if your characters have a rather HD resolution or you have a lot of characters like eastern languages.
Another new feature that was added to the sprite packer is the pixel extruding feature.
It lets you extrude border pixels of sprites so that when you render them in hardware acceleration or with texture filtering bordering pixels are preserved at all costs even when the UV coordinates shift.
Lastly a little trick that I have been sharing with some people lately: If you want to force some pixels to connect as one blob or pixel character e.g. in the Bitmap font tool or sprite extractor tool do this:
Add a outline filter in PS to your sprite that you want to merge with its close surrounded pixel islands, make sure that the thickness connects the islands you want to be connected and then change its opacity to 1%. This will trick your eye as you will not be able to see this very opaque black border but it will not trick ShoeBox as it will assume that all those elements are one blob to parse.
A recent game that I worked on and where i used ShoeBox every day was Lynx Lunar Racer. The game was build using Unity and NGUI as UI framework. The fonts in particular were tricky and there was some new stuff I wrote for the bitmap font tool before and after the project. I also used quite a lot the 9-slide tool in ShoeBox for trimming down UI sprites that were designed but not trimmed or reduced by the designers.
All of the fonts were stored in one PSD with slices targeted to different template PNG's that I would then automate with ShoeBox to convert each of them into a Bitmap font file.
The UI turned out to be very clean and very flexible on all the different platforms (android, ios, dekstop, tablet, phone,...). Some more screens of the UI
I've tried the update and still had no luck getting the bitmapFont to look right with the new kerning features.
I believe it looks better, but certain pairs would not look right. An example is the font Segoe UI Bold, with the text "PLAYER" kerning pairs off has the Y biased towards the E and with kerning pairs on it biases towards the A.
It would seem I need some way to manually edit a kerning value for a pair? Or is there some way I can extract the kerning pairs for the font and apply those?
I've tried the update and still had no luck getting the bitmapFont to look right with the new kerning features.
Any sample screenshots and files would help me here a lot. Maybe there are ways I could improve the way I estimate the kerning. Sometimes its about adding another kerning pair to the list in the settings.
Also I pushed an update this morning 3.2.1 http://renderhjs.net/shoebox/
It has a bug fix for the bitmap font on multiple row parsing and some adjustments on the baseline detection for multiple rows.
My styling of the text is fairly basic, I just need a way to use the kerning table that belongs to the font I used. Otherwise seems I'd need to manually edit the font xml after exporting for specific pairs?
Here is a picture showing photoshop text compared to the shoebox previews and their settings:
@Pola: I'll have a look if I can come up with a better way. I might introduce a 2nd kerning value for minimum spacing and the other one for the desired spacing, something along those lines might prevent characters from moving into each other while still allowing to estimate the ideal kerning space above all kerning sets on average.
Meanwhile, or for a longer time already I have been working on a PSD splitter
The basic idea is that you can drag and drop PSD files and it will search for certain layers and export them cropped or uncropped. Some filters that I came up with:
ignore background or canvas sized layers (usually background elements)
ignore layers that have a blend mode
ignore layers that have bounds smaller than x-size
layer name patterns
The PSD parsing library that I use has its limitations and complex vector shapes or smart objects are not supported or break the parsing process but as it is right now it could be pretty useful and powerful.
This set of tools is so awesome. Huge kudos to you for making and sharing them.
I used TexRipper the other day to help my son do a homework assignment. Any plans to integrate it into ShoeBox? I had to track the installer down, looking in the PC thread. Would be nice to have it inside ShoeBox.
He's 13. Wow, that dates me, haha. His homework assignment was to build a model of the Roman colliseum, so we used texRipper to grab a vertical strip of arches from a photo, which we printed in a row to stick on the outside facade of his model. Worked really well. He was wowed by the tool, the editable splines and the live output preview. Good stuff!
Recently I also recommended ShoeBox to a client who's is making side-scrollers. They were very impressed with your toolset.
The sprite hull packer is a awesome idea but the prototypes I had so far were not close to perfect or what I would call use able. Some polygons were intersecting and the simulation was always random which means I can't re-peat the same simulation which would be essential for a tweak able tool.
The other thing I wanted to avoid was the time it takes to simulate - ideally it would be close to instant and not like pelt mapping from seconds into the minutes.
The PSD splitter is pretty much done and I am wrapping it up now. Meanwhile I have been starting to add TexRipper into ShoeBox
Its a texture extraction tool (for texture artists mainly I guess) that I started some years ago but didn't had the time to continue it back then. The whole thread can be found here: http://www.polycount.com/forum/showthread.php?t=54694
Almost forgot, here is a screenshot of the PSD splitter exporting into a HTML <div> document
What it does: It splits the PSD layers apart into separate PNG files and creates a text file with the file names, x,y positions, width / height etc. attributes.
You can see the PSD file on the right, since I checked the option "Ignore layer no bkg size" (will rename some of those variables) it actually skipped any background layer that exceeds or is equal to the PSD document size.
Pretty nifty for UI splits or exports. I will try to create some NGUI, starling and other templates or just plain XML likewise.
The split example shows some of the elements have been cropped losing information they had in the psd version, noticeable one is the rounded slider on the bottom right. Seems to have extracted the shadows properly but has cropped the handle to the bounds of the sliders track. Is that a bug or intended through settings? Is the splitter able to treat some content as slice 3/9?
I liked the sprite hull packing preview when it was there. Haven't used a physics lib myself but a bit of googling talked about stepping and how it can come out of sync with visual rendering and the solutions to deal with keeping the physics update as consistent as possible to be able to replay. Though they say while you can get a fairly consistent sim on the same pc it may play differently on another pc.
Guessing you already know all this though so I'm probably not too much help, initially I thought it would be as simple as storing a seed value or something :P
I used Shoebox's SpriteSheet today to make a reference sheet of images to refer to while I'm modeling. The packing tool is really great for this... makes a quick and easy refsheet that's packed as small as possible while keeping all the images at 100% scale. Thanks Hendrick!
Downloaded 3.30 from your site and found the splitPSD tool options are different from the image shown above, a layer style(drop shadow) applied to a font is ignored. If I drag the psd containing the same font layer into the bitmapfont tool which handles the psd differently, the drop shadow didn't come out right, exporting to a .png worked fine though.
I was playing with shoebox and angelcode bitmap font tools using a plain font with no layer style in shoebox with a .png source. I copied over the kerning pair information from angelcode into shoebox's xml file and tried it out in starling as a bitmap font. While the text was laid out a little different it didn't fix the issues I had, converted the bitmapfont that angelcode exported to be usable by shoebox as well. Swapped in angelcodes kerning again and I would have thought the bitmap font would look the same switching between the two, but that's not the case. I can understand line heights/spaces being different but the words should only have different spacing based on their kerning right? Which means shoebox is setting different width/height for each letter than angelcode?
I think that is the cause of problems I had been happening rather than the kerning.
Replies
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
[ame="
Extract sprites update
[ame="
Sprite packing update
[ame="
JPNG bitmaps
[ame="
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:
For the Unity Community I uploaded today another YouTube video on how to use ShoeBox with UiToolkit. I show how to create or use Buttons, animated Sprites (e.g GIF's or SWF's) and bitmap fonts.
[ame="
http://www.cockos.com/licecap/
[ame="
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
ShoeBox_2.1.0
some fixes:
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.
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
The term "slice-9"... is this yours, or a standard from elsewhere? How does the large red button example work? Are the multiple rows scaled together to semi-preserve the smooth gradient?
- 9-Slice is a term Macromedia (now Adobe) coined with Flash and Fireworks
- Patch-9 is something I never heard before but is used in the Android world.
Either way this is already a old concept. As per request, here is an example of what that red button would behave or look like in different sizesThe corner pieces remain identical, only the inbetween parts get stretched either only horizontal, only vertical or booth like the middle piece.
Like with some more tricky loop or slice definitions you can even do stuff like these speech bubbles, drop down elements (with a fixed axis) and plenty more.
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)
[ame="
Yeah those multiple sections are because of a uneven gradient / threshold in the settings. That's why I want manual input so you can override or exclude some parts. But in the Android app "9-Patch App" which is part of the Android SDK this would be perfectly doable. It would just distribute the stretch to all sub - loop parts of the particular axis.
But if we are talking CSS3 or other more simple implementations they would only allow 3x3 or 3x1 / 1x3 setups, not complex like in Android's 9-Patch aka .9.png.
But is there a chance to include a different UI scheme? My eyesight is not that good and in a studio with the lights on all the time it's really hard to work with it. Your eyes will just try to focus and make sense of those black on dark grey UI elements.
yeah I am reworking the UI recently as can be see at this post
I might keep that in mind. If you don't mind asking are you using any of the dark themes in Photoshop, Max or alike? And if so are they better readable to you?
With the lighting here in the studio I cannot really read the numbers on the tabs (1, 2, 3) unless a tab is selected. It also took me a while to find the close button - it's hard to see for me, plus it's on an unusual location (bottom right).
I have some problems with my eyes + a quite bright work place. But I also know some artists who have worse eye sight than I have - one of them even has one of those super ugly high-contrast windows theme on. But that'd be a bit too much
But thanks for taking these concerns serious!
Don't worry I will take that into consideration. A few friends at work here mentioned also on the new theme very dark hardly readable tabs. I have a look if by changing the brightness I can keep the mood I want.
edit
Some brighter shades of gray and a selection or drop area animation
Though I agree about the UI issue.
For future features, what do you think of this?
I have a few questions, allready made a thread
Is it Possible to package a spritesheet with saying the exact number of images, horizontal ordered ?
For example, i have 20 Images = 4 different animations, and i want them to go from left to right
on top of each other (4 lines - 5 images each )
Thanks again,
greets
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
Are you continuing development ? I'm starting to wonder because the new UI and pivot point feature never seemed to reach your website, which still delivers v2.2.5. Pivot points are a pretty good feature that will save time, providing it does not add huge transparent borders to the resulting image as extracted in game... does it ? ^^
Feature ideas:
As someone else said in some other thread about ShoeBox, being able to add anchor points and extra data to sprites would be nice in that we'd know exactly where to attach items to a character, instead of having to either add coordinates manually to the code or include multiple images of the same item at different positions, "following" the character's animation so it can be attached in the right places.
Action boxes for collision detection would be even more useful, it's a real pain to do it by hand for certain games and even more so when characters are animated and more complex than squares. (e.g. the Street Fighters in 2D use action boxes)
Anyway thanks for Shoebox and I hope you'll be able to keep up development!
ShoeBox 3.0.0
Website
If you quit your current ShoeBox it should auto update your existing one. Alternatively you can download it here ShoeBox 3.0.0
We at Soap creative have been using it recently on GangsterSquad a heavy sprite powered 2d game. There is a behind the scenes page here http://labs.soapcreative.com/GangsterSquad/
The new sprite pivot tool for example was created for the project so we could set custom pivot points for every sprite or sprite sets.
A few other feature were also used for this game like symmetry sprite packing but they are not yet available in the public release as they are not very user friendly to use.
A new uservoice page will take care of all the feedback and suggestions. So people can submit bugs to me that I can queue and sort, same with feedback and new ideas.
If you have some ideas add them here
http://shoebox.uservoice.com/
I will add soon some new YouTube videos on how to use some of the new features as well as update the website to reflect some of the changes in this release.
Yes already planned before - I got a basic FBX and OBJ parser in the works. Definitely something I need soon at work for a Unity Project.
I made some progress with my automatic slice-9 (or any slice setup for that matter) detection and realtime resize preview
I am using it right now for some website CSS stuff, in the UI there is also a code output (CSS, xml, engine XYZ,.. ) which I use to copy and paste CSS attributes. The slices themselves are generated as well with the same tool and packed to a minimal size.
Big thanks for the ShoeBox, man, it's so handy I can't even tell you.
Several sub pages have been updated to cover the latest settings and variables that have been added in the new release. In particular I have 2 new pages covering new tools:
And 3 new videos
I will push out another update pretty soon that covers some improvements and additions for the bitmap font tool, like importing any UTF-8 text files to generate character sets and settings or tab character support.
http://renderhjs.net/shoebox/manual.htm
with:
Also somewhat related, at work some of my coworkers have been working on this rather complex avatar builder in HTML5. We used ShoeBox and some new updates to generate the massive sprite sheets with CSS-sprite data. All in all I believe they ended up with over 1500 individual sprites all grabbed with the Extract Sprites tool from a frame sequence that flash exported. Here is a zoom out version of all 6 sprite sheets next to each other:
The first step is already done which was detecting with rays certain line heights (shown in red). This will be an advantage when it comes to non western languages as there are not many tools out there for this that support non western characters. Another advantage is that it is completely bitmap based, not taking away the freedom of creating the font which ever way you want.
I found some typical kerning pairs on the internet that I am then looping against and compare for each pair their ideal offset in kerning.
A' AC AG AO AQ AT AU AV AW AY BA BE BL BP BR BU BV BW BY CA CO CR DA DD DE DI DL DM DN DO DP DR DU DV DW DY EC EO FA FC FG FO F. F, GE GO GR GU HO IC IG IO JA JO KO L' LC LT LV LW LY LG LO LU M MG MO NC NG NO OA OB OD OE OF OH OI OK OL OM ON OP OR OT OU OV OW OX OY PA PE PL PO PP PU PY P. P, P; P: QU RC RG RY RT RU RV RW RY SI SM ST SU TA TC TO UA UC UG UO US VA VC VG VO VS WA WC WG WO YA YC YO YS ZO Ac Ad Ae Ag Ao Ap Aq At Au Av Aw Ay Bb Bi Bk Bl Br Bu By B. B, Ca Cr C. C, Da D. D, Eu Ev Fa Fe Fi Fo Fr Ft Fu Fy F. F, F; F: Gu He Ho Hu Hy Ic Id Iq Io It Ja Je Jo Ju J. J, Ke Ko Ku Lu Ly Ma Mc Md Me Mo Nu Na Ne Ni No Nu N. N, Oa Ob Oh Ok Ol O. O, Pa Pe Po Rd Re Ro Rt Ru Si Sp Su S. S, Ta Tc Te Ti To Tr Ts Tu Tw Ty T. T, T; T: Ua Ug Um Un Up Us U. U, Va Ve Vi Vo Vr Vu V. V, V; V: Wd Wi Wm Wr Wt Wu Wy W. W, W; W: Xa Xe Xo Xu Xy Yd Ye Yi Yp Yu Yv Y. Y, Y; Y: ac ad ae ag ap af at au av aw ay ap bl br bu by b. b, ca ch ck da dc de dg do dt du dv dw dy d. d, ea ei el em en ep er et eu ev ew ey e. e, fa fe ff fi fl fo f. f, ga ge gh gl go gg g. g, hc hd he hg ho hp ht hu hv hw hy ic id ie ig io ip it iu iv ja je jo ju j. j, ka kc kd ke kg ko la lc ld le lf lg lo lp lq lu lv lw ly ma mc md me mg mn mo mp mt mu mv my nc nd ne ng no np nt nu nv nw ny ob of oh oj ok ol om on op or ou ov ow ox oy o. o, pa ph pi pl pp pu p. p, qu t. ra rd re rg rk rl rm rn ro rq rr rt rv ry r. r, sh st su s. s, td ta te to t. t, ua uc ud ue ug uo up uq ut uv uw uy va vb vc vd ve vg vo vv vy v. v, wa wx wd we wg wh wo w. w, xa xe xo y. y, ya yc yd ye yo
one thing i still miss, is some better control over the "fileGenerate2xSize" option in the texture packer. as its even for iOs pretty useless with the introduction of the ipad retina resolution.
so im still pretty much locked into texture packer for generating different sized atlases of the same source material ( in combination with its "smart folders" its pretty powerful )
So instead you will be able to use multiple rows (if exceeding the size limit), which looks at the moment like this:
But this is just optional and it will detect it automatically, and you will be able to just continue the normal way.
I started to use angelcode's BMFont tool for non-styled fonts but the styled bitmap font I have been exporting the strings from photoshop and adding each one to an atlas, it's wasting too much space now. Going to try use BMFont to output kerning pairs from the font I used and see if that'll work.
If there are other alternatives out there that are recommended please let me know. I've seen some for mac but I have windows.
as of just now I released ShoeBox 3.2.0
download available at:
http://renderhjs.net/shoebox
Version 3.2.0 has the kerning all working and implemented. I am actually quite proud of how this now works with its all automated optical kerning with quite nice results.
In the settings panel you can define whether you want to build the kerning pairs. I have about 500+ kerning pairs added as a default which I got from a typography website. If 2 characters don't seem to kern at all in your preview window you can add them in this list seperated by a space character.
The 3rd variable is the kerning rays value which determines how many rays should be cast for each bitmap character. This screenshot shows the green rays hitting the bitmap silhouette.
By averaging each side's rays lengths into a volume unit I can then determine the optical kerning as in volume that fits between character pairs.
For each of those kerning pairs it will determine a kerning offset on top of the regular kerning distance. It will store this information in the *.fnt format like this:
But of course this can be fully customized. I will update the documentation page soon with all the added dynamic variables for the output syntax.
For very big bitmap font input bitmaps I rewrote the whole bitmap font parsing part so that it supports multiple rows should you input bitmaps that exceed 8191 in width or height.
This makes sense if your characters have a rather HD resolution or you have a lot of characters like eastern languages.
Another new feature that was added to the sprite packer is the pixel extruding feature.
It lets you extrude border pixels of sprites so that when you render them in hardware acceleration or with texture filtering bordering pixels are preserved at all costs even when the UV coordinates shift.
Lastly a little trick that I have been sharing with some people lately: If you want to force some pixels to connect as one blob or pixel character e.g. in the Bitmap font tool or sprite extractor tool do this:
Add a outline filter in PS to your sprite that you want to merge with its close surrounded pixel islands, make sure that the thickness connects the islands you want to be connected and then change its opacity to 1%. This will trick your eye as you will not be able to see this very opaque black border but it will not trick ShoeBox as it will assume that all those elements are one blob to parse.
Playable links:
iTunes: https://itunes.apple.com/au/app/lynx-lunar-racer/id623623038?mt=8
Dekstop: http://www.lynxapollo.com.au/game/
The fonts rendered in Unity
All of the fonts were stored in one PSD with slices targeted to different template PNG's that I would then automate with ShoeBox to convert each of them into a Bitmap font file.
The UI turned out to be very clean and very flexible on all the different platforms (android, ios, dekstop, tablet, phone,...). Some more screens of the UI
spritesheet
I believe it looks better, but certain pairs would not look right. An example is the font Segoe UI Bold, with the text "PLAYER" kerning pairs off has the Y biased towards the E and with kerning pairs on it biases towards the A.
It would seem I need some way to manually edit a kerning value for a pair? Or is there some way I can extract the kerning pairs for the font and apply those?
Also I pushed an update this morning 3.2.1
http://renderhjs.net/shoebox/
It has a bug fix for the bitmap font on multiple row parsing and some adjustments on the baseline detection for multiple rows.
Here is a picture showing photoshop text compared to the shoebox previews and their settings:
I've uploaded the PSD with two .png files(also as smartObjects in the PSD) that can be given to shoebox, far as I know they use the default txt Chars in shoebox's settings:
http://www.speedyshare.com/ktSB3/download/shoeBox-issue.zip
Meanwhile, or for a longer time already I have been working on a PSD splitter
The basic idea is that you can drag and drop PSD files and it will search for certain layers and export them cropped or uncropped. Some filters that I came up with:
- ignore background or canvas sized layers (usually background elements)
- ignore layers that have a blend mode
- ignore layers that have bounds smaller than x-size
- layer name patterns
The PSD parsing library that I use has its limitations and complex vector shapes or smart objects are not supported or break the parsing process but as it is right now it could be pretty useful and powerful.I used TexRipper the other day to help my son do a homework assignment. Any plans to integrate it into ShoeBox? I had to track the installer down, looking in the PC thread. Would be nice to have it inside ShoeBox.
Yes texRipper is intended to be added or getting its own improved app. There is already a suggestion on the feedback page:
https://shoebox.uservoice.com/forums/190417-general/suggestions/3543726-add-textureripper-into-shoebox-and-improve-it
At some point I have to reevaluate again the next priorities on my to do list. Including and improving texRipper might be one of them.
Recently I also recommended ShoeBox to a client who's is making side-scrollers. They were very impressed with your toolset.
The other thing I wanted to avoid was the time it takes to simulate - ideally it would be close to instant and not like pelt mapping from seconds into the minutes.
The PSD splitter is pretty much done and I am wrapping it up now. Meanwhile I have been starting to add TexRipper into ShoeBox
Its a texture extraction tool (for texture artists mainly I guess) that I started some years ago but didn't had the time to continue it back then. The whole thread can be found here:
http://www.polycount.com/forum/showthread.php?t=54694
Here is a video of what it can do
[ame="
What it does: It splits the PSD layers apart into separate PNG files and creates a text file with the file names, x,y positions, width / height etc. attributes.
You can see the PSD file on the right, since I checked the option "Ignore layer no bkg size" (will rename some of those variables) it actually skipped any background layer that exceeds or is equal to the PSD document size.
Pretty nifty for UI splits or exports. I will try to create some NGUI, starling and other templates or just plain XML likewise.
The split example shows some of the elements have been cropped losing information they had in the psd version, noticeable one is the rounded slider on the bottom right. Seems to have extracted the shadows properly but has cropped the handle to the bounds of the sliders track. Is that a bug or intended through settings? Is the splitter able to treat some content as slice 3/9?
I liked the sprite hull packing preview when it was there. Haven't used a physics lib myself but a bit of googling talked about stepping and how it can come out of sync with visual rendering and the solutions to deal with keeping the physics update as consistent as possible to be able to replay. Though they say while you can get a fairly consistent sim on the same pc it may play differently on another pc.
http://deltaluca.me.uk/forum/index.php/mv/msg/834/4803/d192da8808b005c21e97ac417ff4186b/#msg_4803
http://blog.allanbishop.com/box-2d-2-1a-tutorial-part-10-fixed-time-step/
https://github.com/alamboley/Citrus-Engine/issues/22
Guessing you already know all this though so I'm probably not too much help, initially I thought it would be as simple as storing a seed value or something :P
I was playing with shoebox and angelcode bitmap font tools using a plain font with no layer style in shoebox with a .png source. I copied over the kerning pair information from angelcode into shoebox's xml file and tried it out in starling as a bitmap font. While the text was laid out a little different it didn't fix the issues I had, converted the bitmapfont that angelcode exported to be usable by shoebox as well. Swapped in angelcodes kerning again and I would have thought the bitmap font would look the same switching between the two, but that's not the case. I can understand line heights/spaces being different but the words should only have different spacing based on their kerning right? Which means shoebox is setting different width/height for each letter than angelcode?
I think that is the cause of problems I had been happening rather than the kerning.