Merge pull request 'feature/add-setup-logo' (#29) from feature/add-setup-logo into develop

Reviewed-on: #29

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                                       |
 |-------------------------------------------------------------|-------------------------------------------------------------------|
@@ -470,6 +470,129 @@ To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab`
 **Preview Result**:         
 ![Popup overview exit](./img/05-main-scene/popup-exit-game.png)
 
+---
 
+## Game Logo Setup Guide
 
+### Overview
+The game logo is a crucial branding element that must be consistently displayed across all platforms and 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) |
+
+### Logo Configuration
+
+#### 1. Core Setup
+Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation`
+
+```typescript
+// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
+onLoad: function () {
+    var self = this;
+    // Initialize animation states
+    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 Setup
+
+#### Desktop Configuration
+
+1. Base Settings        
+
+   ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png)
+
+🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
+
+2. Node Setup
+   ```typescript
+   Components: {
+     animation: 'hyper-logo-animation',
+   }
+   ```
+   ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png)
+
+:::tip
+   - **Position And Size**: Follow Game Design.
+:::
+
+#### Mobile Configuration
+
+##### Landscape Mode
+
+1. Node Setup
+  
+    | Component                                 | Description                                      |
+    |-------------------------------------------|--------------------------------------------------|
+    | `hyper-logo-animation`                    | Plays and manages the logo animation             |
+    | `node-position-by-jackpot`                | Moves the logo based on the jackpot display state |
+    | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens  (**Exp: 1.0**)   |
+   
+    ![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png)
+
+##### Portrait Mode
+
+1. Node Setup
+
+    | 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 (**Exp: 1.0** ) |
+
+    ![Portrait Setup](./img/05-main-scene/logo-mobile-portrait.png)
+
+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) |
+
+3. Size Settings
+
+    Using componet `spine-aspect-ratio-keeper` :
+
+    ![Portrait Logo Configuration](./img/05-main-scene/logo-center-align.png)    
+
+    | Setting           | Description                                  | Default Value         |
+    | ----------------- | -------------------------------------------- | --------------------- |
+    | **Default Scale** | Initial scale factor applied to the node     | Configurable per game (**Exp: 1.0**) |
+    | **Default Size**  | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) |
+
+:::tip
+- Check static logo display under slow network conditions.
+:::