diff --git a/docs/04-game-asset-structure/02-texture-packer.md b/docs/04-game-asset-structure/02-texture-packer.md index 3c3271a..8040e80 100644 --- a/docs/04-game-asset-structure/02-texture-packer.md +++ b/docs/04-game-asset-structure/02-texture-packer.md @@ -4,4 +4,84 @@ sidebar_position: 2 # Texture Packer -> To be added \ No newline at end of file +## 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) + +--- \ No newline at end of file diff --git a/docs/04-game-asset-structure/img/scaling-variants.png b/docs/04-game-asset-structure/img/scaling-variants.png new file mode 100644 index 0000000..878192a Binary files /dev/null and b/docs/04-game-asset-structure/img/scaling-variants.png differ diff --git a/docs/04-game-asset-structure/img/setting-texture-packer.png b/docs/04-game-asset-structure/img/setting-texture-packer.png new file mode 100644 index 0000000..886d459 Binary files /dev/null and b/docs/04-game-asset-structure/img/setting-texture-packer.png differ diff --git a/docs/04-game-asset-structure/img/texture-files.png b/docs/04-game-asset-structure/img/texture-files.png new file mode 100644 index 0000000..b0541bd Binary files /dev/null and b/docs/04-game-asset-structure/img/texture-files.png differ diff --git a/docs/04-game-asset-structure/img/texture-folder.png b/docs/04-game-asset-structure/img/texture-folder.png new file mode 100644 index 0000000..10d9235 Binary files /dev/null and b/docs/04-game-asset-structure/img/texture-folder.png differ diff --git a/docs/04-game-asset-structure/img/texture-overview.png b/docs/04-game-asset-structure/img/texture-overview.png new file mode 100644 index 0000000..7887c53 Binary files /dev/null and b/docs/04-game-asset-structure/img/texture-overview.png differ