TexturePacker is a GUI and command line tool to create sprite sheets or sprite atlases. Without specifying any additional options TexturePacker already creates very good results, but you also have enough options available to adjust things to your needs.

Supported operating systems

MacOS TexturePacker currently runs on MacOS 10.7 (Lion) and above.

Windows Every release version will be built for Windows XP, Vista, 7 and 8.

Linux (Ubuntu) We support Linux (Ubuntu) version 13.10 (Saucy Salamander) and above.

Installation

Choosing the license

You can always access the license screen by choosing Enter license key from the menu.

Please have a look at the TexturePacker licenses comparison page for a detailed overview on all features available in Essential or Pro version.

Installation of the command line tool

You can install TexturePacker's command line client if you want. This allows you to perform powerful batch operations and even integrate TexturePacker into your build pipeline.

No harm is done if you skip this step during the initial setup. You can always select Install command line tool from the menu later.

TexturePacker FlashUnpacker

TexturePacker automatically calls the FlashUnpacker Addon when you add flash animations or sprites to TexturePacker. You only need to install it when you want to import flash animations into TexturePacker.

For more information and to download FlashUnpacker see TexturePacker FlashUnpacker

Menu Bar

New project

Create a new sprite sheet for your framework.

Open project

Open an existing .tps file.

Save project

Save the current project to disk. Creates a .tps file.

Save defaults

Save the current settings as default values. Next time you open TexturePacker, the options will be filled in with your saved values.

Add sprites

Add a new single sprite to your sheet.

Remove sprites

Removes selected sprite or folder from your sprite sheet.

Add smart folder

Add a folder containing sprites.

Publish sprite sheet

Publish current sprite sheet. Also available from the menu as Force Publish --force-publish

Show tutorial

Opens our tutorials page in a browser window.

Send feedback

Send us your support questions, feature suggestions or bug reports.

Sprites Panel

Just drag and drop your sprites into the Sprites Panel on the left side to load them into TexturePacker.

Supported image formats are: bmp, gif, ico, jpeg, jpg, mng, pbm, pgm, pkm, png, ppm, psd, pvr, pvr.ccz, pvr.gz, pvrtc, svg, svgz, swf, tga, tif, tiff, webp, xbm, xpm.

You can also drag and drop complete folders of sprites onto the panel. TexturePacker imports all images inside that folder and uses sub-folder names as part of the final sprite name.

Any changes to the folder structure are synced in TexturePacker as soon as you re-enter the application.

Yellow folders are smart folders you've added to the project. They can be removed by pressing the Delete key.

Blue folders are folders inside a smart folder. They can only be removed via Finder/Explorer.

Flash animations appear as folders too.

You can delete sprites from the panel only if you added them as individual sprites.

Preview Panel

After you've added sprites to TexturePacker, you can see your sprite sheet inside the Preview Panel with your sprites aligned on the sprite sheet according to the algorithm set under Layout -> Algorithm. Almost all of the various TexturePacker options are updated in real-time so you can immediately see the changes made to your sprite sheet.

Zoom Panel

With the Zoom Panel at the bottom of the Preview Panel you can adjust the scaling factor of your Sprite Sheet Preview:

Use the slider to zoom in or out continuously.

Click - or + to zoom in predefined steps.

1:1 sets zoom factor to 100%.

To view your spritesheet completely inside the TexturePacker window use Fit.

On the right hand side of TexturePacker you have numerous options to optimize your sprite sheet. If you open TexturePacker for the first time, you will only see the most important options. View all available options by clicking show advanced on the respective Settings Panel.

Data

Data Format --format <name>

You can set the Data Format or framework when you open a new project. Depending on your choice this enables additional features.

If you want to convert your project to another framework and not start a new project from scratch click the wrench button and select another framework.

Make sure to save your current project before converting it!

Data file --data <filename>

Choose the destination and file name for the Data file. The Data file contains the metadata where the sprites are found inside the texture.

Trim sprite names --trim-sprite-names

Removes image file extensions from the sprite names - e.g. .png, .tga.

