Using JavaScript to enhance your TexturePacker output format

Andreas Löw texturepacker tutorial exporter

In my last blog post I explained how to enhance PhysicsEditor with custom data formats. TexturePacker 3.0.0 uses the same technique so everything explained there also works here.

Additionally to using the power of the GrantLee/Django template system you can enhance the rendering even further by using javascript functions in your templates.

Your exporter directory usually contains a exporter.xml and the template file. You might also add sub-folder structure - take a look at this example from the plaintext exporter:

plain
    ├── exporter.xml
    ├── grantlee
    │   └── 0.2
    │       └── makecssselector.qs
    └── plain.txt

The subfolder grantlee/0.2 is required with the current TexturePacker version for the extensions to be found.

The makecssselector.qs is the interesting file. It's extension is qt which is because I use Qt for my applications. But it's just a plain javascript file.

This is the code of the exporter:

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

MakeSelectorFilter.filterName = "makecssselector";
MakeSelectorFilter.isSafe = false;
Library.addFilter("MakeSelectorFilter");

It registers the new filter called makecssselector and adds a function which replaces strings ending with -hover with :hover used as CSS selectors.

In your template you also need to make sure to load the new functionality. You can do this by adding the following line somewhere in the top of the file:

{% load makecssselector %}

After loading you can use the new selector:

{{sprite.fullName|makecssselector}}