Search Unity

  1. Unity 2019.2 is now released.
    Dismiss Notice

ShoeBox: 2d gamedev tools

Discussion in 'External Tools' started by renderhjs, Nov 28, 2011.

  1. renderhjs

    renderhjs

    Joined:
    Aug 16, 2011
    Posts:
    90
    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.
     
    KEMBL likes this.
  2. pol2095

    pol2095

    Joined:
    May 1, 2014
    Posts:
    2
    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
     
  3. MD_Reptile

    MD_Reptile

    Joined:
    Jan 19, 2012
    Posts:
    2,591
    Very cool that your still working on this, I have used it and it seems like a powerful tool for 2d artist!
     
  4. wccrawford

    wccrawford

    Joined:
    Sep 30, 2011
    Posts:
    2,038
    The TextureRipper tool looks like it'll be a God-send. Thank you!
     
  5. renderhjs

    renderhjs

    Joined:
    Aug 16, 2011
    Posts:
    90
    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.
     
  6. pol2095

    pol2095

    Joined:
    May 1, 2014
    Posts:
    2
    It isn't very good, it's better if Extract sprites can generate a textureAtlas.xml
     
  7. justifun

    justifun

    Joined:
    Apr 2, 2013
    Posts:
    12
    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
     
  8. renderhjs

    renderhjs

    Joined:
    Aug 16, 2011
    Posts:
    90
  9. ratonmalo

    ratonmalo

    Joined:
    Apr 12, 2010
    Posts:
    276
    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.

    $number.png

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

    thanks a lot
     
  10. funshark

    funshark

    Joined:
    Mar 24, 2009
    Posts:
    225
    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 ) :)
     
  11. renderhjs

    renderhjs

    Joined:
    Aug 16, 2011
    Posts:
    90
    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

     
  12. funshark

    funshark

    Joined:
    Mar 24, 2009
    Posts:
    225
    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
     
  13. Game-Dragon

    Game-Dragon

    Joined:
    Nov 16, 2012
    Posts:
    6
    Just wanted to confirm funshark's post.
    I also seem to be having issues getting monospaced fonts to work with NGUI and 2D Toolkit.
     
  14. fscigliano

    fscigliano

    Joined:
    Jun 24, 2014
    Posts:
    1
    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}
     
    rakkarage likes this.
  15. renderhjs

    renderhjs

    Joined:
    Aug 16, 2011
    Posts:
    90
    @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
     
    Sungold and nathantran like this.
  16. Pillgrim

    Pillgrim

    Joined:
    Mar 15, 2014
    Posts:
    1
    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
     
  17. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682


    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
     
    Last edited: Aug 8, 2014
  18. bkw

    bkw

    Joined:
    Sep 20, 2013
    Posts:
    49
    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.)
     
  19. aholla

    aholla

    Joined:
    May 27, 2014
    Posts:
    31
    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?
     
  20. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    @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
     
  21. aholla

    aholla

    Joined:
    May 27, 2014
    Posts:
    31
    @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.
     
  22. Reekdeb

    Reekdeb

    Joined:
    Nov 26, 2012
    Posts:
    6
    Last edited: Oct 14, 2015
    Sungold likes this.
  23. funshark

    funshark

    Joined:
    Mar 24, 2009
    Posts:
    225
    Nice; A font importer would be great too
     
  24. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
  25. funshark

    funshark

    Joined:
    Mar 24, 2009
    Posts:
    225
    Yup I've already grabbed that though i have not tested it yet; Have you? How is it?
     
  26. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    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.  
     
    Last edited: Nov 25, 2014
  27. RDeluxe

    RDeluxe

    Joined:
    Sep 29, 2013
    Posts:
    92
    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
     
  28. Artiste

    Artiste

    Joined:
    Dec 12, 2014
    Posts:
    12
    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:
     
    Last edited: Dec 12, 2014
  29. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    upload_2014-12-12_10-37-19.png

    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
    upload_2014-12-12_10-34-10.png
     

    Attached Files:

  30. Artiste

    Artiste

    Joined:
    Dec 12, 2014
    Posts:
    12
    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)
     

    Attached Files:

    Last edited: Dec 12, 2014
  31. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    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="!" />

    upload_2014-12-12_12-7-8.png
     
    Last edited: Dec 12, 2014
    Artiste likes this.
  32. Artiste

    Artiste

    Joined:
    Dec 12, 2014
    Posts:
    12
    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 [...] )

     
    Last edited: Dec 12, 2014
    rakkarage likes this.
  33. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
    http://www.reddit.com/r/Unity3D/comments/2ple1u/ugui_sliced_sprites_texturepacker_fix/

     
  34. ARKMs

    ARKMs

    Joined:
    Dec 10, 2014
    Posts:
    3
    rakkarage likes this.
  35. ratonmalo

    ratonmalo

    Joined:
    Apr 12, 2010
    Posts:
    276
    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 :/
     
  36. MadManAdam

    MadManAdam

    Joined:
    Jun 14, 2014
    Posts:
    3
    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.
     
  37. rakkarage

    rakkarage

    Joined:
    Feb 3, 2014
    Posts:
    682
  38. MadManAdam

    MadManAdam

    Joined:
    Jun 14, 2014
    Posts:
    3
  39. trooper

    trooper

    Joined:
    Aug 21, 2009
    Posts:
    673
  40. ratonmalo

    ratonmalo

    Joined:
    Apr 12, 2010
    Posts:
    276
    Hi there!

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

    natalyanki

    Joined:
    Nov 17, 2016
    Posts:
    1
     
    Sungold likes this.