Prepend folder name

Prepends the smart folder's name as part of the sprite name.

Sub-folder names are always included in the sprite name.

Texture path --texturepath <path>

This value can be used to prepend a path before the file name of the texture in the Data file. This can be used to store the sprite sheet image in another location than the Data file.

Example: /assets

Class file --classfile-file <filename>

Choose the file name for the classfile output file.

Java file --java-file <filename>

Java package name --andengine-packagename <name>

Enter the package name for the additional Java metadata.

Atlas bundle --format spritekit --data <filename.atlasc>

Choose the atlasc directory containing all data and image files.

The value entered must be an absolute path. TexturePacker converts it into a relative path to the .tps file when saving - allowing you to move the complete set of data to other locations.

Header file --header-file <filename>

Choose the file name for the header file containing definitions for the sprites and animations.
This file is optional. Ignored if filename is empty.

The value entered must be an absolute path. TexturePacker converts it into a relative path to the .tps file when saving - allowing you to move the complete set of data to other locations.

Filtering

(only available if Data Format is LibGDX)
Sets the filtering values in the LibGDX exporter. For more details see LibGDX specification: http://www.badlogicgames.com/wordpress/?p=1403

Min Filter --andengine-minfilter <name>

Sets the minimizing filtering values in the AndEngine exporter.

Mag Filter --andengine-magfilter <name>

Sets the magnifying filtering values in the AndEngine exporter.

Wrap t/s --andengine-wrapt <Clamp|Repeat> / --andengine-wraps <Clamp|Repeat>

Sets the wrap value in the AndEngine Data file.

Texture format --texture-format <id>

Choose the Texture format your framework supports. Depending on your choice this enables additional features.

Texture file --sheet <filename>

Choose the file name for the Texture file. The Texture file contains the image data of the sprite sheet.

The value entered must be an absolute path. TexturePacker converts it into a relative path to the .tps file when saving - allowing you to move the complete set of data to other locations.

If you are using Multipack or Scaling variants to create different variations of a sprite sheet, make sure that the Texture file name contains a placeholder:

Placeholder	Description
{v}	Scaling variant name
{n}	Multipack index, starting with 0
{n1}	Multipack index, starting with 1

DPI --dpi <value>

Sets DPI (dots per inch) for PNG and JPG format. Does not have any effect on most gaming frameworks since they just care about the pixel size. Might affect web-based frameworks.

Png Opt Level --png-opt-level <value>

Optimization for PNG files. TexturePacker probes for settings to reduce the .png file size.

If you set Png Opt Level to "1" a 8-bit PNG with 256 colors is generated. (default)

The higher the level, the more combinations are tested.

Warning: Setting high values might take a long time during Publish!

PVR Quality --pvr-quality <value>

Set the quality for PVR compression. Valid values: verylow (- low quality, fast), low, normal, high, best (- best quality, very slow (default)).

JPG Quality --jpg-quality <value>

Set the quality for the lossy .jpg compression. Valid range is 0 (low quality) to 100 (best quality).

WebP Quality --webp-quality <value>

Set the quality level for WebP format (0 = low, 100 = high, >100 = lossless), default is lossless.

JXR Compression --jxr-compression <value>

Set the compression level for JPEG XR encoder (0 = lossless, 1..100 = lossy compression), default is lossless.

JXR Trim Flexbits --jxr-trim-flexbits <value>

Number of flexbits to trim, 0 (default) .. 15.

Increases packing ratio by removing detail from the image.

JXR Color Format jxr-color-mode <value>

Color sampling mode for JXR codec: YUV444, YUV422, YUV420.

ETC1 Quality --etc1-quality <value>

Set quality for ETC1 compression: low, low-perceptual, high, high-perceptual.

DXT Quality --dxt-mode <value>

Set DXT1/5 compression mode: linear, perceptual.

Flip PVR --flip-pvr

Flips the PVR file vertically. Required by Unity and some other frameworks

Premultiply alpha --premultiply-alpha

