---
sidebar_position: 13
---

# Game Logo

### 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 Settings

#### 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-Specific Setup

#### Desktop Configuration

1. Base Settings        

   ![Desktop Settings](../img/05-main-scene/logo-setting-desktop.png)

   🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#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.
:::