ShoeBox: 2d gamedev tools

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:
ShoeBox_3.5.0_public.air



The biggest update is the Texture Ripper tool which has its own documentation here:
http://renderhjs.net/shoebox/textureRipper.htm


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

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.

 

is-it possible with the extract sprites tool to create a textureAtlas.xml file, I find a sprite sheet and I need to create a textureAtlas ?

Thanks

 

Very cool that your still working on this, I have used it and it seems like a powerful tool for 2d artist!

 

The TextureRipper tool looks like it'll be a God-send. Thank you!

 

Hi pol2095,
Yes you can! In fact all you need to do is to run the extract sprites tool first and save all individual sprites into a folder. Next select all the created sprites from your folder and drop them on the Sprite Sheet tool and voila you should have your own sprite sheet with reference lookup file and new PNG sprite sheet texture.

 

It isn't very good, it's better if Extract sprites can generate a textureAtlas.xml

 

Is there a fix yet for numbered image sequences being put out of order when using the frame sheet tool?

still seems to be broken as of 3.5.2

 

@Justifun: Fixed it with 3.5.4 sorry about that bug. It should update automatically if you quit shoeBox. Alternatively you can download it from my website: http://renderhjs.net/shoebox/air/ShoeBox_3.5.4_public.air

 

Hi guys, Im using this soft from the first days it comeout in Polycount. I love it!

I having a problem right now with it, with the Font maker. I know that the Idea is optimize the texture size, but I having problem with I actualize in real time the Score of my game.

IE. Score : 0021456

the boxes of the No. have different size, so all the No move when I actualize it in real time.



I need all the letters, numbers and symbols have the same blue box size, there is any option for that?

thanks a lot

 

You need a monospace font.
Shoebox can't do that and I'm not sure it will be able to. I've run into the exact same problem a couple of days ago.
In the end, I've modified the numbers in a font editing software for them to have the exact same size and used the "monospace" option in Shoebox to generate the Unity font... but I'm not sure if this option has changed anything (in Unity I mean )

 

The recent version of ShoeBox actually has a MonoSpace option
http://renderhjs.net/shoebox/bitmapFont.htm

So yes the packed sheet will still be compressed but when rendered inside your Text renderer it should apply the needed spaces to make all characters look equal in width.

Alternatively if you want another way you can create the bitmap font and then push it through the "Read Sprites" tool
http://renderhjs.net/shoebox/readSprites.htm
This will reconstruct the individual characters as individual png images - then next pack it with the "Frame Sheet" tool
http://renderhjs.net/shoebox/aniSheet.htm
And your should get a all equal tile set of font characters. Here is an example

 

Hey renderhjs,

I've actually tested that monospace parameter without success

example :
char id=48 x=0 y=101 width=40 height=54 xoffset=2 yoffset=25 xadvance=44 page=0 chnl=0 letter="0"