Enables pre-multiplied alpha. With premultiply alpha all color values are multiplied with the alpha value. This is required by some frameworks for faster rendering of the textures.

Pixel format --opt <pixelformat>

Specifies the Pixel format used in the Texture file.

Some formats have native support for the Pixel formats such as .pvr.

Formats like .tga or .png only support 32-bit color values. TexturePacker reduces the colors according to the settings but still writes 32-bit data. This still has some advantages: The memory usage is usually reduced and colors can be dithered. On the target system a simple shift of the color values is sufficient to build the target color values.

Some of the formats like ETC1, PVRTC 2-bit, or PVRTC 4-bit require special decoding in hardware or software and can only be used with specific Data Formats.

Dithering --dither-<mode>

Improves image quality when setting reduced-color formats like RGBA4444. When reducing colors, so-called "banding artifacts" might deliver low image quality. Try experimenting with dithering settings to reduce the artifacts.

• 

  RGBA 8888
  
  

  This is the original image, exported with RGBA 8888 - using the full palette of 16,777,216 colors.

  This consumes 4 bytes per pixel.

• 

  RGBA 4444
  no dithering

  Simple color reduction using nearest neighbor. This causes banding artifacts in the gradient.

  This consumes 2 bytes per pixel.

• 

  RGBA 4444
  with dithering

  Color reduction using dithering - reducing the artifacts and delivering a good image quality.
  

  This consumes 2 bytes per pixel.

TexturePacker comes with several dithering algorithms, please choose from the values below.

Methods with "alpha" in the name also dither transparency. This is useful for gradients, whereas the non-alpha version is better for crisp, solid sprites and tilemaps.

Content Protection --content-protection <key>

You can enter your own key in the line edit - or simply create a new one by pressing Create new key.

To disable encryption use Clear / Disable.

Save as Global Key stores the key in TexturePacker as global - using it for decryption in the .pvr viewer and allowing you paste it into other sprite sheets by simply pressing Use global key

For more information on Content Protection and how to use it see TexturePacker ContentProtection

Max Size --max-width <int> --max-height <int>

Sets the maximum width/height for the texture, default is 2048.

--max-size <int> sets the value for width and height at once.

Fixed Size --width <int> --height <int>

Sets a fixed value for the size. Leave the fields empty to let TexturePacker determine the size.

Size constraints --size-constraints <value>

Forces the texture to meet size constraints:

GUI/CMD value	Description
POT	Forces the texture to have power-of-2 size (2, 4, 8, 16, 32, 64, 128, 256...).
AnySize	Allows the texture to have any size. TexturePacker tries to find the minimum size. Use Pack to restrict the search for the optimum texture.

NPOT was removed in TexturePacker because it was a workaround for a bug in iOS before version 5. iOS allocated additional memory if the textures were POT.
Please use AnySize instead.

Force squared --force-squared

Forces the texture to have a squared size.

Force word aligned --force-word-aligned

Word-aligned textures make sure that each row in the texture uses complete memory words.

Use this to optimize textures for formats such as iPhone.

With 32-bit color formats, all textures are word aligned. 16-bit formats might need to extend the texture by 1px in width.

Scaling variants (previously AutoSD) --variant <scale>:<name>[:<filter>[:allowfraction][:<width>:<height>]]

This feature allows you to create and save multiple variations (e.g. scaling factors) of the sprite sheet during publish without resizing all sprites in your graphics software.

Press the cog wheel button to open the Scaling variants dialog box.

To only build one scaling variation select No scaling variants and click Apply.

You can sort your variations with the buttons Up and Down or Delete them.

Presets

Here you find several already-defined presets for scaling down. After selecting your desired preset click Apply.

Warning: this overwrites your current settings!

Variant name {v}

The extension for this variation. It will replace the {v} in the Data and Texture file names.

Scale

The scale factor for this variation. If you want to add a new scaling variant press Add.

Sprite filter

Only sprites which apply to this filter will be packed into this variation. Filtering works on sprite names and folder paths, the filters will be processed longest first. You can also concatenate several search terms with , to have them packed into one spritesheet.

