change format

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

@@ -199,7 +199,7 @@ Use the `template-label-auto-selection` to customize the appearance of the label
 #### Customize *`ui-bottom-bar-panel`* Label
 Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:  
 :::info
-*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)*     
+🔗*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)*     
 **Bottom bar labels include a localization component for multi-language support**  
 :::
 
@@ -231,7 +231,7 @@ Create new node and configuration in your main scene:
 ##### Texture Button Bar    
 Checklist assets completed for bottom UI and button UI text   
 :::info
-🔗 [](http://localhost:3000/docs/category/game-asset-structure)
+🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
 :::      
  ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    
 
@@ -457,7 +457,7 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab`
 
 - *Prepare asset to pack*.
 
-🔗 Click here to follow the setup pack assets: [Complete Assets Structure Guide](http://localhost:3000/docs/category/game-asset-structure)   
+🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)   
 
 |                           Path                              |                     Example                                       |
 |-------------------------------------------------------------|-------------------------------------------------------------------|
@@ -472,46 +472,115 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab`
 
 ---
 
-## Setup Logo
+## Game Logo Setup Guide
 
 ### Overview
+The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
 
-The game logo is a key visual element used to represent the game's identity. It is displayed consistently across multiple platforms and screen orientations.
+| Platform | Orientation | Preview |
+|----------|------------|----------|
+| Desktop | Standard | ![Desktop View](./img/05-main-scene/logo-overview-desktop.png) |
+| Mobile | Landscape | ![Landscape View](./img/05-main-scene/logo-overview.png) |
+| Mobile | Portrait | ![Portrait View](./img/05-main-scene/logo-overview-portrait.png) |
 
-|   Platform    |   Orientation |   Example Screenshot  |
+### Animation Configuration
-|---------------|---------------|-----------------------|
-|   Desktop     |	-	        | 	![Overview Desktop](./img/05-main-scene/logo-overview-desktop.png) |
-|   Mobile      |	Landscape   |	![Overview Landscape](./img/05-main-scene/logo-overview.png) |
-|   Mobile      |	Portrait    |	![Overview Portrait](./img/05-main-scene/logo-overview-portrait.png) |
 
+#### 1. Core Setup
+Location: `assets\core-assets\hyper-core\packages\logo-animation`
 
-### Setup Logo In Game
+```typescript
-
+// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
-#### Logo Desktop 
+onLoad: function () {
-![Setting Logo](./img/05-main-scene/logo-setting-desktop.png)
+    var self = this;
-
+    // Initialize animation states
-##### Platform Node Spawner Settings
+    self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
-
+    self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
-:::info        
+}
-*[Click here to follow the setting](#platform-node-spawner-settings)* 
-:::    
-
-##### Add Script Play Anim Logo
-
-
-![Setting Logo](./img/05-main-scene/logo-script-desktop.png)
-
-in script was has function get name Animation:
-
-```jsx title="assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js"
-    onLoad: function () {
-        var self = this;
-
-        self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
-        self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
-    },
 ```
 
+#### 2. Required Assets
+
+##### Static Assets
+| Platform | Location | Preview |
+|----------|----------|---------|
+| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` | ![Desktop](./img/05-main-scene/logo-static-desktop.png) |
+| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` | ![Mobile](./img/05-main-scene/logo-static-mobile.png) |
+
+##### Animation Assets
+| Platform | Location | Preview |
+|----------|----------|---------|
+| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](./img/05-main-scene/logo-anim-desktop.png) |
+| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` | ![Mobile Anim](./img/05-main-scene/logo-anim-mobile.png) |
+
+#### 3. Animation Settings
+1. Configure Provider
+
+   ![Provider Setup](./img/05-main-scene/logo-anim-provider.png)
+
+2. Setup States
+
+   - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
+
+   ![Provider Setup](./img/05-main-scene/logo-static-in-anim.png)
+
+   - Configure continuous loop playback:    
+
+   ![Provider Setup](./img/05-main-scene/logo-anim-loop.png)
+
+### Platform-Specific Setup
+
+#### Desktop Configuration
+1. Base Settings        
+
+   ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png)
+
+   *Node Setup*
+   ```typescript
+   Components: {
+     animation: 'hyper-logo-animation',
+   }
+   ```
+   ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png)
 
 
+2. Position Guidelines
+   - Follow design specifications
+   - Avoid UI element overlap
+   - Consider screen layout
 
+#### Mobile Configuration
+
+##### Landscape Mode
+1. Node Setup
+   ```typescript
+   Components: {
+     animation: 'hyper-logo-animation',
+     scaling: 'landscape-logo-spine-aspect-ratio-keeper'
+   }
+   ```
+   ![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
+
+##### Portrait Mode
+
+1. Node Configuration
+
+| Component                  | Description                                      |
+|----------------------------|--------------------------------------------------|
+| `hyper-logo-animation`     | Plays and manages the logo animation             |
+| `node-position-by-jackpot` | Moves the logo based on the jackpot display state |
+| `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens    |
+
+
+2. Position Settings
+
+   | State | Position | Example |
+   |-------|----------|---------|
+   | Jackpot Active | Upper position | ![Active](./img/05-main-scene/logo-portrait-jackpot.png) |
+   | Jackpot Inactive | Default position | ![Inactive](./img/05-main-scene/logo-portrait-no-jackpot.png) |
+
+:::tip Best Practices
+- Test on multiple device sizes
+- Verify animations load properly
+- Check positioning in all game states
+- Ensure consistent scaling
+:::