Tutorial ShoeBox + Construct 2 Free Edition - Your best friend while spritting.

ShoeBox is a tool developed to help Indie Game Designers organize their frame stripes and animations, standardizing the sizes or flushing it to best optimization of space.

Here, in Starbound, we have an excellent use of this tool.

Designed to make single frame files or GIF animations into animation stripes, Shoebox can save your time by optimizing the frame sizes, resulting in the final version of your animation stripe.

http://renderhjs.net/shoebox/


​

If you desire to learn more about this amazing tool, start reading the online manual here (http://renderhjs.net/shoebox/manual.htm). There you'll learn how extract individual sprites of a shuffled spritesheet, and much more!

 

for sure, you can simple make the logic sequence of frames and fill the null frames with blank images, and that written frames (where the developers write what will come in the next fields, like legs, chest, etc) into images too.

I'll do a sample showing you exactly what you need.

I think everything is possible using this tool, even if what you're looking for is not the stand of the tool. For advanced users, you can write your own configuration to the output images.

I'm not confident with the scripts, so, I prefer organize my sheets using the logic sequences, like number, indexing in the sequence I want them placed inside the strip. To make sure it will have a certain width I configure shoebox to break the stripe and make a new line after a size.

Well, wait a little bit and I'll give you a nice example of it's application on Starbound, but, by the way, the sample I did is perfectly usable in many areas of Starbound, because you have total control of frames with the file ".frame". This file have the only purpose of index each frame with a name, where you're able to call them inside the ".animation" file.

Starbound requires a stripe, not a sprite sheet, so, you can organize that stripe like you want, even shuffling it if you desire or like a sprite sheet. But as a sprite sheet, you'll need to fill the blank frames with "null" on the ".frame" file, because after the engine read the file, it will be a simple array of frames.

 

So, I managed to make a sample using the Shoebox in combo with Construct 2 Free Edition (http://www.scirra.com - because I hate to waste time cropping frames one by one).

First, I selected from the game resources>humanoid>apex>femalebody.png this image:

​

So, I imported it as a stripe of frames inside Construct 2 Free Edition.

And later, just save it as a project folder, instead of a single file. Browse to the project folder and follow to the animation you have created.


I did a math here, the original Sprite Sheet was organized in 9 columns and 6 lines, so, each frame has 43x43 pixels, how large this should be? Easy, 9*43 and we have the final width. Setup it inside shoebox and drag the images to the Frame Sheet option.


You have done something with 9 seconds, what you should spend at least 1 hour doing manually.
​

I hope it help many folks here, and demystification the use of these tools, also, I introduced the Scirra Construct 2 Free Edition to your software pool. this is a great tool, and I'm a fan of their work.

​