Max. Texture Size

The texture limits for this variation (not required with Force identical layout).

Identical layout - accept fractional values

Check if you want to accept sub-pixel rendering. This might be needed if no common factor can be found for all scaling factors. In this case, fractional values will be stored in the sprite sheet and this particular scaling variant will be excluded from calculating the common divisor.

Force identical layout --force-identical-layout

This will keep all scaled variation layouts identical. All sizes and coordinates will be divisible by the same common factor to avoid fractional values. E.g. if you scale down your texture by 0.5 the common factor is 2.0. That means all values will be forced to be divisible by 2.0. Sprites are padded with transparency if necessary.

(deprecated Scaling variants command line options)

--auto-sd and --main-extension <string> as well as --autosd-variant <scale>:<extension>[:allowfraction][:<width>[:<height>]] are deprecated and only kept for compatibility with older versions of TexturePacker.

Scale --scale <float>

Sets the basic scaling factor for the texture. Default is 1 to use the original sprite sizes.

You can add and create multiple scale factors of a texture by using Scaling variants settings (see TextureSettings above).

Scale mode --scale-mode <mode>

This field contains different scaling modes for the sprites. The value is used for scaling and for Scaling variants settings.

Algorithm --algorithm <name>

There are currently 2 algorithms:

Order --basic-order <mode>

(only available if Algorithm is Basic)

Sort by --basic-sort-by <value>

(only available if Algorithm is Basic)
Orders sprites before placing them into the sprite sheet.

Heuristics --maxrects-heuristics <mode>

(only available if Algorithm is MaxRects)
Heuristics is used to place the sprites in the texture.

Pack --pack-mode <mode>

Controls how much time TexturePacker uses to find the minimum texture size with NPOT and AnySize constraints.

Multipack --multipack

TexturePacker can create multiple Data and Texture files if not all sprites could be packed into a single texture.

At the moment, the heuristics of Multipack may not deliver optimal results for your needs. Please experiment with the Algorithm and Heuristics options above.

If you need TexturePacker to create the same number of output spritesheets with the same naming convention in HD and SD (with SD textures in half the size), you have to check force identical layout in the Scaling variants options.

Make sure to add one of the following placeholders to the Data and Texture file names to include the spritesheet numbers:

Allow rotation --enable-rotation / --disable-rotation

Allows the rotating of sprites clockwise or counterclockwise by 90 degrees if they have a better fit in the texture. Might not be supported by all game/web frameworks.

The rotation direction (cw/ccw) can be set in the exporter's XML file.

Detect identical sprites (previously Auto alias) --disable-auto-alias

Identical sprites are only stored once in the Texture file - but multiple times in the Data file.

Can be used to save space in the texture. E.g. if animations contain identical frames.

Sprites which are aliased are marked with the 'stack' icon.

Sprites

Trim --trim-mode <value>

Removes transparent pixels from a sprite's border.

This shrinks the sprite's size, allows tighter packing of the sheet, and speeds up rendering since transparent pixels don't need to be processed.

Trim/Crop Threshold --trim-threshold <int>

Allowed values: 1 to 255, default is 1.

Pixels with an alpha value below this value will be considered transparent when trimming the sprite.

Very useful for sprites with nearly invisible alpha pixels at the borders.

Trim modes:

Pivot Point

Anchor Point. Specifies the position inside the sprite that is used as a center for rotation and placement.

Extrude --extrude <int>

Extrude repeats the sprite's pixels at the border. Sprite's size is not changed.

There are two uses for this:

• Reduce flickering in some cases where sprites have to be put next to each other in the final program.
• Check if sprite outlines are OK. E.g. if you want to use sprites to create tilemaps this allows you to see if there are semi-transparent pixels at the borders of the tiles.

Border padding --border-padding <int>

Border padding is the space between the sprites and the border of the sprite sheet. Value adds transparent pixels around the borders of the sprite sheet. Default is 2.

Shape padding --shape-padding <int>