The only thing that parameter has changed here is the xoffset. I can clearly see why it does that, but in Unity plugin like 2D toolkit ( the one i'm using for text currently ), the only value that is taken in account is the width one, and since it was still the same, the result is the same

Maybe there is another text plugin which handle that better

 

Just wanted to confirm funshark's post.
I also seem to be having issues getting monospaced fonts to work with NGUI and 2D Toolkit.

 

this is the config to use ShoeBox spritesheet with TexturePacker parser for unity:

File Format Loop:

Code (CSharp):

1. \n\t\t"@ID":\n\t\t{\n\t\t\t"frame": {"x":@x, "y":@y, "w":@w, "h":@h},\n\t\t\t"rotated": false,\n\t\t\t"trimmed": true,\n\t\t\t"spriteSourceSize": {"x":@fx,"y":@fy,"w":@fw,"h":@fh}\n\t\t\t"sourceSize": {"w":@W, "h":@H}\n\t\t},\n

File Format Outer

Code (CSharp):

1. {\n\t"frames":\n\t{@loop\t},\n\t"meta":\n\t{\n\t\t"app": "http://www.codeandweb.com/texturepacker ",\n\t\t"version": "1.0",\n\t\t"image": "@TexName",\n\t\t"format": "RGBA8888",\n\t\t"size": {"w":@W,"h":@H},\n\t\t"scale": "1",\n\t\t"smartupdate": ""\n\t}\n}

 

@FsCigliano I will have a look at that soon- for now be aware that the mono space font option is still a bit experimental and depends on the framework like how they interpret the offsets from the font file.


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

 

Okay, I know this question would sound very stupid, but I`m a noob and I can`t seem to find the answer to it:
How do you import spritesheet made with ShoeBox into Unity? :c

I mean, so thet unity would recognise separate frames and sprite`s name sand stuff? When spritesheet is created, the program also creates .txt file. I suppose it contains that information. But Unity seems to ignore it. Should I install some Unity Asset, like for Texture Packer? I`m sorry, I`ve fooking fow an answer whole day :c

 

i just got it to work with this in format settings

Code (csharp):

1. @Id;@x;@y;@w;@h;0.5;0.5\n
2. @loop

http://u3d.as/content/code-and-web-gmb-h/texture-packer-importer/7d2

and modify this code to flip height? no variable for flipped y? idk

Code (CSharp):

1. smd.rect = new UnityEngine.Rect (x, 1024f-y-h, w, h); // hardcode height workaround!?

can right click on asset to reimport to regenerate, or just dragging new files into folder works too

you will have to disable that script or remove the .tpsheet to change the borders for slicing else every time you add border will reimport and remove

maybe a better way or a way to preserve borders idk

thanks

 

Nice work on the little suite of tools. For the Bitmap Font tool, would it be possible to having padding apply to edge of the texture? Right now, the top left most glyph is right against the edge of the texture sheet. Maybe it should be a separate setting since padding is space between two glyphs, and the space between a glyph and the edge of the texture might (should?) be half of that space.

I'm trying to add an outline to the characters after export, but there's no space to do so. (Unless I'm mistaken, and I should actually apply the outline to my characters in photoshop before running it through ShoeBox, but then I don't think the optical kerning and what not would work properly.)

 

Hi, im trying to get this to work with unity and it's native 2D workflow. Based upon what others are doing above, i am tyring to use teh TexturePacker importer. The problem is that it uses inverted corordinates.

How can I do the converstions in the export loop:

I need to set the y position to the Height of the exported sheet, minus the yposition of the sprite + its height

e.g.
FileFormateLoop: @Id;@x; (@H-(@y+@h)); @w;@h;0.5;0.5\n

Thanks.

p.s anychance of an official Unity export?

 

@bkw ya there is an option for padding and or extrude... and if you have space between your bitmap font characters then shoebox can seperate them all into individual images that you can modify and re-pack into a new sprite sheet if not enough room

@aholla
ya i mentioned the flip 2 posts above change or add line 86:
replace 1024 with the height if your sprite sheet or determine it somehow
then subtract the height of a single tile and the original unflipped y

 

@rakkarage Hi, yeah I saw your solution but was hoping there might be a way to export the sheet so that it would work with the TexturePacker script without having to change it. Also this would get around the hard coding part.

 

ShoeBox Importer for Unity is available in asset store. It imports ShoeBox spritesheets as native Unity 2D sprites. Works with both free version of Unity and Unity Pro.


Asset Store:
Short Link: http://u3d.as/9Yw
Store URL: https://www.assetstore.unity3d.com/#!/content/24015
Web Site: https://yozoplay.com/shoebox-importer-for-unity/

 

Nice; A font importer would be great too

 

http://forum.unity3d.com/threads/unity-4-6-bitmap-font.265209/#post-1853776

Here is some font import code.

 

Yup I've already grabbed that though i have not tested it yet; Have you? How is it?

 

well not the xml or shoebox part but ya i use the same core math & logic to import from .csv to .fontsettings.

Code (CSharp):

1.  
2. using System;
3. using UnityEditor;
4. using UnityEngine;
5. public static class FontEditor
6. {
7.     private static Vector2 _size = new Vector2(128f, 128f);
8.     private static string _fromVenice = "Assets/Deko/Font/Venice.csv";
9.     private static string _toVenice = "Assets/Deko/Font/Venice.fontsettings";
10.     private static string _fromSuper = "Assets/Deko/Font/Super.csv";
11.     private static string _toSuperBlack = "Assets/Deko/Font/SuperBlack.fontsettings";
12.     private static string _toSuperWhite = "Assets/Deko/Font/SuperWhite.fontsettings";
13.     private static string[] _splitFile = { "\r\n", "\r", "\n" };
14.     private static char[] _splitLine = { ',' };
15.     [MenuItem("ca.HenrySoftware.Deko/FontEditor/Import")]
16.     public static void Import()
17.     {
18.         TextAsset venice = AssetDatabase.LoadAssetAtPath(_fromVenice, typeof(TextAsset)) as TextAsset;
19.         if (venice != null)
20.         {
21.             Font font = AssetDatabase.LoadAssetAtPath(_toVenice, typeof(Font)) as Font;
22.             if (font != null)
23.             {
24.                 Import(venice, font, _size);
25.             }
26.         }
27.         TextAsset super = AssetDatabase.LoadAssetAtPath(_fromSuper, typeof(TextAsset)) as TextAsset;
28.         if (super != null)
29.         {
30.             Font superBlack = AssetDatabase.LoadAssetAtPath(_toSuperBlack, typeof(Font)) as Font;
31.             if (superBlack != null)
32.             {
33.                 Import(super, superBlack, _size);
34.             }
35.             Font superWhite = AssetDatabase.LoadAssetAtPath(_toSuperWhite, typeof(Font)) as Font;
36.             if (superWhite != null)
37.             {
38.                 Import(super, superWhite, _size);
39.             }
40.         }
41.     }
42.     public static void Import(TextAsset rects, Font font, Vector2 size)
43.     {
44.         string[] lines = rects.text.Split(_splitFile, StringSplitOptions.None);
45.         CharacterInfo[] info = new CharacterInfo[lines.Length];
46.         for (var i = 0; i < lines.Length; i++)
47.         {
48.             string[] line = lines[i].Split(_splitLine, StringSplitOptions.None);
49.             int x = Convert.ToInt32(line[0]);
50.             int y = Convert.ToInt32(line[1]);
51.             int width = Convert.ToInt32(line[2]);
52.             int height = Convert.ToInt32(line[3]);
53.             int offset = Convert.ToInt32(line[4]);
54.             info[i].uv.x = x / size.x;
55.             info[i].uv.y = y / size.y;
56.             info[i].uv.width = width / size.x;
57.             info[i].uv.height = height / size.y;
58.             info[i].vert.x = 0;
59.             info[i].vert.y = -offset;
60.             info[i].vert.width = width;
61.             info[i].vert.height = -height;
62.             info[i].width = width;
63.             info[i].index = i;
64.         }
65.         font.characterInfo = info;
66.         AssetDatabase.SaveAssets();
67.     }
68. }
69.  
70.  

 

Would love to use this instead of the non-free (and pretty expensive for a small team of all rounders) TexturePacker. However the lack of info output files allowing Unity to know which sprites changed is a deal breaker. I don't want my maps and environments to break every time my artist adds something to a tileset.

Any plan for this ? The code on both sides (unity plugin and Texturepacker output config file) does not seem especially complex

 

Just used it. I had to use some regex to turn the .fnt into a readable xml (I used shoebox to generate it, the mentioned tool Littera seems broken). Then I used the editor script and generated the .fontsettings .

It kinda works, but I still have issues. I can display text, but it displays lower than it should for an unknown reason:

 

you can adjust the vertical position by playing around with the line height of the font and the vertY of the charactersis your vertH negative?
whats you liner spacing?
and how is that text anchored and positioned? actual

if you turn on textured wire you can see the outline of each character

 

I set the line spacing at 20, when I change it the line height varies accordingly, but the text still starts away from the top.
The text settings are same as the other text box, and the text aligns properly if I only switch the font (to a .ttf)

Here's the wire frame:


I joined my font files (png I used in shoebox, modified .txt, generated material and .fontsettings)

 

all your yoffset are around 66 pixels in the fnt xml file
they should all be around 0 just adjusted by a couple pixels to make bottoms line up
you can fix most with find and replace but not all are exactly 66 for those i think you need to subtract 66 to get right number

<char id="33" x="168" y="93" width="2" height="14" xoffset="0" yoffset="66" xadvance="4" page="0" chnl="0" letter="!" />

 

Yup it works ! Thanks a lot !
I used the 'FNT Unity' preset though. Which is the parameter that i need to change in the future? (it says [...] yoffset=@sy [...] )

 

http://www.reddit.com/r/Unity3D/comments/2ple1u/ugui_sliced_sprites_texturepacker_fix/

 

I create my own ShoeBox importer:
https://github.com/arkms/ShoeBox-Reading-Unity

 

Im using this tool from the first time it touch polycount forums and I love it.

Have a question, I know that I can import GIF animations and convert it in separate frames or sprite sheets but, is possible make the inverse?

I mean import frames or sprite sheet and export it into gif animation?

Im looking for a quick work flow to can preview pre render animations and the site only support GIF or FLV :/

 

Where in the heck do I put the .txt file that Sprite Packer also creates along with my .png file? I've imported it into Unity along with the .png file but after that I don't know what to do. Any help would be greatly appreciated! Thank you.

 

you can import that text file with code similar to this (as discussed above)
https://www.assetstore.unity3d.com/en/#!/content/16641

 

Thank you very much.

 

Awesome tool, been using it for years. If you want to get kerning working with unity ui, check out our asset: https://www.assetstore.unity3d.com/#!/content/42803

 

Hi there!

Is posible import like uGUI what I exported with the Split PSD?