Home Technical Talk

ShoeBox: 2d gamedev tools



  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Progress has been a little bit slow recently but here are some UI changes that will be in the new version

    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.
  • Xoliul
    Offline / Send Message
    Xoliul polycounter lvl 10
    Hey man, I'm curious what you are writing these tools in ?
  • kaptainkernals
    Offline / Send Message
    kaptainkernals polycounter lvl 10
    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.
  • Xoliul
    Offline / Send Message
    Xoliul polycounter lvl 10
    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.
  • kaptainkernals
    Offline / Send Message
    kaptainkernals polycounter lvl 10
    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.
  • Xoliul
    Offline / Send Message
    Xoliul polycounter lvl 10
    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!
  • kaptainkernals
    Offline / Send Message
    kaptainkernals polycounter lvl 10
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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.
  • Eric Chadwick
    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.
  • mbknielsen
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    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).
  • mbknielsen
    Thanks for the quick reply. I've tried a lot of different packer apps and they all return 8bit :/
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I silently released an update a few days ago but got only today the time to update the documentation and create a video for the new changes.

    Direct download link:


    The biggest update is the Texture Ripper tool which has its own documentation here:

    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=" TextureRipper - YouTube[/ame]

    Other updates and changes include
    • 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.
  • Bleed
    Offline / Send Message
    Bleed polycounter lvl 5
    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).
  • Farfarer
    Offline / Send Message
    Farfarer Polycount Sponsor
    Awesome, thanks. Was digging out the older version of TexRipper just the other day.
  • myclay
    Offline / Send Message
    myclay polycounter lvl 7
    Texripper is really well working and a fun tool to play with :)

    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

  • LoTekK
    Offline / Send Message
    LoTekK polycounter lvl 12
    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.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Hi LoteKK

    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
    • @fh = frame height ...
    • @fy = frame y offset
    • @fx = frame x offset
    • @w = sprite width (cropped)
    • @h = sprite height (cropped)

    If you use the Starling XML format for example your loop statement inside the ShoeBox settings looks like this:
    \t<SubTexture name="@id"\tx="@x"\ty="@y"\twidth="@w"\theight="@h" frameX="[email protected]" frameY="[email protected]" frameWidth="@fw" frameHeight="@fh"/>\n

    So when you parse inside the game code the file, in order to calculate the center you would use something along the lines of:
    center.x = @fw / 2 - @fx;
    center.y = @fh / 2 - @fy;

    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.
  • LoTekK
    Offline / Send Message
    LoTekK polycounter lvl 12
    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 :)

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


    Here is another example

    And the processed animation sheet
  • Lamont
    Offline / Send Message
    Lamont polycounter lvl 11
    Thank you very much!!
  • yobllud

    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 :D
    Thanks a lot!
  • VDK
    Thanks for your work on this tools and on the texripper as well.
  • mikiex
    Offline / Send Message
    mikiex polycounter lvl 5
    Just a little bug, if you output a font with 2x turned on, the kerning values for the non-2x are not halved as they need to be.

Sign In or Register to comment.