Sprite Packer, Physics Editor, Animations Editor

You should follow me on Twitter

SpriteHelper 1




Support for multiple engines

Cocos2d Cocos2d-X Corona SDK More to come...



Sprites Packer


SpriteHelper combines multiple individual images into a single, efficiently laid out image.

Based on your settings, the resulting image is saved for multiple devices, such as:
image-ipadhd.png for iPad 3rd and 4th generation,
image-hd.png for iPhone 4, 4S, 5 and iPad 1, 2, Mini
image.png for iPhone 2G, 3G, 3GS

SpriteHelper also produces a document file in xml format that maps the sprite names with their rectangles. Because the app comes bundled with an API, you can interpret this file without writing any code for the supported engines.
For people that want to rely only on the engine, you can also export the info in specific engine formats like plist for Cocos2d and lua for Corona SDK.




Multi-Sheet Support

   

In order to have sprites organized better, you can create multiple sheets and arrange your sprites in categories.


Since each device has its own maximum texture size (e.g. iPad 3 max texture size is 4096x4096 px, iPhone 4 2048x2048 px), you can use this feature to get around this limitation by moving sprites from one sheet to another without the need to recreate an entire new sheet.


This feature is also useful when creating multiple animations for the same character.
Because almost all engines require that all frames in an animation must be on the same image file (sheet) you can organize your frames better.










Physics Editor with Auto-Trace

   
With SpriteHelper you will be able to assign collision shapes and rigid body properties to your sprites.

To simplify the process of creating physical shapes, SpriteHelper comes with an advanced algorithm to trace your sprites and create the shapes.
Because performance is very important when creating a game, you can set to trace a concave or a convex shapes and you can later even optimize the shape.

The following example displays the same sprite traced using concave algorithm on the left and convex algorithm on the right.




Multiple Physical Shapes per Sprite

Most of the time, just tracing the contour of the sprite to create the shape is not enough.

Sometimes you want to distinguish the head and the body of a character so that when you perform collision detection you know how to apply damage to the character.

   
Using the SpriteHelper API you can register for collision events which will return the name of the shape involved in collision (e.g."creature_head"), the ID of the shape, the name of the sprite and many more pieces of useful info.

To make shapes even more useful, you can make certain shapes behave as sensors
(a fixture that detects collision, but does not produce a response).





Physic Holes

   
In special cases you may need to add holes to a shape in order to create advanced devices, or just to be able to put a dynamic sprite inside another sprite and hold its simulation inside a special area.
SpriteHelper lets you create as many holes as you need on all the shapes in a sprite.

When using the physical shape as a touch location, you can make it so that the touch triggers only inside the shape. In this example, only inside the blue area of the 8 shape.




Animations Editor

   
You can combine multiple sprites together to create animations.

A real time preview will be displayed so that you can see the animation in action and edit its settings to match what you need.
Double clicking on the preview area will open up a larger window so you can see the animation at the full size.

Various properties can be edited from inside the editor and other options are available through the API.

You can have each frame have its own time, for example, making the animation to run slower at the beginning and then gain speed as it reaches the end.
Each frame will have a time calculated by the "Unit of time" multiplied by the frame "Unit".
The sum of all frames time will give the total time of the animation.

Using the API, you can register for notifications such as "Animation has ended", "Animations has reached frame" and "Animation has ended all repetitions".

You can also export all animations to native engine file formats like plist for Cocos2d and lua for Corona SDK.




User Info Per Frame

   
Using the animation editor, you can assign custom properties to each frame.

Each frame can have as many properties of type string, bool or numbers.

You can use these properties in your game engine to trigger special events or define behaviors.





Multiple Image Formats

SpriteHelper supports multiple image formats. When saving, you can choose to save to one of the multiple image formats available.
Depending on the format you choose, you can optimize the disk space or the quality of the image.
Depending on your engine, some of these image formats may not work.




Find Sprites In Already Packed Images

Your artist may give you the art in already packed images. SpriteHelper can detect each sprite in the image and treat them as individuals.

When you initially import or drag and drop the image over the SpriteHelper window, that image will be treated as an individual sprite. By pressing the "Break In Individual Sprites" button, you instruct SpriteHelper to look at the image and find all the sprites in it.
The list of sprites will then be updated with all the sprites it found.

In this example, the image is already packed and contains multiple sprites. By pressing on the blue marked button, SpriteHelper found the sprites and updated its info.






SpriteHelper




Download Trial       Visit Store




Other features

Trim
Crop
Rotation
Border

When trimming a sprite, the empty space around it will be removed, making the sprite hold less space when packing. Then, when loading the sprite in the game engine, the empty space will be put back so that the sprite looks exactly like the original image. Cropping a sprite will remove the empty space around it. When loading the sprite in the game engine, the empty space will not be there anymore. Sometimes, by rotating a sprite, the packing can be optimized resulting in smaller images. The outer most pixel on each side of the sprite can be duplicated as many times as needed.



Engine properties
Forces
Exporters
Batch change

Control the scale, opacity, angle, visibility and much more directly from inside SpriteHelper.
All these properties will automatically be setup for you when using the API.
Control the linear and angular damping, linear and angular velocity and the gravity scale of each body.
All these physical properties will be setup for you when using the API.
Export animations and sprite sheets to native engines format.
Cocos2d, Cocos2d-X, Corona SDK and more.
Replace the image of each sprite in your document with new ones.
Useful when art is not final and you're working in parallel with your artist.