add doc for texture packer

docs/04-game-asset-structure/02-texture-packer.md

@@ -4,4 +4,84 @@ sidebar_position: 2
 
 # Texture Packer
 
-> To be added
+## 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)
+
+---