Shape padding is the space between sprites. Value adds transparent pixels between sprites to avoid artifacts from neighbor sprites. The transparent pixels are not added to the sprites. Default is 2.

Use a value of at least 2 to avoid dragging in pixels from neighbor sprites when using OpenGL rendering.

Inner padding --inner-padding <int>

Adds transparent pixels to the inside of the sprite, growing it.

There are two uses for this:

• It can help in preventing cut-off artifacts near the edges of scaled sprites. E.g. if your sprite has a few pixels along its own boundaries, scaling the sprite up or down won't let these pixels appear as gaps or cuts.
• It considerably reduces aliasing along the polygon edges when rotating trimmed or cropped sprites. E.g. if your sprite has many pixels along its own boundaries, it will be drawn more smoothly when rotating it.

Common divisor --common-divisor-x <int> / --common-divisor-y <int>

Extends sprite's sizes to be divisible by this value. The sprite is extended with transparency.

Default is 1 which means the sprite's size is not changed. Max is 2048.

This can be used to:

• Force identical sizes for sprites
• Force identical layout across multiple scaling factors

The feature also influences Trim and Crop to match the given factors.

Heuristic mask --heuristic-mask

Samples the corner pixels of a sprite and removes identical background color. Can be used to cut sprites from a monochrome background.

Reduce border artifacts --reduce-border-artifacts

Adds color to transparent pixels by repeating a sprite's outer color values.

These color values can reduce artifacts around sprites and removes dark halos at transparent borders.

This feature is also known as "Alpha bleeding". Warning: This only works when premultiply alpha is turned off.

Clean transparent pixels --disable-clean-transparency

Sets transparent pixels to color #000 to improve image packing ratio and identical sprite detection (AutoAlias)

Shape outlines --shape-debug

Draws a colored box around a sprite. Can be used for debugging or aligning sprites.

The outlines will also be contained in the resulting sprite sheet files. This is useful for debugging sprite behavior.

You use TexturePacker on the command line like this:
TexturePacker [options] [<imagefolder>] [<*.tps>] [<*.png|gif|tif|jpg|swf|...>]

You can specify one or more image folders or .tps files or images for processing:

<imagefolder>
Recursively adds all known image files from the folder to the sprite sheet

<*.tps>
Executes *.tps file created with TexturePackerPro (requires Pro license), additionally set options override settings in the *.tps file

<images>
Adds single images, supported image formats are: bmp, gif, ico, jpeg, jpg, mng, pbm, pgm, pkm, png, ppm, psd, pvr, pvr.ccz, pvr.gz, pvrtc, svg, svgz, swf, tga, tif, tiff, webp, xbm, xpm

In addition to the commands listed and described in the GUI documentation above you can use the following:

--help                          Display help text
--version                       Print version information
--license-info                  Prints information about the currently installed license
--activate-license <key>        Activate a license key
--gui                           Launch TexturePacker with graphical user interface

Output options:
--force-publish                 Ignore smart update hash and force re-publishing of the files
--replace <regexp>=<string>     Replaces matching parts of the sprite's name with <string>
                                Uses full regular expressions, make sure to escape the expression
--ignore-files <wildcard>       Ignores all images fitting the given pattern (may be used several times)
                                You can use * and ?, make sure to escape the wildcards when working with bash.
                                Please specify the complete path like /path/to/your/sprite.png
                                or use a wildcard like *your/sprite.jpg

Padding:
--padding <int>                 Combination of --shape-padding and --border-padding, value in pixels, default is 2

Graphics optimization:
--background-color <rrggbb>     Set solid background color, default is none, which is transparent
                                The value is a tuple of 3 hexadecimal digit pairs, each pair represents
                                a color channel in order red, green, blue, E.g. ff0000 for red, ffffff for white

Debugging:
--verbose                       Be verbose
--quiet                         No output except for errors

"Custom Exporters have saved me dozens of hours. I can't function without TexturePacker."

Richard Jarell

TexturePacker comes with a lot of different data output formats - both generic like JSON and XML but also platform specific like Cocos2D, Sparrow and others.

