Home Technical Talk

ShoeBox: 2d gamedev tools

2

Replies

  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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
    [ame="http://www.youtube.com/watch?v=6C-OR48x2IM&list=UUthitAX8BC2zolBRP-cHg8Q&index=4&feature=plcp"]ShoeBox: Mask flat images - YouTube[/ame]

    Extract sprites update
    [ame="http://www.youtube.com/watch?v=tkXIUjxv8GE&list=UUthitAX8BC2zolBRP-cHg8Q&index=3&feature=plcp"]ShoeBox: Extract sprites - YouTube[/ame]

    Sprite packing update
    [ame="http://www.youtube.com/watch?v=KVZml3rcS34&list=UUthitAX8BC2zolBRP-cHg8Q&index=1&feature=plcp"]ShoeBox: Sprite packing - YouTube[/ame]

    JPNG bitmaps
    [ame="http://www.youtube.com/watch?v=5OrOQzlMQEk&list=UUthitAX8BC2zolBRP-cHg8Q&index=2&feature=plcp"]ShoeBox: JPNG Bitmaps - YouTube[/ame]
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I uploaded today ShoeBox version 2.0.0
    http://renderhjs.net/shoebox/air/ShoeBox_2.0.0_public.air

    7815729916_023888982f_o.jpg


    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]
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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/

    [ame="http://www.youtube.com/watch?v=t8tzRpwRo5U"]ShoeBox: Upload animated GIF's using LiceCap - YouTube[/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
    7844665812_80ac855cd9_o.gif
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    An update should come automatically if you close ShoeBox, or download
    ShoeBox_2.1.0

    some fixes:

    7989463819_c7ce0ea755_o.jpg

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

    7981596102_b3e114ee86_o.jpg
    For those that don't know:
    Slice-9 components are images with slice definitions that can scale without loosing proportions like so:
    7981651672_f449ba2803_o.gif
    I plan on having the .9.png Android standard export, HTML with css3 export and some Foxhole compatible solution.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    working on a possible redesign of the UI

    7992061741_435856af0c_o.jpg
    • Less ui details / decorations, cleaner look
    • More drag- able space
    • Tabs with labels
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    *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

    7995615608_0d0c6e3d6b_o.jpg
  • Eric Chadwick
    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?
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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
    7996315625_96cbc20d47_o.jpg
    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.
    7996331187_beefdd2f1f_o.jpg

    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]
  • Eric Chadwick
    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.

    ShoeBox_2012-09-17_15-51-37.png
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    @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.
  • Kwramm
    Offline / Send Message
    Kwramm interpolator
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    @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?
  • Kwramm
    Offline / Send Message
    Kwramm interpolator
    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 ;)

    But thanks for taking these concerns serious!
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    @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

    8005161482_edde5e25a2_o.jpg8003010716_ac6dcbc178_o.gif
  • Hecto
    Great tool, keep up with the good work =)

    Though I agree about the UI issue.

    For future features, what do you think of this?
    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.

    (copied from here)
  • Alphavader
    Offline / Send Message
    Alphavader polycounter lvl 11
    @ renderhjs, first of all, thanks for the great tool, really good timesaver !

    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 ;)
  • Kwramm
    Offline / Send Message
    Kwramm interpolator
    love the new ui! thanks
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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.

    8075962057_890130fb16_o.jpg

    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

    8075909688_fe5211138a_o.gif

    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
  • FlyingKiwi
    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! :)
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    After a long break, finally a new public release
    ShoeBox 3.0.0
    Website

    8372465635_13d30c5a7d_o.jpg

    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/

    screenshot_sprites_sheet.jpg

    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.

    screenshot_sprites.jpg

    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.
  • mLichy
  • renderhjs
  • allaze-eroler
    Offline / Send Message
    allaze-eroler polycounter lvl 11
    great celestia ! i never though i could find such software ! i will now use it for to make my games now ! :D 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 ! :D
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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

    8407549415_2a1a0cc749_o.gif

    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.

    8407562165_d783d26603_o.jpg

    8403129097_2c9b6a1466_o.jpg
  • stry
    Offline / Send Message
    stry polycounter lvl 11
    That looks great!

    Big thanks for the ShoeBox, man, it's so handy I can't even tell you.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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:

    8440153443_54b0d7efd3_o.jpg



    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.
  • SpeCter
    Offline / Send Message
    SpeCter polycounter lvl 14
  • Shrike
    Offline / Send Message
    Shrike interpolator
    Bump for enrichment of the game-industry :)
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I added a more detailed manual page:
    http://renderhjs.net/shoebox/manual.htm

    with:
    • Help and assistent systems
    • All shortcuts and mouse controls
    • Settings and config files explained
    • Commandline CMD

    manual_hint_dialogs.jpg


    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:

    8453581018_bd92bc9e4f_o.jpg
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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.

    8490251361_e191896863_o.jpg

    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
  • kio
    Offline / Send Message
    kio polycounter lvl 15
    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 )
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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:

    8505110121_88774d503e_o.jpg

    But this is just optional and it will detect it automatically, and you will be able to just continue the normal way.
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    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.
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Pola wrote: »
    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.
    Hi Pola,
    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.

    8668548476_1a3296ab33_o.gif

    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.

    8667466047_28571e43d8_o.jpg

    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:
    kernings count=760
    kerning first=62  second=62  amount=-1  
    kerning first=61  second=62  amount=-1  
    kerning first=247 second=62  amount=-1  
    kerning first=165 second=247 amount=-2  
    kerning first=165 second=188 amount=-1
    

    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.

    8664809902_d51b23eebe_c.jpg

    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.

    8465114246_946d5c0549_o.jpg

    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:

    8619725571_10f938dc90_o.gif

    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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.

    Playable links:
    iTunes: https://itunes.apple.com/au/app/lynx-lunar-racer/id623623038?mt=8
    Dekstop: http://www.lynxapollo.com.au/game/

    mzl.dgyqnarm.320x480-75.jpgmzl.lhwzbmak.320x480-75.jpgmzl.wjsqhuvd.320x480-75.jpgmzl.pnqulncv.320x480-75.jpg



    The fonts rendered in Unity

    8668719036_f0acfd004e_o.jpg

    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.

    8668728592_7c9c4273ed_o.jpg

    8668729348_7269753b11_o.jpg

    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

    8667626233_e72672c3da_o.jpg

    spritesheet
    8667626859_7597f2c629_o.jpg
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    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?
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Pola wrote: »
    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.
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    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:
    dm2m84.jpg

    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
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    @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

    8688301571_f1f1f5ac3e_o.jpg

    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.
  • Eric Chadwick
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    :) thanks, how old is your son if you don't mind me asking?

    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.
  • Eric Chadwick
    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.
  • IIIHAPPYIII
    Can you tell me what the status is of the Sprite Hull Packer? You talked about it earlier on but I haven't seen anything on it lately.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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

    8751196313_17368d6631_o.jpg

    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="http://www.youtube.com/watch?v=NOvLc8t22tc"]TextureRipper v. 04 demo - YouTube[/ame]
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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.

    8752425830_e36b1eeae8_o.jpg

    Pretty nifty for UI splits or exports. I will try to create some NGUI, starling and other templates or just plain XML likewise.
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    You are doing amazing things, I love this tool! :D

    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
  • Eric Chadwick
    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!
  • Pola
    Offline / Send Message
    Pola polycounter lvl 6
    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.
  • sltrOlsson
    Offline / Send Message
    sltrOlsson polycounter lvl 14
    The texture ripper looks ACE! This MFer needs some frontpage love!
2
Sign In or Register to comment.