Home Technical Talk

ShoeBox: 2d gamedev tools

13
sublime tool
Offline / Send Message
renderhjs sublime tool
I posted some stuff before in the what are you working thread. Here is a first public release with some of the tools that I have been working on.
Obviously the high anticipated SWF tween to Unity or texture map and tween data parser are not yet ready but maybe there is some interesting stuff for some of you in this. I am using this at work hence the type of tools in it.
Anyway its non commercial (free) and I will update it every now and then with some fixes and new tools similar to back in the day with TexTools.
ui_screenshot_1.0.png

http://renderhjs.net/shoebox/

featured tools in this first public release

Sprite Packer
Your typical sprite packer with some unique flavours and quick usage.
screenshot_spritePack.jpg

Sprite Extractor
Tool that lets you parse sprite islands from a opaque PNG image in a fixed "read" order. All detected image sprites can be saved with names read from a variable array.
screenshot_extractBlobs.jpg

SWF/ GIF frames export
Renders either GIF or SWF (including actionscript) frames and puts them either into a sprite sheet or saves them as a image sequence.
screenshot_aniSheet.jpg

Tile Extractor
Early preview of a upcomming Tile extractor tool
screenshot_tileExtract.jpg

Share Folder
Tool to push and pull typical working data from and into. It supports any files you drag on it or clipboard bitmaps or clipboard text data.
screenshot_shareFolder.jpg