Sometimes this is not enough - because a game framework needs its own format - or because it simply does not fit your needs.

The simple solution for you is to create your own custom format. It's easier than you may think, just read the instructions below.

You can

• alter an existing exporter shipped with TexturePacker:
  in Windows look under C:/Program Files/CodeAndWeb/TexturePacker/bin/exporters,
  Mac users go to Applications/TexturePacker.app/Contents/Resources/exporters.
  The plain exporter may be a good starting point.
  Make sure to duplicate the exporter folder to somewhere outside TexturePacker's installation path and rename the folder and the exporter contents as shown below!
• or create a new one from scratch with the following manual.

Basic structure of an exporter

An exporter consists of 2 or more files:

• exporter.xml - the file describing the capabilities of the exporter
• template.txt - the template for the output file format
• filter.qs - an optional file to extend the template file with JavaScript

Preparations before creating your own exporter

First of all, create a directory - it's the Exporter Directory that will contain all your custom exporters - e.g. my-TP-Exporters.

Now create a new subdirectory inside that directory - name it like the exporter you want to create - e.g. testexporter.

Your folder structure should now look like this:

Set the path to your Exporter Directory my-TP-Exporters in TexturePacker's preferences and then quit TexturePacker.

The exporter description file

Create an exporter.xml inside your testexporter directory.

Your folder structure should now look like this:

Here's an example file:

<exporter version="1.0">     <!-- file format version, must be 1.0 -->

    <!-- identifier of the exporter -->
    <!-- change this if you duplicated an existing exporter -->
    <name>testexporter</name>
    
    <!-- old exporter identifiers (optional); if a tps file with such an id is opened,
         its id is automatically changed to the one specified in <name> -->
    <nameAlias>otherexporter</nameAlias>
    <nameAlias></nameAlias>
    
    <!-- name of the exporter that is shown in the framework selector dialog -->
    <!-- change this if you duplicated an existing exporter -->
    <displayName>TestExporter</displayName>
    
    <!-- description of the exporter -->
    <description>My first custom exporter for TexturePacker</description>

    <!-- exporter version; unused at the moment -->
    <version>1.0</version>
    
    <files>

        <!-- list of data files which should be generated -->        
        <file>

            <!-- name of this file type; used in the tps file and by the commandline client:
                 for each MYDATA file a commandline option --MYDATA-file is evaluated -->
            <name>datafile</name>

            <!-- human readable name (used in the TexturePacker GUI) -->
            <displayName>MyDataFile</displayName>

            <!-- file extension, without '.' -->
            <fileExtension>txt</fileExtension>

            <!-- description what the file contains, used for tooltips in the GUI (optional) -->
            <description>My txt custom exporter for TexturePacker</description>

            <!-- name of the template file -->
            <template>testexporter.txt</template>

            <!-- this file is optional, i.e. if the user does not specify an
                 output file name, the file will not be generated; (optional, default is 'false') -->
            <optional>false</optional>
            
            <!-- specifies for which scaling variant this data file is generated:
                 all:   for all variants  (default)
                 first: only for the first variant
                 last:  only for the last one   -->
            <hasSeparateAutoSDFiles>all</hasSeparateAutoSDFiles>

            <!-- do not write a file for each multipack variation (optional, default is 'true') -->
            <hasSeparateMultiPackFiles>true</hasSeparateMultiPackFiles>

        </file>
       
        <!-- add more <file> ... </file> tags if you need more than one output file -->
    </files>

    <!-- target framework supports trimming -->
    <supportsTrimming>true</supportsTrimming>

    <!-- target framework supports rotated sprites -->
    <supportsRotation>true</supportsRotation>

    <!-- rotated sprites direction (cw/ccw), only required for supportsRotation=true -->
    <rotationDirection>cw</rotationDirection>

    <!-- supports texture sizes which are not powers of two -->
    <supportsNPOT>true</supportsNPOT>

    <!-- target framework supports pivot point settings (optional, default=false) -->
    <supportsPivotPoint>false</supportsPivotPoint>
    
    <!-- ensure that width/height of generated texture is multiple of this factor (optional, default=1) -->
    <textureSizeFactor>1</textureSizeFactor>

