---
sidebar_position: 2
---

# Texture Packer

## Overview

This guide explains how to use a **Texture Packer** workflow to bundle multiple image assets into a single atlas texture file. This enhances performance by reducing draw calls and improving load times.

![Overview](./img/texture-overview.png)

---

## Configuration

### Prepare Assets

Place finalized image assets into the `Raw-Assets` folder. These assets will be included in the texture atlas.

---

### Create a New Sprite Sheet

1. Launch **TexturePacker**
2. Drag and drop your image assets
3. Set **Data Format** to:
   - `Cocos2d-x` or
   - `Cocos Creator`
4. Configure atlas settings such as:
   - Max size
   - Padding
   - Trimming options
5. Set output location
6. Configure scaling variants (explained below)

![Settings](./img/setting-texture-packer.png)

---

#### Recommended Settings

| Option              | Value            |
|---------------------|------------------|
| Trim Mode           | Trim             |
| Texture Format      | **PNG-32**       |
| Max Size            | **2048x2048**    |
| Force Squared       | Enabled          |
| Export Multipack    | Manual           |
| Allow Rotation      | Enabled          |

---

#### Scaling Variants Settings

**Scaling Variants** allow you to export multiple resolution versions of the same atlas (e.g., desktop vs. mobile).

##### Setup Steps

1. Open the **Scaling Variants** panel  
2. Set **Preset** to `Custom`  
3. Click **Add** to create new variants

| Variant Name | Scale | Suffix  |
|--------------|--------|---------|
| desktop      | 1.0    | *(none)* |
| mobile       | 0.7    | `@0.7x`  |

##### Example Scaling Variants 

![Scaling](./img/scaling-variants.png)

---

## Export Output

When exporting, TexturePacker generates:

- `.png` — Sprite atlas image
- `.plist` / `.json` — Metadata with frame coordinates and dimensions

Example:

![folder](./img/texture-folder.png)
![File](./img/texture-files.png)

---