Replies

  • LoTekK
    Offline / Send Message
    LoTekK polycounter lvl 17
    This was already awesome just from the early looks in TAWAYWO. You're a beast, through and through. I'm not sure how much use I'll get out of this myself these days, but I might do some 2D just to make use of it :D
  • Ben Apuna
    I think this will be extremely useful for me.

    Thanks renderhjs! :)
  • artquest
    Offline / Send Message
    artquest polycounter lvl 13
    Wow this looks amazing! Perfect timing too!! I'm just starting development on a 2d project.
  • Rapante
    Offline / Send Message
    Rapante polygon
    great stuff! I will definitely check it out tonight!
  • Xenobond
    Offline / Send Message
    Xenobond polycounter lvl 18
  • Ace-Angel
    Offline / Send Message
    Ace-Angel polycounter lvl 12
    Way too awesome man!
  • cptSwing
    Offline / Send Message
    cptSwing polycounter lvl 11
  • monster
    Offline / Send Message
    monster polycounter
    This is awesome. The only feature/option I would like is to force the sprite packer to use power of 2 texture sizes. (Even if there is some blank space.)

    [edit]
    Just found the right click dialog. :)
    [/edit]
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    ha, I was about to reply with a screen on how to use the settings but I guess you figured it out. This is still early in development- there will be a better explanation on the settings on the website with screens.

    I recently made some progress on the future Sprite Hull packing tool:

    sprite_hull_packing_progress_00.gif

    It generates a vector hull around every sprite (based on transparency using Marching Squares and angle & pixel thresholding / merging). The idea is to make a even more efficient sprite packer as anything that's out there so far, because the biggest bottleneck these days is texture filesize and memory size but not triangle rendering speed. So at the end this tool will generates mesh pieces for each sprite and a up to 30%-40% better use of texture space, by filling in the corners, gaps and holes.

    The red corners are rough estimations on which areas of the bounding box are not used, so I can plan better where to initially place sprites. After that there will be some polygon to polygon collision detection and a push / pull force to put them tight together together (obviously with padding space in between them).
  • Funky Bunnies
    Offline / Send Message
    Funky Bunnies polycounter lvl 17
    oh man I need to find something to use this on right away! haha I'm glad you're finally releasing all these :) looks awesome
  • The Flying Monk
    Offline / Send Message
    The Flying Monk polycounter lvl 18
    Nice work.
    But I've just got one problem, I was using this on my laptop with a 1440 * 900 res to make a 1024 * 1024 sprite. But I can't click on the confirm button at the bottom of the window, since it keeps snaping to the top of the screen.

    If this whole dialog was at the top you could make a sprite of any size.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Nice work.
    But I've just got one problem, I was using this on my laptop with a 1440 * 900 res to make a 1024 * 1024 sprite. But I can't click on the confirm button at the bottom of the window, since it keeps snaping to the top of the screen.

    If this whole dialog was at the top you could make a sprite of any size.
    ha ha, I know ;) you can hit the Enter key to confirm as well in those cases- it will do the same and save the stuff.
    Will be fixed in the future
  • artquest
    Offline / Send Message
    artquest polycounter lvl 13
    First off, Great tool!

    Got a question for ya though, Is there a way to force a particular order of the images as it packs them? I have 12 images and they need to progress from left to right in the proper order. Your packer seems to just pick it's own order for my images :( Would be great if it could just pick up on a naming convention for this. Or maybe it does and I haven't figured it out yet? :P
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    artquest wrote: »
    First off, Great tool!

    Got a question for ya though, Is there a way to force a particular order of the images as it packs them? I have 12 images and they need to progress from left to right in the proper order. Your packer seems to just pick it's own order for my images :( Would be great if it could just pick up on a naming convention for this. Or maybe it does and I haven't figured it out yet? :P

    texture packing is not what you want, because they are in a order that makes sense for the most tight and compact packing. What you want is the animation seqence tool.
    icon_48x_aniSheet.png
    However right now it doesn´t support yet an image sequence as data input (only single swf or gif files). In its options there is a animation spritesheet option, so it will pack your input sequence in a sprite sheet with constant frame size so its easier to apply or use it for image sequences in engines.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    got some progress with the sprite hull packing algorithm. Obviously in these examples the padding is missing but it should't change much of the compression statistics.

    pack_results_00.gif

    and a test with the Angry birds sprites (from the chrome webstore version). It could be that best fit 90 degrees rotations might improve the result a little bit. Maybe I won't exceed my previously aimed 30% compression compared to the bounding box method.

    pack_results_angryBirds.jpg

    Next is to finish the mesh generation and adding the padding and improve speed as it can be slow with large assets and loads of them.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    A progress video on the Tile Grabber:

    WIth some sample maps from Bionic Command, Mega Man 4 and a 8x8 GameBoy tile game

    [ame="http://www.youtube.com/watch?v=vk9NoiW-FKo"]ShoeBox: Extract Tiles Preview - YouTube[/ame]

    Also some SWFgrabber progress

    shoebox_1.10_swf_parser.jpg

    Which is slowly starting to make progress again. It has a better debugging timeline preview and right now I am working on some of the tricky visible true/false states of the elements of a SWF animation.
  • monster
    Offline / Send Message
    monster polycounter
    renderhjs,

    This is an awesome tool. Any plans for a command line version?

    We want to use it on Hero Academy (HeroAcademyApp.com), but we want to integrate it into the build process. That way we can work with loose sprites then pack them when the game builds.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    monster wrote: »
    renderhjs,

    This is an awesome tool. Any plans for a command line version?

    We want to use it on Hero Academy (HeroAcademyApp.com), but we want to integrate it into the build process. That way we can work with loose sprites then pack them when the game builds.
    Sorry for the late reply, for the near future there won't be any API, command line or alike ability.
    I am using Adobe AIR and the purpose of AIR is primarily to create rich UI- driven apps for Mac and PC. If all you need is texture packing, there is for example Texture Packer which offers a command line version and UI version for booth mac and PC. I have a license for it at work and its pretty good although I still have a few specific feature reasons to build mine.

    I don't mind sharing a few insights tough if you need specifics, I have lots of links on texture packing, sample code for several platforms and other free apps that all go in a similar direction.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    updated to version 1.30
    http://renderhjs.net/shoebox/air/shoeBox_1.30_public.air

    documentation
    http://renderhjs.net/shoebox/

    Quite a lot of bug fixes went into this release but I also managed to release some new toys like the Tile Extractor that can generate a TMX tile map with a tile map based on a screenshot, or the Extract SWF tool that is still in development. Because some tools have actually multi purposes I want to update the documentation in the near future with some practical tutorials on how to use some tools in a different way like creating bitmap fonts using the extract and pack sprite tools.

    A overview screen of some of the interesting goodies in this release

    shoeBox_1.30_overview.jpg
  • badmouse
    Offline / Send Message
    badmouse polycounter lvl 8
    Looks amazing! any chance to add the last version of TexRipper on it?
  • badmouse
    Offline / Send Message
    badmouse polycounter lvl 8
    Hi renderhjs,

    Thanks for the amazing tools you are making and sorry for the double post.

    I tested your tool days ago and is coming to be helpful. Using "Pack Sprite", the one im very interested with 12 frames (png format, 128x128 size).

    Setting crop alpha to False i got this result.

    shosebox_1.png

    Delicious! but there are 2 options that i believe are fundamental to make the "Pack Sprite" the perfect tool for sprite animations.

    1. The order of the sprites, normally from top left to right side, now looks like the order is a bit weird, with non uniform empty spaces in the end.

    2. Option to choose how many row and col you want.


    I really looking for a tool with this options to make easy uniform sprite sheets.

    I hope you can try to add those options if you think are so necessary like i think.

    thanks!

    EDIT :

    I found the option "PowerOfTwo" there automatically cut the empty blocks.

    But nothing about the uniform sprite order and the row/col setting.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Hi badmouse,

    I think what you are looking for is "Ani to Sheet" which is meant for animations and more uniform sheets that are easier to read in when you write an engine.

    Here is an overview of what it does, use the templates from the settings (right click on the Ani to Sheet icon) to get familiar with the settings.

    7093291509_e79f795d52_b.jpg

    The same should work with image sequences like PNG files rendered from max or maya
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    *progress*

    I worked today on a Bitmap font genrator (*.fnt table) to be used with common frameworks such as UiToolkit for Unity3D.
    The issue with tools such as BMFont from Angelcode and alike is that they don't let you customize the type effects in Photoshop.
    My solution expects a PNG image with a fixed character sequence (as defined in the settings). A blob detector finds the characters back and packs the sprites into a texture sheet. From there on the texture and a *.fnt file are exported so they can be used in the engine or framework.

    7093512575_dd3c739633_o.jpg

    I don't read any kearning data from a font file hence why right now spacings are equal between the bounds of the characters.
  • monster
    Offline / Send Message
    monster polycounter
    I've been using this quite a bit. I bumped into a couple of issues with the sprite packer.

    1. I wish there was a cancel button. Sometimes I pack the sprites and immediately see that I forgot or added too many sprites. But there is no Cancel, so I save and re-pack. Not a big deal.

    2. It's hard to hit the save button on a 2048x2048. The save button is off the screen, and when I move the window it snaps back to the original position.

    Thanks for the awesome tool man!
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    monster
    1. I have some updates soon to release public again. Some things that I tackled are:
      • support for folders (grabs sub-files in folders)
      • optimize setting in the texture packer, to create drafty quicker results (useful on very complex or large sprite collections)
    2. easy :) just hit the Enter key, its the same as hitting the save key for quicker working.

    a few weeks ago I was also prototyping some measure and slicing tool
    7017582915_3277cffbde_o.jpg
    But that is early stuff and again more UI building related
  • badmouse
    Offline / Send Message
    badmouse polycounter lvl 8
    Hi Renderhjs,

    Thanks a lot for the tutorial! yes! you are right, using the "Ani to Sheet".

    Thank you for this great tool!

    btw, im only tested it with PNG files, what about TGA with Alpha Channel (Transparency Mask)?
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Badmouse:
    TGA, PSD,... maybe in the future. Right now PNG is the easiest as its the most complete format I use in terms of library and tools. But if you have a tool such as XnView it should be easy to setup a auto-converter.


    some improvements on the Bitmap Font tool. It has now a nicer preview window and I got 90% of the fnt format completed in the exporter.
    6953483794_77b359a6b6_o.jpg
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I managed to make it work in Unity using uiToolkit. The upper part shows unity and the lower part the preview window of ShoeBox with the Bitmap Font tool.

    7106160449_866c994887_o.jpg

    A friend is going to try this tomorrow in Cocos2d to see if this works right out of the box for him.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    some more tweaking on the Bitmap Font Tool, pretty much done with this tool :)

    pixel font test
    I had to tweak a few things internally to allow detecting such tiny pixel islands as characters but now it works pretty well with pixel fonts too.

    7115954021_bda23cb0fa_o.jpg


    Narrow Sans Sarif font
    Your typical anti aliased reading font. Even though the kerning is constant here it looks actually pretty decent if not quite good.

    7115948143_386f66527f_o.jpg


    Bitmap Font settings
    The output format can be customized but will be a *.fnt file (non XML) as a default. But it also can be a custom XML, json or anything else file.

    7115956969_26156b33ab_o.jpg
  • cupsster
    Offline / Send Message
    cupsster polycounter lvl 11
    very nice tools must say!
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I just released version 1.50
    AIR file 1.50 download link

    7148664521_3b7e34c79e_o.jpg

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

    I'll be creating a few YouTube videos soon to demonstrate some of the new enhancements and tools.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    on a related matter:
    A few days ago some of our HTML dev's had to solve a tricky font issue in which the client insisted to have a very specific outline effect in HTML (iPad, Android support) that does not work right away in HTML or with CSS.

    This is what they ended up with successfully, the text on the ice cream bucket is dynamic and a css driven bitmap font exported from ShoeBox

    6987852172_5725e92a71.jpg

    These are the 2 sprite sheets generated. One for the outline and one as the top one. Booth had different kerning values so they would match perfectly on top of each other.

    7133940941_7eac5040fe.jpg

    Once I get my hands on their improved JS code to add the fonts on the fly in the DOM tree I will add a sample kit on my website.
  • mLichy
    Damn dude. Good work
  • mLichy
    This is what happens when I load up some animated Gifs I have

    shoeBoxIssue.jpg
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    try a different GIF file, for me it always worked so far. I use a library for loading animated GIF's. Either there is a flaw in that library or in that GIF file you tried. The GIF files I generated with PS however just worked fine.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    2 new video tutorials for ShoeBox on YouTube:

    Short overview of the flickr Tool

    [ame="http://www.youtube.com/watch?v=2Df6WAJbxPY"]ShoeBox: Flickr tool - YouTube[/ame]

    I use the flickr tool everyday at work. If you have a pro account at flickr (e.g. you pay a yearly fee) make sure you check the pro account setting in the settings. Also if you use this at work or NDA stuff make sure you set the public URL setting in the settings to false, otherwise your uploaded pictures will be visible to the entire world.


    Creating a Bitmap Font

    [ame="http://www.youtube.com/watch?v=Arzk8h4lc1I"]ShoeBox: Create Bitmap Fonts - YouTube[/ame]

    I use right now this feature for a Unity project at work to get PS designed UI's 100% carried over to the Unity build. Usually I use it for bold or style driven fonts like scores, counters etc. that come with some 3d or metal like textures.

    I'll be adding more videos in the next few days
  • Ged
    Offline / Send Message
    Ged interpolator
    Hey Renderhjs what would I need to do to use this bitmap font creator on a commercial project? Im a little confused because on the actual shoebox homepage it says the tools are "free" but on this polycount thread it says "non-commercial"?
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Ged wrote: »
    Hey Renderhjs what would I need to do to use this bitmap font creator on a commercial project? Im a little confused because on the actual shoebox homepage it says the tools are "free" but on this polycount thread it says "non-commercial"?
    It refers to my philosophy as in ShoeBox is intended as a free non- commercial tool. Free for anyone to use for any kind of project including commercial.
    It means for me that I don't have any interests in commercialisation on my part, like stripping the app at some point to sell a paid version. It is free as it is and you can use it for whatever you want.

    Maybe I should rephrase that- but no worries its just like TexTools: free for anyone in any way to use.
  • Ged
    Offline / Send Message
    Ged interpolator
    renderhjs wrote: »
    It refers to my philosophy as in ShoeBox is intended as a free non- commercial tool. Free for anyone to use for any kind of project including commercial.
    It means for me that I don't have any interests in commercialisation on my part, like stripping the app at some point to sell a paid version. It is free as it is and you can use it for whatever you want.

    Maybe I should rephrase that- but no worries its just like TexTools: free for anyone in any way to use.

    Wow thank you very much, that is very generous :) I have tried other font creation tools for use in unity games and so far I like yours the best. Other tools force me to recreate a font style I already made in photoshop but shoebox lets me use my photoshop designs to create the font, a much better approach.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    Update
    ShoeBox_1.60_public.air

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


    Not in this update yet but...
    I also have been working on a new tool that tries to mask a image automatically by providing a separate background only image or assuming a solid background color.
    7331866924_4d108a2f6d_o.jpg
    It uses a difference blend to make out the pixels that make out the object we want to extract. On a second pass (not yet done) I want to increase the saturation on aliasing or transparent pixels to get rid of the sampled background pixels.

    Here is another example, some of the white textures on the car itself are transparent like the background which is a side effect of this process, but it should provide a nice precise starting mask.

    7331886820_79ae430729_o.jpg

    Another nice example with rather unexpected results at first (this one is missing a checker background image in the last result)

    7331901306_6ffc6d13dc_o.jpg

    I see this as something useful for extracting alpha channels out of merged image data (like the Windows and OSX clipboard data) as well as photography and other source materials.
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    I got asked again for command line support so right now I am prototyping a additional button in the settings of each plugin to generate a bat (bash on mac) file.

    this was the idea:

    7444934022_b841aafafc_o.jpg

    right now I have a prototype that I am working on that does something like this

    7465421332_ea7329db29_o.jpg

    it first pop's up a dialog to choose the target or file you want to address in the command line. After that it will pop up a save dialog where you specify the *.bat file (or bash on mac). After that it opens the bat file in notepad so you can tweak additional values or copy paste the arguments into your script.
    Not sure yet about the mac support because I don't use the mac much or at all - so it would be more painful testing it on the mac. I will have a look though on windows to see how far i can get, like cuing up commands, assigning multiple files ect.
  • badmouse
    Offline / Send Message
    badmouse polycounter lvl 8
    Hi renderhjs, im using your tool a lot! is amazing! thanks!

    In the tool you have a gif to sheet, any interest in add a tool for Sheet to Gif Animation and Sprites to Gif Animation? in case of yes will be cool a option to set the time of the Animation.

    Thanks for this great tool :)
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    1.8.0 is now out
    ShoeBox_1.8.0_public.air

    Some highlights
    shoebox_1.8.0_release.jpg

    Not mentioned in the image but another new tool is the HTML text
    http://www.renderhjs.net/shoebox/htmlText.htm
    for the web developers out there, might be more something that is used at my work but still useful if you have a mac and want to get rid of control characters.

    I'll write up later a more detailed change log as a lot of stuff changed in this release.
  • SpeCter
    Offline / Send Message
    SpeCter polycounter lvl 14
    Nice update!

    Btw. is there an option to write our own templates for packing and bitmap fonts?
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    SpeCter wrote: »
    Btw. is there an option to write our own templates for packing and bitmap fonts?
    Yes
    If you look at the settings for the bitmap Fonts there are 2 variables "fileFormatLoop" and "fileFormatOuter" which define the file structure of what you are about to export.
    The order or structure of those 2 variable is like this
    <fileFormatOuter>
        <fileFormatLoop/>
        <fileFormatLoop/>
        <fileFormatLoop/>
    </fileFormatOuter>
    
    where @loop within the "fileFormatOuter" places the looping elements like in this case each character.

    Characters sequences such as @x, @id, @w etc. within those variable strings get replaced with character or sprite values. More info on all of that here
    http://www.renderhjs.net/shoebox/bitmapFont.htm

    As for the template dropdown menu:
    Sadly there is not an support yet for that, but...
    You have now 2 options of exporting your setup and re-use it for future uses or different computers.
    1. Option 1 is to use the JSON clipboard exporter / importer.
    2. The new added command line stores all settings that you last selected into a batch script file and sets it ever ytime you execute it. More on that here: http://www.renderhjs.net/shoebox/commandLine.htm

    If you have a new suggestion for a template and it would be useful to other people as well I am more than happy to pick it up and add it with the next update of shoebox.
  • SpeCter
    Offline / Send Message
    SpeCter polycounter lvl 14
    I think it would only benefit me and the few people who use Gorilla with Ogre3D.
    There are other tools which do what I need, but i always liked the way you design your programs and how easy to use they are ;)
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    SpeCter wrote: »
    I think it would only benefit me and the few people who use Gorilla with Ogre3D.
    There are other tools which do what I need, but i always liked the way you design your programs and how easy to use they are ;)
    Just looked it up
    http://www.ogre3d.org/tikiwiki/Gorilla
    Could you provide me some sample files? Is the lookup file ASCI based or a Binary? If it's within my range of possibilities I could create a template for BFG.
    Otherwise I'll have a look whenever I have some extra time.
  • SpeCter
    Offline / Send Message
    SpeCter polycounter lvl 14
  • renderhjs
    Offline / Send Message
    renderhjs sublime tool
    will look into it, looks like i have already most variables covered.
  • SpeCter
    Offline / Send Message
    SpeCter polycounter lvl 14
    That´s what i thought ;)
    That´s why i asked if we/i could change the template , to put it out as something i can work with :D
13
Sign In or Register to comment.