</exporter>

The tags that can be used in the exporter file are described in detail in the table below:

The template file

The template file contains a prototype of the data file to write with some additional markup to format the text, build loops and decisions.

If you copied the data from above, you should now create a testexporter.txt as specified earlier in <template> in the same directory as the exporter.xml.

Your folder structure should now look like this:

This example template file will write a data file containing a list of sprites with frame coordinates, a flag for rotation and the source coordinates:

// Created with TexturePacker (http://www.codeandweb.com/texturepacker)
//
// Sprite sheet: {{texture.fullName}} ({{texture.size.width}} x {{texture.size.height}})
//
// {{smartUpdateKey}}

sprites = [
{% for sprite in allSprites %}
  {{sprite.trimmedName}} = [
    frame = [   
      {{sprite.frameRect.x}}, 
      {{sprite.frameRect.y}}, 
      {{sprite.frameRect.width}}, 
      {{sprite.frameRect.height}}
    ],
    rotated = {{sprite.rotated}},
    source = [
      {{sprite.cornerOffset.x}},
      {{sprite.cornerOffset.y}},
      {{sprite.untrimmedSize.width}},
      {{sprite.untrimmedSize.height}}
    ]
  ] {% if not forloop.last %}, {% endif %}
{% endfor %}
]

Using values

Values are surrounded by {{ and }}, values inside a structure are separated by ..

Filters can be used to format values - e.g. {{x|floatformat:3}} formats the floating point value with 3 digits.

Control structures

if

{% if condition %} ... {% else %} ... {% endif %} - conditional execution of one branch in the file.

for

{% for object in objectList %} ... {% endfor %} - loop over a list of elements.

Data structure

The template file is loaded with a set of parameters created during the packing process. The values can be referenced using the template language.

{{texture}}

{{texture}} contains the basic layout of the texture.

{{smartUpdateKey}}

When a Publish is started, TexturePacker checks if the Data file already exists. If the file is found, the contents are read and a text sequence is searched for - $TexturePacker:SmartUpdate:....hashvalue....$. The value is a hash over all file dates, sizes and the parameters used to create the texture. If the value is identical with the current state of the files, no output is created to speed up batch operations.

To add this smart update key, use {{smartUpdateKey}} somewhere in the template file. Make sure that the value is somewhere in a comment or some other place where it does not confuse the module reading the data.

{{sprites}} and {{allSprites}}

{{sprites}} contains a list of unique sprites only. That means alias sprites (sprites which have an identical sprite) are not part of the list. You can reference them by accessing a sprite's .aliasList property.

{{allSprites}} contains a list of all sprites. In most cases it's easier to use this property instead of sprites.

The standard way to iterate over the sprites is using

{% for sprite in allSprites %}
    ...
{% endfor %}

You can now access the sprite's individual properties like in the example above.

all available Tags

TOPLEVEL
--------

smartUpdateKey:         hash string used to speed up export

settings                tps file settings
    .ditherType
    .textureFormat
    .outputFormat
    .contentProtection.key
    .autoSDSettings[0..variantCount-1]
        .scale
        .extension
        .spriteFilter
        .acceptFractionalValues
        .maxTextureSize.width
        .maxTextureSize.height
    .tpsName
    .allowRotation
    .flipPVR
    .forceIdenticalLayout
    .multiPack
    .shapeDebug
    .trimSpriteNames
    .autoAliasEnabled
    .premultiplyAlpha
    .reduceBorderArtifacts
    .fixedTextureSize.width
    .fixedTextureSize.height
    .dataFormat
    .textureSubPath
    .borderPadding
    .shapePadding
    .commonDivisorX
    .commonDivisorY
    .dpi
    .backgroundColor

variantIndex:     0                    for hasSeparateAutoSDFiles=first
                  variantCount-1       for hasSeparateAutoSDFile=last
                  [0..variantCount-1]  for hasSeparateAutoSDFiles=all

