Merge pull request 'feature/add-texture-packer' (#81) from feature/add-texture-packer into develop

Reviewed-on: #81

docs/02-setup-main-game/05-main-scene/06-special-win.md

@@ -90,3 +90,4 @@ Special Wins are high-value reward events categorized by payout thresholds:
 **Tip**:
 - Move assets to `custom-scale/` to resolve image quality issues.
 - Customize font styles based on game design.
+- [View Platform Asset Structure](/docs/category/game-asset-structure)

docs/02-setup-main-game/05-main-scene/07-item-description.md

@@ -52,9 +52,8 @@ The **Item Description** system provides detailed information about game items,
     | Step | Action | Image Reference |
     |------|--------|-----------------|
     | 1 | Set **Sprite Frame** in `background` using prepared assets. | ![Step 1](./img/07-item-description/setup-item-big-1.png) |
-    | 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#item-description-small) |
-    | 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#item-description-no-odds) |
-
+    | 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#prefab-configurations) |
+    | 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#prefab-configurations) |
 **Tip**:
 - Use the helper tool to configure:
   1. Set **Content Size** and **Cell Item Size** per game design.

docs/02-setup-main-game/05-main-scene/08-free-round.md

@@ -63,7 +63,7 @@ The **Free Round** system manages the display and logic for tracking remaining f
 **Tip**:
 - Follow game design for position and size.
 - Use separate textures for Desktop and Mobile.
-- Ensure the main scene includes the popup panel ([See Popup Panel Guide](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)).
+- Ensure the main scene includes the popup panel ([See Popup Panel Guide](/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)).
 
 ## Game Result Example
 | Platform | Popup | Action | Result |

docs/02-setup-main-game/05-main-scene/13-game-logo.md

@@ -114,3 +114,4 @@ The **Game Logo** is a key branding element displayed consistently across all pl
 **Tip**:
 - Test the static logo display under slow network conditions to ensure fallback works.
 - Verify animation states (`play` and `idle`) for smooth transitions.
+- [See More Info](/docs/category/game-asset-structure)

docs/02-setup-main-game/05-main-scene/19-gamble.md

@@ -73,9 +73,9 @@ Place the gamble node in the following scene structure:
 ![Backgrounds](../img/05-main-scene/gamble/add-background-gamble.png)
 
 1. Use background scenes for the gamble feature:
-  - `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#2-setup-background-landscape)
+  - `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#setup-steps)
 
-  - `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#3-setup-background-portrait)
+  - `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#setup-steps)
 
 2. Attach the `orientation-ui-controller` component to both `gamble-background-landscape` and `gamble-background-portrait` nodes.  
   3. The `gamble-background-portrait` node has a dedicated component for portrait mode:
@@ -87,4 +87,4 @@ Place the gamble node in the following scene structure:
 ## Game Result Example
 
 Make sure the main scene includes the Win Limit Panel.  
-🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#gamble-win-limit)
+🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#overview)

docs/03-setup-special-feature/02-free-spin.md

@@ -7,6 +7,269 @@ sidebar_position: 2
 ## Overview
 The **Free Spin (or Free Games) Feature** awards players a set number of spins without requiring additional bets. During these spins, players can still win prizes—often larger than in the base game—without spending any of their own credits.
 ![Free Spin Overview](./img/freespins/fs-trigger.jpg)
-## Implementation
+
+## Implementation Guide
 
 ### Prepare Assets
+
+| Component Type         | Description                                       | Visual |
+|------------------------|---------------------------------------------------|--------|
+| **Core Components**    | Locate the prefabs from the core package.         | ![Core Prefabs](./img/freespins/freespin-prefabs-core.png) |
+| **Game-Specific Components** | Prefabs are already present in the main game scene. | ![Game Prefabs](./img/freespins/freespin-prefabs-game.png) |
+
+---
+
+### Setup Scene
+
+#### Structure Free Spins
+
+Your scene should include the following nodes:
+
+- **Trigger**
+- **Retrigger**
+- **Win**
+
+***Example Scene Structure:***
+
+![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png)
+
+|      Property            | Description                                               |
+|------------------------- |----------------------------------------------------------|
+| `transitionStart`        | Triggers the show animation when Free Spins start.<br/>Default: `null`. |
+| `transitionStop`         | Triggers the return animation to the base game.<br/>Default: `null`.    |
+| `nodeActivate`           | Maintains the visual state during Free Spins.             |
+| `freeSideBandContainer`  | Activates the Free Spins side band visual.                |
+
+---
+#### Component Configuration
+
+##### Trigger & Retrigger
+
+To configure the Free Spin **trigger** and **retrigger** components, follow these steps:
+
+1. **Add Animations** 
+
+Include the required animations for both the trigger and retrigger elements.
+
+![Add Animation](./img/freespins/add-anim-freespin.png)
+![Add Animation Content](./img/freespins/add-anim-content.png)
+
+| Node Name | Purpose                                 | Location in Core Package                                         |
+|-----------|-----------------------------------------|------------------------------------------------------------------|
+| `content` | Handles zoom-in and zoom-out animations | `assets/core-assets/slotty-core/packages/feature-game/animations` |
+
+![Trigger Config](./img/freespins/freespin-trigger.png)
+
+| Property               | Description                                                              |
+|------------------------|--------------------------------------------------------------------------|
+| `durationPresentation` | Duration (in seconds) the trigger animation plays before auto-stopping   |
+
+2. **Add Background Animation Effect**  
+
+![Effect Example](./img/freespins/effect-explosive.png)
+
+| Prefab Name | Purpose                                         | Location in Core Package                                    |
+|-------------|-------------------------------------------------|-------------------------------------------------------------|
+| `explosive` | Background animation effect triggered           | `assets/core-assets/hyper-core/packages/explosive/prefabs`  |
+
+3. **Configure Particle Effects**  
+
+![Particles](./img/freespins/textture-particles.png)
+![Set Particles Scale](./img/freespins/set-particles-scale.png)
+
+| Node Name   | Purpose                                                                                 | Location in Core Package                                   |
+|-------------|-----------------------------------------------------------------------------------------|------------------------------------------------------------|
+| `particles` | - Particle effects around title and number triggers.<br/>- Set scale to `1` for visibility. | `assets/core-assets/slotty-core/packages/present/particles` |
+
+:::tip
+Set up the **present freespin retrigger** in the same way as the **present freespin trigger**.
+:::
+
+##### 1. present freespin trigger
+    
+Add fonts and textures for Free Spin trigger.
+
+![Trigger](./img/freespins/trigger-freespin.png)
+
+##### 2. present freespin retrigger
+
+Add fonts and textures to show retrigger effect.
+
+![Retrigger](./img/freespins/retrigger-freespin.png)
+
+##### Add Font
+
+![config](./img/freespins/trigger-freespin-font.png)
+
+#### 3. Present Free Spin Win
+
+**Free Spin Win Setup**
+
+![Win](./img/freespins/set-freespin-win.png)
+
+| Property                | Description                                                                                   |
+|-------------------------|-----------------------------------------------------------------------------------------------|
+| `content`               | Node for displaying the win animation content.                                                |
+| `durationPresentWin`    | Duration (in seconds) that the win presentation is shown.                                     |
+| `animation`             | - Animation controller for the win presentation.<br/>- Located at: `assets/core-assets/slotty-core/packages/feature-game/animations` |
+| `clipStartPresentation` | Animation clip played when the win presentation starts.                                       |
+| `clipStopPresentation`  | Animation clip played when the win presentation ends.                                         |
+| `allowPresentWinPoint`  | Enables the display of win points during the presentation.                                    |
+| `durationCountPoint`    | Duration (in seconds) for counting up win points.                                             |
+| `lblTotalWinPoint`      | Label node showing the total win points.                                                      |
+| `lblTotalFreeSpinCount` | Label node showing the total number of free spins awarded.                                    |
+
+- Add congratulatory font and texture for the win display.
+
+![Win](./img/freespins/win-freespin.png)
+
+---
+
+:::tip Best Practice
+Follow the visual and font flow as defined by your game's design system.
+:::
+
+---
+#### Free Spins Count Box
+
+The **Free Spins Count Box** displays the remaining number of free spins to the player. Follow these steps to set it up:
+
+##### Steps to Add the Count Box
+
+| Step | Description                                                                 | Image                                         |
+|------|-----------------------------------------------------------------------------|-----------------------------------------------|
+| 1    | Locate the `freespins-count-box` prefab in the Core package.                | ![Core Prefab](./img/freespins/find-freespin-box.png) |
+| 2    | Add the `freespins-count-box` prefab to your main game scene.               | ![In Scene](./img/freespins/game-freespin-box.png) |
+| 3    | Verify its appearance in both desktop and mobile modes.                     | ![Mobile Mode](./img/freespins/both-mode-mobile.png) |
+
+##### Platform-Specific Setup
+
+Assign the appropriate node and controller for each platform:
+
+| Platform | Node Name                | Component to Add            | Example Image                                         |
+|----------|--------------------------|-----------------------------|-------------------------------------------------------|
+| Desktop  | `freespins-box-desktop`  | `Platform-ui-controller`    | ![Desktop Controller](./img/freespins/add-script-freespin-counter.png) |
+| Mobile   | `freespins-box-mobile`   | `Platform-ui-controller`    | ![Mobile Controller](./img/freespins/add-script-freespin-counter-mobile.png) |
+
+##### Asset Configuration
+
+Ensure the correct assets are used for each platform:
+
+| Platform | Asset Path                                                        | Example Image                                                                 |
+|----------|-------------------------------------------------------------------|-------------------------------------------------------------------------------|
+| Desktop  | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Desktop Assets](./img/freespins/freespin-counter-box-desktop.png) |
+| Mobile   | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`  | ![Mobile Assets](./img/freespins/freespin-counter-box-mobile.png)  |
+| Common   | Freespins Box Background                                              | ![Common Asset](./img/freespins/freespin-counter-box-common.png) |
+
+##### Font Setup
+
+Set the font for the count box display:
+
+![Font Setup](./img/freespins/set-font-freespin-count-box.png)
+
+---
+#### Free Spin Background Setup
+
+##### 1. Add Animation to Animation Provider
+
+Add the Free Spin background animation to your **Animation Provider**.
+
+![Add Animation](./img/freespins/add-anim-background.png)
+
+##### 2. Configure Background Display
+
+Set up the background for both landscape and portrait modes:
+
+- **Landscape Mode**  
+
+![Landscape Background](./img/freespins/set-background-freespin-landscape.png)
+
+- **Portrait Mode**  
+
+![Portrait Background](./img/freespins/set-background-freespin-portrait.png)
+
+
+##### 3. Asset Example
+
+Example background assets for Free Spin:
+
+![Background Assets](./img/freespins/assets-freespin-background.png)
+
+
+#### Sidebands (Optional)
+
+Sidebands are optional visual elements, often used in classic slot game designs.
+
+| Preview | Asset Structure |
+|---------|----------------|
+| ![Sidebands](./img/freespins/freespin-sideband.png) | ![Sideband Assets](./img/freespins/assets-freespind-sideband.png) |
+
+**Setup Steps:**
+
+1. **Add Preference:**  
+    Add the free sideband preference in your configuration.  
+    ![Add Preference](./img/freespins/add-preference-free-sideband.png)
+
+2. **Assign Texture:**  
+    Set the correct texture for the free sideband.  
+    ![Add Texture](./img/freespins/add-texture-free-sideband.png)
+
+**Asset Mapping:**
+
+| Asset Name                | Node/Preference Name    |
+|---------------------------|------------------------|
+| `anim-free-sideband-static` | `particle-free-sideband` |
+| `sideband-back`           | `sideband-back`        |
+| `sideband`                | `sideband`             |
+| `sideband-shine`          | `sideband-shine`       |
+| `sideband-static`         | `liquid`               |
+| `indicator-static`        | `indicator-static`     |
+
+---
+
+#### Transition Effects (Optional)
+
+##### Setup: Create Transition Node
+
+1. **Create a new node** in your scene for the transition effect.
+2. **Add the following components** to this node:
+    - `transition`
+    - `transition-scaler`
+3. Configure the transition properties as required for your effect.
+
+![Transition Setup](./img/freespins/setup-transition.png)
+
+| Property           | Description                                |
+|--------------------|--------------------------------------------|
+| `content`          | Target node for transition effects         |
+| `animationName`    | Animation identifier/reference             |
+| `sfxName`          | Sound effect identifier                    |
+| `transitionFrame`  | Frame to trigger transition callback       |
+
+
+##### Asset Setup
+
+1. Add transition animation to the **Animation Provider**.
+2. Match the animation name with the correct node.
+
+![Transition Setup](./img/freespins/add-anim-transition.png)
+
+**add preferrence**
+
+Configure preferences as needed for your transition.
+
+![Transition Setup](./img/freespins/add-preference-transition.png)
+
+**Example Result:**
+
+![Transition Result](./img/freespins/fs-transition.jpg)
+
+---
+
+## Final Result Examples
+
+| Phase | Image |
+|-------|-------|
+| Trigger | ![Trigger](./img/freespins/fs-trigger.jpg) |
+| Active Scene | ![Scene](./img/freespins/fs-scene.jpg) |
+| Completion | ![Congrats](./img/freespins/fs-congra.jpg) |

docs/04-game-asset-structure/01-default-assets-structure.md

@@ -3,5 +3,365 @@ sidebar_position: 1
 ---
 
 # Default Asset Structure
+---
+
+## Overview
+
+|        | Core Asset | Game Asset |
+| :--:   | :---------- | :---------- |
+|<img width="400"/>![Overview](./img/overview.png) | - Contains all the necessary game modules.<br/>- Reviewing the [Add submodules](../setup-the-project/add-submodules) for details. | - Contains all the necessary game assets.<br/>- Reviewing the [Create Game Folder Structure](../setup-the-project/create-game-folder-structure) for details. |
+
+## Asset Folder Structure
+
+### Asset Loading Manager
+
+#### Preloads Asset
+
+Refers to the process of loading necessary game resources (such as images, audio, animations, prefabs, etc.) into memory before they are needed in the game.
+
+❓ Why Preload Asset?
+
+🔹Reduce runtime lag: Prevents the game from stuttering or freezing when assets are loaded on demand.<br/>
+🔹Improve user experience: Ensures smooth transitions between scenes or when many resources are needed quickly.<br/>
+🔹Better memory management: Allows you to control exactly when and what to load into memory.
+
+#### Postloads Asset
+
+Refers to the process of loading resources after the game or a scene has already started running. This is often used to optimize initial loading time and to progressively load non-critical assets in the background.
+
+❓ Why Use Postloads Asset?
+
+🔹Faster initial loading: Only essential assets are preloaded; the rest can be loaded later.<br/>
+🔹Better performance on low-end devices: Distributes memory usage more efficiently.<br/>
+🔹Allows dynamic content loading: You can load content only when it’s actually needed (e.g., when entering a specific area or level).
+
+**Example:** Assets used for background.
+
+🔹Preloads Asset contains static image with low capacity.<br/>
+🔹Postloads Asset contains animation with higher capactity.
+
+![Asset Loading Manager](./img/assets-loading-manager.png)
+
+### Asset Platform Manager
+#### 💻 Desktop Asset
+
+Refer to visual, audio, or data resources that are specifically designed to take advantage of the performance, resolution, and user interaction available on desktop computers and laptops.
+
+🔹High-resolution textures and sprites<br/>
+🔹Advanced visual effects (particles, lighting, shaders)<br/>
+🔹High-quality audio files (uncompressed or lightly compressed)<br/>
+🔹UI/UX elements optimized for mouse and keyboard<br/>
+🔹Assets that support large resolutions (Full HD, 2K, 4K)<br/>
+
+❓ Why use Desktop-Specific Assets?
+
+🔹Performance optimization: Desktops can handle larger and more detailed assets due to stronger hardware.<br/>
+🔹Enhanced experience: Larger screens and precise input devices allow for more complex and polished visuals.<br/>
+🔹Scalability: Developers can utilize advanced shaders, visual effects, or input schemes not suitable for other platforms.
+
+#### 📱Mobile Asset
+
+Refers to images, audio, and other data that are specifically designed or adjusted to meet the hardware limitations, screen sizes, and memory constraints of smartphones and tablets.
+
+🔹Smaller and optimized images (compressed textures).<br/>
+🔹UI/UX tailored for touch input and smaller screens.<br/>
+🔹Simplified effects with reduced use of heavy shaders.<br/>
+🔹On-demand asset loading to minimize memory usage.
+
+❓ Why Optimize Assets for Mobile?
+🔹Hardware limitations: Mobile devices have less RAM and GPU power compared to desktops → assets must be lightweight.<br/>
+🔹Storage size constraints: Mobile apps are often limited in total install size.<br/>
+🔹Better performance & stability: Lighter assets improve game loading speed, reduce crashes, and enhance compatibility across different devices.
+
+**Example:** Assets used for background.
+
+ - Assets used for desktop have larger size and capacity than mobile.
+
+![Asset Platform Manager](./img/assets-platform-manager.png)
+
+#### Custom Scaler
+
+##### Overview
+
+This script generates custom scaling ratios for assets in a Cocos Creator project, particularly handling different scaling needs for desktop and mobile platforms.
+
+##### Configuration Steps
+
+###### Create the Script
+
+- Name the script: `custom-scale-data`
+- Location: `assets/game-assets/scripts/custom-scaler/`
+
+###### Configure the Script
+
+- Refer to the following image for a general setup example:
+
+    ![General Assets Custom Scaler](./img/genernal-custom-scaler.png)
+
+    ```js
+    // custom-scale-data.js
+    cc.CustomScaler.CustomScaleRatio["uuid0"] = 0.75;
+    cc.CustomScaler.CustomScaleRatio["uuid1"] = 0.7;
+    cc.CustomScaler.CustomScaleRatio["uuid2"] = 0.58;
+    ```
+
+##### Asset Scaling Rules
+
+Assets in the project should be scaled according to their type and location:
+
+| Asset Type      | Asset Path Contains | Condition                                 | Scale Ratio |
+|-----------------|---------------------|-------------------------------------------|-------------|
+| Font files      | `fnt-`              | -                                         | 1.0         |
+| Desktop assets  | `desktop`           | Inside `custom-scale` folder              | 1.0         |
+| Desktop assets  | `desktop`           | Outside `custom-scale` folder             | 0.75        |
+| Mobile assets   | `mobile`            | Inside `custom-scale` folder              | 0.7         |
+| Mobile assets   | `mobile`            | Outside `custom-scale` folder             | 0.58        |
+
+**Folder structure:**
+
+```plaintext
+assets/
+├── fnt-arial.png (.jpg)              # remains at 1.0
+├── desktop/
+│   ├── sprite.png (.jpg)             # scaled to 0.75
+│   └── custom-scale/
+│       └── sprite.png  (.jpg)        # remains at 1.0
+└── mobile/
+    ├── sprite.png  (.jpg)            # scaled to 0.58
+    └── custom-scale/
+        └── sprite.png  (.jpg)        # remains at 0.7
+```
+:::tip
+Assets inside the `custom-scale` folder maintain their original quality, ensuring clear and sharp rendering.
+:::
+
+**Example:**
+
+![Assets Custom Scaler](./img/assets-custom-scaler.png)
+
+#### Prefabs
+
+| Desktop Prefab | Mobile Prefab |
+|:--------------:|:-------------:|
+| ![Prefabs Desktop](./img/prefabs-desktop.png) | ![Prefabs Mobile](./img/prefabs-mobile.png) |
+
+
+
+### Asset Features Manager
+
+#### Main Game Asset
+
+##### Overview
+
+Main game assets are stored in the `main-game` folder, organized by platform and loading type:
+
+```plaintext
+    assets/
+    └── game-assets/
+        ├── Font/
+        |    └──main-game
+        ├── Sound/
+        |    └──main-game
+        └── textures/
+            ├── desktop/
+            │   ├── preload/        # Load at startup
+            |   |       └──main-game   
+            │   └── postload/       # Load later
+            |           └──main-game   
+            |
+            └── mobile/
+                ├── preload/        # Load at startup
+                |       └──main-game   
+                └── postload/       # Load later
+                        └──main-game   
+```
+
+- `desktop` and `mobile`: Separate folders for each platform.
+- `preload`: Needed right away.
+- `postload`: Can load after startup.
+- Everything is organized under `main-game`.
+
+
+##### Platform-Specific Structures
+
+| Sound Example | Font Example |
+|:-------------:|:-----------:|
+| ![sound-main-game](./img/sound-main-game.png) | ![font-main-game](./img/font-main-game.png) |
+
+| Desktop Structure | Mobile Structure |
+|:-----------------:|:---------------:|
+| ![Desktop Asset Structure](./img/assets-structure-desktop.png) | ![Mobile Asset Structure](./img/assets-structure-mobile.png) |
+
+:::tip
+When a feature is activated, its assets are loaded directly, bypassing the main game asset folders.
+:::
+
+---
+
+#### Feature Game Asset
+
+##### Overview
+
+Feature game assets (e.g., free-game, pickup, bonus, gamble) are stored in a folder named after the feature, and organized by platform (`desktop`, `mobile`) and loading type (`preload`, `postload`).
+
+**Folder structure:**
+```plaintext
+    assets/
+    └── game-assets/
+        ├── Font/
+        |    └──free-game
+        ├── Sound/
+        |    └──free-game
+        └── textures/
+            ├── desktop/
+            │   ├── preload/        # Load at startup
+            |   |     └──free-game   
+            │   └── postload/       # Load later
+            |        └──free-game   
+            |
+            └── mobile/
+                ├── preload/        # Load at startup
+                |     └──free-game   
+                └── postload/       # Load later
+                    └──free-game   
+```
+##### Platform-Specific Structures
+
+| Feature Game Example | Desktop Structure | Mobile Structure |
+|:-----------:|:-----------------:|:---------------:|
+| ![Feature Game](./img/feature-assets.png) | ![Desktop Asset Structure](./img/feature-assets-desktop.png) | ![Mobile Asset Structure](./img/feature-assets-mobile.png) |
+
+---
+
+#### Localized Assets
+
+The `localizes/` folder stores language-specific assets (e.g., `zh`, `th`, `id`, etc.), allowing the game to display the correct fonts and textures based on the selected language.
+
+##### Folder structure:
+
+```plaintext
+    assets/
+    └── game-assets/
+        ├── fonts/
+        │   ├── localizes/       # Fonts for each language
+        │   └── preloads/        # Default fonts (usually English) loaded at startup
+        └── textures/
+            ├── desktop/
+            │   ├── localizes/   # Desktop textures for each language
+            │   ├── postloads/   # Desktop textures loaded after startup (default: en)
+            │   └── preloads/    # Desktop textures loaded at startup (default: en)
+            └── mobile/
+                ├── localizes/   # Mobile textures for each language
+                ├── postloads/   # Mobile textures loaded after startup (default: en)
+                └── preloads/    # Mobile textures loaded at startup (default: en)
+```
+
+- Assets in `localizes/` are organized by language code (e.g., `zh`, `th`, `id`).
+- Sprites in `preloads/` and `postloads/` use English (`en`) as the default language.
+
+![Location](./img/localizes-assets.png)
+
+---
+
+#### Meta JSON Merger
+
+##### Purpose
+
+Merges JSON metadata files under library/imports/ into one fullMetaData.json.
+
+![Purpose](./img/merge-json-assets.png)
+
+###### Excludes:
+
+- cc.SceneAsset 
+- cc.Prefab
+
+```json
+{
+  "asset1.json": { /* metadata */ },
+  "asset2.json": { /* metadata */ }
+}
+```
+---
+
+#### Texture Compression Tool
+
+##### Purpose
+
+Manages and applies compression settings to game textures.
+
+![Compression](./img/compress-over.png)
+
+##### Compression Settings
+| Description | Action Compress Texture |
+|:----------- |:----------------------:|
+| Compresses all textures in:<br/>- `assets/Core`<br/>- `assets/game` | ![Compression](./img/compress-texture.png) |
+| Compresses all textures in:<br/>- `assets/game` only | ![Compression](./img/compress-texture1.png) |
+| Removes all compression settings | ![Compression](./img/compress-texture2.png) |
+
+**Example:**  
+Compression settings for PNG and JPG formats:
+
+![Compression Settings](./img/compress-setting.png)
+
+##### Workflow
+
+1. **Query** texture assets by UUID
+2. **Apply** compression settings to their meta data
+3. **Save** updated meta files
+4. **Log** progress and handle errors in console
+
+##### Benefits
+
+* Reduces texture file sizes
+* Speeds up builds and runtime loading
+* Supports platform-specific formats
+* Batch processing for efficiency
+
+---
+
+#### Remove Packable Texture Tool
+
+##### Overview
+
+Removes the `packable` flag from all texture assets to prevent automatic atlas packing.
+
+![Remove Packable](./img/remove-packable-texture.png)
+
+
+##### Why Remove Packable
+
+Removing the `packable` flag gives you:
+- **Better memory management** – load/unload textures individually
+- **Prevents automatic atlas generation** – useful for large or dynamic textures
+
+###### Use Cases
+- Large background images
+- Special effects (particles, dynamic textures)
+- Render textures
+- Dynamically loaded assets
+- High-res UI elements with custom compression needs
+
+##### Query Texture
+
+- Scans `db://assets/**/*` for all texture assets.
+
+**Example:**   
+
+Compression settings for PNG and JPG formats:               
+![Remove Packable](./img/remove-packable.png)
+
+---
+### Result
+:::tip
+When running the Extension Tool, you can:
+- Add or update textures
+- Add new messages
+- Update existing messages in the game
+:::
+
+After running the Extension Tool, the console will display a summary of the processed textures and any changes made.
+
+![Result console](./img/result-console.png)
+
 
