doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/13-game-logo.md

---
sidebar_position: 13
---

# Game Logo

## Overview
The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the game’s identity.

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

## Implementation

### Prepare Assets

#### 1. Core Setup
- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
- **Script**: Initialize animation states for the logo.
  ```typescript
  // File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
  onLoad: function () {
      const 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 Static](../img/05-main-scene/logo-static-desktop.png) |
| Mobile  | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` | ![Mobile Static](../img/05-main-scene/logo-static-mobile.png) |

**Animation Assets**:
| Platform | Location | Preview |
|----------|----------|---------|
| Desktop | `assets/game-assets/textures/desktop/postloads/main-game/animations` | ![Desktop Animation](../img/05-main-scene/logo-anim-desktop.png) |
| Mobile  | `assets/game-assets/textures/mobile/postloads/main-game/animations` | ![Mobile Animation](../img/05-main-scene/logo-anim-mobile.png) |

#### 3. Animation Settings
1. **Configure Animation Provider**:
   - Register the logo animations in the Animation Provider.
   - ![Provider Setup](../img/05-main-scene/logo-anim-provider.png)

2. **Set Up Animation States**:
   - Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
   - ![Static Frame Setup](../img/05-main-scene/logo-static-in-anim.png)
   - Configure continuous loop playback for animations.
   - ![Loop Setup](../img/05-main-scene/logo-anim-loop.png)

### Setup

#### Desktop Configuration
1. **Base Settings**:
   - Configure the logo node in the main scene.
   - ![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png)

2. **Node Setup**:
   - Add the `hyper-logo-animation` component to the logo node.
   - ```typescript
     Components: {
         animation: 'hyper-logo-animation',
     }
     ```
   - ![Desktop Setup](../img/05-main-scene/logo-script-desktop.png)

**Tip**: Adjust position and size according to the game design specifications.

#### Mobile Configuration

##### Landscape Mode
1. **Node Setup**:
   - Configure the logo node with the following components:
     | Component | Description |
     |-----------|-------------|
     | `hyper-logo-animation` | Plays and manages the logo animation. |
     | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
     | `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
   - ![Landscape Setup](../img/05-main-scene/logo-mobile-landcape.png)

##### Portrait Mode
1. **Node Setup**:
   - Configure the logo node with the following components:
     | Component | Description |
     |-----------|-------------|
     | `hyper-logo-animation` | Plays and manages the logo animation. |
     | `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
     | `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
   - ![Portrait Setup](../img/05-main-scene/logo-mobile-portrait.png)

2. **Position Settings**:
   - Adjust logo position based on jackpot state:
     | State | Position | Example |
     |-------|----------|---------|
     | Jackpot Active | Upper position | ![Jackpot Active](../img/05-main-scene/logo-portrait-jackpot.png) |
     | Jackpot Inactive | Default position | ![Jackpot Inactive](../img/05-main-scene/logo-portrait-no-jackpot.png) |

3. **Size Settings**:
   - Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
   - ![Size Configuration](../img/05-main-scene/logo-center-align.png)
   - **Settings**:
     | Setting | Description | Default Value |
     |---------|-------------|---------------|
     | **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
     | **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |

**Tip**:
- Test the static logo display under slow network conditions to ensure fallback works.
- Verify animation states (`play` and `idle`) for smooth transitions.