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:
- Unpack the folder somewhere central but permanent (like your Documents-folder)
- 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):
your-path/Texture-Packer-Exporter/
your-path/Texture-Packer-Exporter/css-mask/
Usage:
- Import PNG assets into Texture Packer
- Select the new exporter, should be CSS (responsive, retina, mask)
- Export it once as PNG
- 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:
- CSS file from Texture Packer (custom exporter)
- the (re)exported JPEG-file
- 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)