-> To be added

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)
+
+---

docusaurus.config.ts

@@ -62,6 +62,12 @@ const config: Config = {
         sidebarPath: require.resolve('./sidebars.ts'),
       },
     ],
+    [
+      require.resolve('docusaurus-lunr-search'),
+      {
+        languages: ['en'],
+      },
+    ],
   ],
 
   themes: [
@@ -90,6 +96,10 @@ const config: Config = {
           position: 'left',
           sidebarId: 'apiSidebar',
         },
+        {
+          type: 'search',
+          position: 'right',
+        },
         {
           href: 'https://gitea.plp19.com/dev-public/doc-slot-core-manual',
           label: 'Gitea',
@@ -102,8 +112,8 @@ const config: Config = {
       copyright: `Copyright © ${new Date().getFullYear()} Mercury Studio, Inc.`,
     },
     prism: {
-      theme: prismThemes.github,
-      darkTheme: prismThemes.dracula,
+      theme: prismThemes.vsLight,
+      darkTheme: prismThemes.vsDark,
     },
   } satisfies Preset.ThemeConfig,
 };

package.json

@@ -15,19 +15,21 @@
     "typecheck": "tsc"
   },
   "dependencies": {
-    "@docusaurus/core": "^3.8.0",
-    "@docusaurus/preset-classic": "^3.8.0",
-    "@docusaurus/theme-mermaid": "^3.8.0",
+    "@docusaurus/core": "^3.8.1",
+    "@docusaurus/preset-classic": "^3.8.1",
+    "@docusaurus/theme-mermaid": "^3.8.1",
     "@mdx-js/react": "^3.0.0",
     "clsx": "^2.0.0",
+    "docusaurus-lunr-search": "^3.6.0",
+    "lunr": "^2.3.9",
     "prism-react-renderer": "^2.3.0",
     "react": "^19.0.0",
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@docusaurus/module-type-aliases": "^3.8.0",
-    "@docusaurus/tsconfig": "^3.8.0",
-    "@docusaurus/types": "^3.8.0",
+    "@docusaurus/module-type-aliases": "^3.8.1",
+    "@docusaurus/tsconfig": "^3.8.1",
+    "@docusaurus/types": "^3.8.1",
     "typescript": "~5.6.2"
   },
   "browserslist": {

src/css/custom.css

@@ -19,13 +19,13 @@
 
 /* For readability concerns, you should choose a lighter palette in dark mode. */
 [data-theme='dark'] {
-  --ifm-color-primary: #25c2a0;
-  --ifm-color-primary-dark: #21af90;
-  --ifm-color-primary-darker: #1fa588;
-  --ifm-color-primary-darkest: #1a8870;
-  --ifm-color-primary-light: #29d5b0;
-  --ifm-color-primary-lighter: #32d8b4;
-  --ifm-color-primary-lightest: #4fddbf;
+  --ifm-color-primary: #2e8555;
+  --ifm-color-primary-dark: #29784c;
+  --ifm-color-primary-darker: #277148;
+  --ifm-color-primary-darkest: #205d3b;
+  --ifm-color-primary-light: #33925d;
+  --ifm-color-primary-lighter: #359962;
+  --ifm-color-primary-lightest: #3cad6e;
   --docusaurus-highlighted-code-line-bg: rgba(0, 0, 0, 0.3);
 }
 .red-star {

src/pages/index.module.css

@@ -4,10 +4,32 @@
  */
 
 .heroBanner {
-  padding: 4rem 0;
+  padding: 8rem;
   text-align: center;
   position: relative;
   overflow: hidden;
+  background: url('/img/background.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+  color: white;
+}
+
+[data-theme='dark'] .heroBanner {
+  background: url('/img/background.jpg');
+  background-size: cover;
+  background-position: center;
+  background-repeat: no-repeat;
+}
+
+.heroLogo {
+  max-width: 300px;
+  /* margin-bottom: 2rem; */
+  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.3));
+}
+
+[data-theme='dark'] .heroLogo {
+  filter: drop-shadow(0 0 8px rgba(255, 255, 255, 0.5));
 }
 
 @media screen and (max-width: 996px) {
@@ -20,4 +42,184 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  gap: 1rem;
 }
+
+.buttons :global(.button) {
+  background: rgba(255, 255, 255, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  color: white;
+  transition: all 0.3s ease;
+  backdrop-filter: blur(5px);
+  font-weight: 500;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+}
+
+.buttons :global(.button:hover) {
+  background: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  transform: translateY(-2px);
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+}
+
+[data-theme='dark'] .buttons :global(.button) {
+  background: rgba(255, 255, 255, 0.3);
+  border: 2px solid rgba(255, 255, 255, 0.6);
+  color: white;
+  box-shadow: 0 0 15px rgba(255, 255, 255, 0.2);
+  font-weight: 500;
+  text-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
+}
+
+[data-theme='dark'] .buttons :global(.button:hover) {
+  background: rgba(255, 255, 255, 0.4);
+  border-color: rgba(255, 255, 255, 0.8);
+  box-shadow: 0 0 20px rgba(255, 255, 255, 0.3);
+  transform: translateY(-2px);
+}
+
+.hero__subtitle {
+  color: rgba(255, 255, 255, 0.8);
+  font-size: 1.2rem;
+  margin-bottom: 2rem;
+}
+
+[data-theme='dark'] .hero__subtitle {
+  color: rgba(255, 255, 255, 0.7);
+}
+
+.features {
+  display: flex;
+  align-items: center;
+  padding: 0rem 0;
+  width: 100%;
+  background: var(--ifm-background-color);
+}
+
+.featureIcon {
+  display: block;
+  font-size: 3rem;
+  transition: transform 0.2s ease-in-out;
+}
+
+.featureIcon:hover {
+  transform: scale(1.1);
+}
+
+.text--center {
+  color: var(--ifm-color-emphasis-800);
+}
+
+.text--center h3 {
+  color: var(--ifm-color-emphasis-900);
+}
+
+.text--center p {
+  color: var(--ifm-color-emphasis-700);
+}
+
+[data-theme='dark'] .text--center {
+  color: var(--ifm-color-emphasis-200);
+}
+
+[data-theme='dark'] .text--center h3 {
+  color: var(--ifm-color-emphasis-100);
+}
+
+[data-theme='dark'] .text--center p {
+  color: var(--ifm-color-emphasis-300);
+}
+
+.section {
+  padding: 4rem 0;
+}
+
+.sectionTitle {
+  text-align: center;
+  margin-bottom: 3rem;
+  font-size: 2.5rem;
+  color: #2a2a2a;
+}
+
+.techStack {
+  background: #f8f9fa;
+}
+
+.techGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
+  gap: 2rem;
+  padding: 0 1rem;
+}
+
+.techItem {
+  background: white;
+  padding: 1.5rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: transform 0.2s ease-in-out;
+}
+
+.techItem:hover {
+  transform: translateY(-5px);
+}
+
+.techItem h4 {
+  margin-bottom: 0.5rem;
+  color: #2a2a2a;
+}
+
+.techItem p {
+  margin: 0;
+  color: #666;
+}
+
+.stepsGrid {
+  display: grid;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+  gap: 2rem;
+  padding: 0 1rem;
+}
+
+.stepCard {
+  background: white;
+  padding: 2rem;
+  border-radius: 8px;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
+  transition: all 0.2s ease-in-out;
+  text-decoration: none;
+  color: inherit;
+}
+
+.stepCard:hover {
+  transform: translateY(-5px);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+}
+
+.stepCard h3 {
+  margin-bottom: 1rem;
+  color: #2a2a2a;
+}
+
+.stepCard p {
+  margin: 0;
+  color: #666;
+}
+
+@media screen and (max-width: 768px) {
+  .techGrid,
+  .stepsGrid {
+    grid-template-columns: 1fr;
+  }
+  
+  .section {
+    padding: 2rem 0;
+  }
+  
+  .sectionTitle {
+    font-size: 2rem;
+    margin-bottom: 0.5rem;
+  }
+}
+