Thirdparty Integration: Using Texture Packer for single file assets

Most people don't care about file requests, but if you do… you might value this little tutorial on using Texture Packer with Hype. We will create a single image asset file containing multiple images and use CSS to use them individually. This tutorial uses the free version of Texture Packer.

The tutorial can be found on fleeq

Hope it helps.

Download Example-File:
SpriteSheet.hype.zip


Update: Read below… there are simpler ways of doing this now!

3 Likes

Very interesting tutorial.

Which version of TexturePacker would you recommend?

In the tutorial I used the latest version but older version should also work (if you already own it). The free version is sufficient for this tutorial.

I found that using the newer CSS-Responsive-Exporter from Texture-Packer allows you to use the classes exported directly without all the additional steps described in the older tutorial above. This requires importing the CSS file to your resource folder directly.

Here is an additional export (based on the responsive exporter) that sets the mask properties to a file of the same name but with a -mask.png extension. That image is not created for you but can be added …

Installation:

  1. Unpack the folder somewhere central but permanent (like your Documents-folder)
  2. Open Texture-Packer and navigate to the settings and select the unpacked folder as your additional extension folder (more on that here)

Hint on installing chose the enclosing folder in step (Installation, Step 2):
:white_check_mark: your-path/Texture-Packer-Exporter/
:x: your-path/Texture-Packer-Exporter/css-mask/

Usage:

  1. Import PNG assets into Texture Packer
  2. Select the new exporter, should be CSS (responsive, retina, mask)
  3. Export it once as PNG
  4. Export it finally as JPEG

use the PNG to create your -mask.png-Version (only the alpha channel) and if needed (re)export your JPEG version in the lowest quality acceptable from the PNG source. If you don't like the automatic background color the PNG-->JPEG conversion automatically determines… this (re)export step can also be used to customize the color.

Now import the following into your Hype-Project:

  1. CSS file from Texture Packer (custom exporter)
  2. the (re)exported JPEG-file
  3. the (re)exported PNG-Alpha-channel-file

Now assigning the class name corresponding to the filename should display the element on the Hype stage using a mask while giving control over the image and mask separately.

Example Result:
Texture-Packer-Custom-Mask-Exporter-Example.hype.zip (176,3 KB)

Custom Texture-Packer-Exporter:
Texture-Packer-Exporter.zip (9,0 KB)

1 Like

6 posts were split to a new topic: Using Texture Packer to reduce size of image sets with alpha channel

5 posts were split to a new topic: Feature Request: Built in sprite/texture generator