This is a tutorial on how to use the TexturePacker extension for Unity. There are two different versions of TexturePacker – The stand alone TexturePacker, and the TexturePacker Unity Extension. Both have a limited function free version in addition to the full version.
To get started as quick as possible, here is Video Tutorials Section (will be upgraded shortly)
Basicly tutorial is splitted in 3 parts.
- Introduction
- Using with 3D object’s (animation, automatic UV)
- Using with GUI (drawing GUI textures from Atlas, GUI Animation)
Introduction.
Why you should use texture atlases in your game:
- Reduced build size
- Reduced RAM consumption
- Increased performance
Why use TexturePacker?
TexturePacker will allow you to easily and quickly create texture atlases for your game.
- Rotation
- Trimming / cropping
- Scaling
- Smoothing
- Note: Some features are not available in the free version
Learn More here:
Why use the TexturePacker Unity Extension?
Unity GUI
- Draw textures from the atlas
- Supports TexturePacker features (rotation. crop, trim)
- GUI animations
3D object
- Auto generation of UV coordinates for Meshes
- Rotated images for optimal space
- Play animations from atlas
- Preview in editor mode
- Note: Some features are not available in the free version
Using with 3D objects
TexturePacker is available for download here:
The TexturePacker Unity extension is available here:
Free
Paid
Creating the Texture Atlas:
For the first tutorial, we’ll pack textures for our scene (Assets are available in the TexturePacker Extension package under Assets/Extensions/TexturePacker/Tutorial/Art/AtlasSource).
Open TexturePacker, and simply drag the textures inside. Now let’s configure our atlas.
Output Options
Data Format: Unity3D
Data File: YourProject/Assets/Resources/TutorialAtlas_data.txt Texture File: YourProject/Assets/Resources/TutorialAtlas.png
Texture Format: png
Geometry Options
Check the “Force Squared” toggle
Layout Options
Algorithm: MaxRect (Full version only) or Basic (available in the free version)
Allow Rotation: checked (Full version only) unchecked (free version)
Trim mode: none (Trim mode is only supported for GUI rendering)
Note
I has described most optimal options, but you can experiment with TexturePacker option to get the best result for your atlas.
Next, press the Publish button. Your altas should look like this:
Free version:
If you do not see the image, you can view the image by clicking directly on the URL
Paid version:
If you do not see the image, you can view the image by clicking directly on the URL
Atlas is ready, so we need material for it.
In Resources Folder Create->Material. Set material name as TutorialAtlasMaterial, attach TutorialAtlas.png as main material texture and change shader to Transparent->Diffuse.
*Note: The material will be created automatically by Asset Processor editor script. But you can create any number of other materials with different shader for atlas.
Using the texture atlas with a model:
Using the texture atlas with a model:
(Assets/Extensions/TexturePacker/Tutorial/Art/Models/Sword/sword_01)
It already has a texture and a material assigned. Replace this with a texture from the atlas:
-
Select the sword_01 gameobject (the one with the MeshRenderer component attached).
-
Attach TPMeshTextureEx component (TPHelper component will be added automaticly)
-
Choose Atlas and Texture in TPHelper menu
-
Atlas: TutorialAtlas
-
Texture: sword_01_dif
If you do not see the image, you can view the image by clicking directly on the URL
The sword is now using the texture from the atlas.
*Note: Do not attach TPMeshTexture component, it will casue component lost if you replace TexturePacker.dll. Use it only for extending.
Using the texture atlas with skinned model
The usage is similar to a simple model.
- Select the sword_01 gameobject (the one with the SkinnedMeshRenderer component attached).
- Attach TPSkinnedMeshTextureEx component (TPHelper component will be added automaticly)
- Choose Atlas and Texture in TPHelper menu
Play an animation from the atlas:
This approach is only useful if you want play animation on YOUR mesh (not simple plane). Trim / Crop is not supported with this approach. If you just want to play animation on plane from atlas, please follow Creating Sprite Animation steps. It has additional features implemented as:
- Trim / Crop support
- Animation can contain frames from different atlases.
For the next tutorial, we will play an animation from the texture atlas on a cube:
-
Create a cube in the scene by selecting GameObhect->Create Other->Cube
-
Change the material on the cube to TutorialAtlasMaterial
-
Attach a TPMeshAnimation component
-
Configure the TPMeshAnimation component options as follows:
-
Atlas: TutorialAtlas
-
Frames: add 6 frames fireball_0001, fireball_0002, fireball_0003, fireball_0004, fireball_0005, fireball_0006
The component should look like this:
If you do not see the image, you can view the image by clicking directly on the URL
Now press play and you will see fireball animation playing on the cube. You can try other meshes and experiment with different TPMeshAnimation options.
You always can automate this process using extensions, there are a few examples of how do this inside the package. See the MyFireAnimation, MyTeslaAnimation and MyMeshTexture classes.
The complete scene can be found here:Assets/Extensions/TexturePacker/Tutorial/Scenes/AtlasesAnim
The demo scene uses only one atlas. The entire scene with almost 100 objects and 50 animations has only 1 Draw Call, 1 Texture, and uses only 1MB of memory.
You can view a preview of the scene in the web player here:
https://dl.dropboxusercontent.com/u/83133800/TexturePacker/3D/build.html
Screenshot:
Optimization.
There are further optimizations that can be done.
The scene uses only one texture for the whole scene - already good benefit - but we can squeeze even more. The size of our texture is 754x754, if we had choose RGBA 32 compression it would have consumed 2.2 MB. But setting the compression to PVRTC and stretching the texture to 1024 * 1024 (compression works only with POV2 textures) changed the memory consumption to only 1MB. With just a little quality loss, it can be scaled down to 512x512, reducing memory consumption to only 256KB.
The POV2 TexturePacker options allow you to always see how many textures you can add to your atlas.
Using with GUI
For the next tutorial, we will use the same atlas from our 3D scene, But you can always experiment and create new one, using the source GUI textures which are located under Assets/Extensions/TexturePacker/Tutorial/Art/AtlasSource.
The difference between creating a texture for a 3D object and for use in the GUI is that for GUI atlases you can use the Trim / Crop TexturePacker methods to save even more space (this option is available in paid version of TexturePacker)
First, we need to create our GUI drawing class. And assign it to a GameObject.
Here is an overview of some useful snippets for working with the GUI part of the TexturePacker extension.
Getting the Atlas:
TPackManager.getAtlas(MyAtlasName);
Getting the Texture:
TPAtlas atlas = TPackManager.getAtlas(MyAtlasName);
TPAtlasTexture texture = atlas.getTexture("myTextureName");
Or
TPAtlasTexture texture = TPackManager.getAtlas(MyAtlasName).getPngTexture("myTextureName");
Drawing a texture:
void OnGUI() {
TPackManager.draw(Rect rect, string atlas, string textureName);
}
AtlasGUIExample – an Example GUI class to draw textures from the atlas:
public class AtlasGUIExample : MonoBehaviour {
private TPAtlasTexture play;
private Texture2D unityTexture;
void Awake() {
play = TPackManager.getAtlas(Atlases.EXAMPLE).getPngTexture("play");
//Warning to Get Texture2D from atlas, should remain the same size which was generated,
//that's why we using another atlas here
unityTexture = TPackManager.getAtlas(Atlases.EXAMPLE2).getUnityTexture("play");
}
void OnGUI() {
play.draw(new Rect(0, 0, play.width * 0.5f, play.height * 0.5f));
play.draw(new Rect(0, 75, play.width, play.height));
GUI.DrawTexture(new Rect(0, 225, unityTexture.width, unityTexture.height ), unityTexture);
TPackManager.draw(new Rect(200, 0, 122, 42), Atlases.EXAMPLE, "f_share.png");
TPackManager.getAtlas(Atlases.EXAMPLE).draw(new Rect(200, 100, 122, 42), "t_share.png");
}
AtlasGUIAnimationExample – An example GUI Animation class - (GUI animation is not available in the free version). Using the same atlas as for our 3D scene above.
using UnityEngine;
using System.Collections;
public class AtlasGUIAnimationExample : MonoBehaviour {
private TPGUIAnimation anim;
private TPGUIAnimation Scaledanim;
void Awake() {
anim = TPGUIAnimation.Create();
Scaledanim = TPGUIAnimation.Create();
for(int i = 1; i < 7; i++) {
TPAtlasTexture frame = TPackManager.getAtlas(Atlases.EXAMPLE).getPngTexture("fireball_000" + i.ToString());
anim.addFrame(frame);
Scaledanim.addFrame(frame);
}
anim.pos = new Vector2(200, 200);
anim.loop = true;
anim.fps = 25;
anim.Play();
Scaledanim.pos = new Vector2(300, 200);
Scaledanim.loop = true;
Scaledanim.fps = 25;
Scaledanim.scale = 0.5f;
Scaledanim.Play();
}
void OnGUI() {
anim.draw();
Scaledanim.draw();
}
}
You can view this here in the web player:
https://dl.dropboxusercontent.com/u/83133800/TexturePacker/previewGUI/previewGUI.html
In conclusion, here are some of the advantages you will get from using TexturePacker:
- Fast and easy atlas generation
- Easy to remove and/or add texture from the atlas
- Built in animation solution
- Reduced build size
- Reduced RAM consumption
- Increased performance
Special Thanks:
NassacGames for free 6 Medieval Shields pack package, it was used
for building graphic part.
Jaimi, eskimojoe for help with this tutorial.
If you have any comments, questions or suggestions, feel free contact support team via e-mail: stans.assets@gmail.com
I hope you enjoyed the tutorial and good luck with your game 