multiPackIndex:   [0..textureCount-1] for each multi-pack texture; or -1 if hasSeparateMultiPackFiles=false

variantParams     settings adapted for the current scaling variant
    .scale
    .shapePadding
    .borderPadding
    .commonDivisorX
    .commonDivisorY
    .extrude
    .baseFactor
    .maxTextureSize.width
    .maxTextureSize.height
    .fixedTextureSize.width
    .fixedTextureSize.height

allResults
    .textures
    .nonFittingSprites

texture           current texture (only available if hasSeparateMultiPackFiles=true)

sprites           sprites (without aliases) of the current texture
                    (or of complete result, if hasSeparateMultiPackFiles=false)

allSprites        sprites (including aliases) of the current texture
                    (or of complete result, if hasSeparateMultiPackFiles=false)

SUB-STRUCTURES
--------------

<texture>
    .size.width
    .size.height
    .area
    .sprites[0..n]         sprites on the current texture, without aliases
    .allSprites[0..m]      all sprites on current texture, including aliases
    .absoluteFileName
    .trimmedName
    .fullName

<sprite>
    .size.width/.height
    .frameRectWithoutRotation.x/.y/.width/.height
    .frameRect.x/.y/.width/.height
    .frameRectRel.x/.y/.width/.height
    .sourceRect.x/.y/.width/.height
    .cornerOffset.x/.y
    .untrimmedSize.width/.height
    .fileData
        .absoluteFileName
        .lastModified
        .created
        .fileSize
    .trimmed
    .rotated
    .isSolid
    .trimmedName
    .fullName
    .aliasList[0..n]        list of aliased sprites
    .centerOffset.x/.y
    .pivotPoint.x/.y

Enhancing the exporter with JavaScript

In some cases a pure template system is not enough - e.g. if you need to do some calculations. This can be achieved by enhancing the system with some JavaScript.

For this, create 2 directories inside the exporter's folder: grantlee and grantlee/0.2:

In the 0.2 folder place your JavaScript file. The extension must be .qs.

Contents of the JavaScript file

Inside the file a filter can be registered. A filter is a function that receives a value, processes it, and returns it to the template which adds the value to the output file.

The following example registers a filter called makecssselector which takes a string, replaces all occurrences of -hover with :hover, and returns the result.

// the filter function
var MakeSelectorFilter = function(input)
{
  var input = input.rawString();
  return input.replace("-hover",":hover");
};

// the filter name
MakeSelectorFilter.filterName = "makecssselector";

// register the filter
Library.addFilter("MakeSelectorFilter");

Loading and using the filter

Loading a filter is easy. Just add the following line to the template:

{% load makecssselector %}

The value must be the same as the file name.

Using the filter is done by appending the filter's name to a value:

{{sprite.trimmedName|makecssselector}}

Tricks

Since a filter only takes a single parameter, some tricks can be used to perform calculations with multiple parameters:

Use one filter to set a global variable, use another to perform the calculation:

width=1;

var SetWidth = function(input)
{
    width=input; // store the value
    return "";   // return empty string
};
SetWidth.filterName = "setWidth";
Library.addFilter("SetWidth");

var MakeRelX = function(input)
{
    return String(input/width); // perform calculation, return result as string
};
MakeRelX.filterName = "makeRelX";
Library.addFilter("MakeRelX");

This is how you can use it:

{{texture.size.width|setWidth}} -- set the width
{{sprite.frameRect.x|makeRelX}} -- calculate x/width

Make your own exporter

Exporter for .less framework from Paul

In particular, this fits into a Twitter Bootstrap framework as follows:

// Copied from sprites.less with minimal change
.sprite_file(@file) {
  display: inline-block;
  vertical-align: -35%;
  background-image: @file;
  background-repeat: no-repeat;

  .ie7-restore-right-whitespace();
}

[class^="icon-mysprites-"],
[class*=" icon-mysprites-"] {
  .sprite_file(image-url('sprites/icon-mysprites.png'));
}

// Import the sprite file
@import "sprite-positions/icon-mysprites";