---
sidebar_position: 5
---

# Main Scene

This is where all the magic happen.

---

Main scene is the most complicated scene with hundreds of object, script and config.

![Main Scene Wireframe](./img/05-main-scene/main-scene-wireframe.png)

Yet it is suprisingly simple to use.

By following step by step setup, you'll have a working main scene in no time.

:::info
In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.

Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.

![Run Test](./img/05-main-scene/run-test.png)
:::

## Setup SpriteFrame Provider
---

    **SpriteFrameProvider** allows global access to "sprite frames" from code.

    ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png)

## Setup Animation Provider
---

    **Animation Provider** contains all **animations** of the game.

    ![Aniamtion Provider](./img/05-main-scene/animation-provider.png)

## Setup Reel Slot
---

1. Prepare the asset for symbols and reel frame.

    ![Add Symbol Texture](./img/05-main-scene/add-symbol-texture.png)
    ![Add Symbol Texture](./img/05-main-scene/add-reel-frame.png)

2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.

    ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png)

3. Add reel frame.

    ![Sprite Frame Provider](./img/05-main-scene/add-reel-frame-2.png) ![Sprite Frame Provider](./img/05-main-scene/reel-frame.png)

4. Config reel slot using `reel-scroller-helper`. 

    ![Reel Scroller Helper](./img/05-main-scene/reel-scroller-helper.png)

    | Properties | Explaination | Example |
    |------------|--------------|---------|
    |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](./img/05-main-scene/hyper-cell-item.png)|
    | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](./img/05-main-scene/scroller.png)|
    |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.|![reel-row-column](./img/05-main-scene/reel-row-column.png)|
    |**Cell Size**| the size of each cells.|![cell-size](./img/05-main-scene/cell-size.png)|
    |**Cell Spacing**| the distance between each cells horizontally and vertically.||
    |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.|![dim-cell-color](./img/05-main-scene/dim-cell-color.png)|
    |**Top Count and Bot Count**| for spinning logic to work, a certain number of cell will be added to the top and bottom of the reel.|![cell-top-bottom](./img/05-main-scene/cell-top-bottom.png)|

5. Generate panel using `reel-scroller-helper`.

    ![Generate Panel](./img/05-main-scene/generate-panel.png)

:::tip
There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
:::

## Setup Spinning Panel

Reel slot panel is just one part one the spinning panel. 

There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.

The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.

- Landing Panel: 

    ![Landing Panel](./img/05-main-scene/landing-panel.png)     

To define Landing Panel, create the following script:

:::warning
    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
    SlottySetting.prototype._registerInjection = function () {
        DIContainer.Register('landingGenerator', require('landing-generator'));
    };
    ```
:::

- Present Win Cell Panel:

    ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png)

- Present Win Cell Panel:

    ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png)

- Tension Panel:

    ![Tension Panel](./img/05-main-scene/tension-panel.png)

    If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.

    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)    
    **check toggle General Panel** 
    ![Tension Size Custom](./img/05-main-scene/note-bug-tension.png)    
    To define Tension Panel, create the following script:
    :::warning
    ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
    SlottySetting.prototype._registerInjection = function () {
        DIContainer.Register('tensionGenerator', require('tension-generator'));
    };
    ```
    :::  


## Setup UI Panel

### UI Panel Overview

The UI system supports both desktop and mobile layouts design.

#### 🖥️ Desktop Layout
- Full bottom bar with all controls visible
- Horizontal layout maximizing screen width

![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png)

#### 📱 Mobile Layout
The mobile interface adapts to both landscape and portrait orientations:

| Orientation | Preview  |
|-------------|----------|
| Landscape   | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) |
| Portrait    | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) |


### UI Sideband
> To Be Added:
> - Prepare the asset
> - Run helper / p4f menu or setup manually
### UI Bottom Bar Desktop

#### Step 1: Setup Prefab Editor    

| Step | Action | image |
|------|---------|--------------|
| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) |
| 2. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) |
| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) |

---

#### Step 2: Configure Prefabs  

##### Core Prefabs Structure 
Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png)   

##### Rename Prefabs      
Rename the copied prefabs by removing unnecessary prefixes: 
| Prefix to Remove | Original Prefab Name | Final Name |
|------------------|----------------------|------------|
| `template-new-`  | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel`     |
| `template-`      | `template-button-auto-selection`   | `button-auto-selection` |     


```jsx title="The folder structure is as follows:"
    assets\game-assets\prefabs
```


![Prefab Naming Example](./img/05-main-scene/rename-prefab.png)

#### Customize *`button-auto-selection`* Label  

**Follow Design:**
Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.

| Component            | Description                                       |
| -------------------- | ------------------------------------------------- |
| **Label Outline**    | Add an outline to make the text stand out.        |
| **Label Shadow**     | Add a shadow for better contrast and readability. |
| -------------------- | ------------------------------------------------- |

![Label Configuration Options](./img/05-main-scene/option-for-label.png)

#### 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)*     
**Bottom bar labels include a localization component for multi-language support**  
:::

![component-locale](./img/05-main-scene/component-locale.png)  

The `FormatText` property controls text formatting behavior for label components:

| Property | Description | Example |
|----------|-------------|---------|
| `default` | Initial formatting state | `false` |
| `notify` | Formatting update callback | Updates when value changes |

---
#### Step 3: Setup UI In Main Scenes

Create new node and configuration in your main scene:                    
![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    

##### Platform Node Spawner Settings

| Setting | Value | Description |
|---------|-------|-------------|
| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform |
| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform |
| Target Prefab | `ui-bottom-bar-panel` | References prefab |

#### Step 4: Apply Textures 

##### Texture Button Bar    
Checklist assets completed for bottom UI and button UI text   
:::info
🔗 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)    

##### Run the Helper Tool

To configure the bottom bar UI helper.
:::info
🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor)
:::

---

### UI Panel Mobile

#### Step 1: Setup Prefab

| Step | Action                      | Description                                     | Image Reference                                                      |
| ---- | --------------------------- | ----------------------------------------------- | -------------------------------------------------------------------  |
| 1    | Locate `mobile-ui` Prefab   | Search for the `mobile-ui` prefab               | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png)          |
| 2    | Clone Assets                | Copy the required assets                        | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png)         |
| 3    | Paste Assets                | Paste into: `assets/game-assets/prefabs/mobile` | -                                                                    |
| 4    | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab             | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png)  |
| 5    | Paste Prefab                | Paste into: `assets/game-assets/prefabs/mobile` | -                                                                    |


:::tip File Structure
Maintain this directory structure for proper prefab references:
```
assets/
└── game-assets/
    └── prefabs/
        └── mobile/
            ├── Exp: mobile-ui.prefab
            └── Exp: buy-feature.prefab
```
:::

#### Step 2: Rename Prefabs 

Rename the copied prefabs by removing unnecessary prefixes: 
| Prefix to Remove | Final Name |
|------------------|----------------------|
| `template-`      |![Prefab Naming Example](./img/05-main-scene/result-rename-mobile.png)   |   

#### Step 3: Setup Ui In Main Scenes

Create new node and configuration in your main scene:                        
![main scenes](./img/05-main-scene/set-positon-mobile-ui.png)   

##### Platform Node Spawner Settings

| Setting | Value | Description |
|---------|-------|-------------|
| Mobile Toggle | ✓ Enabled | Show prefabs for mobile platform |
| Desktop Toggle | ☐ Disabled | Hide prefabs for desktop platform |
| Target Prefab | `mobile-ui` | References prefab |

#### Step 4: Apply Textures 

##### Texture Mobile UI 

Checklist assets completed for Mobile UI  

:::info
🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)       
:::
 ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png)

##### Run the Helper Tool

To configure the mobile UI helper.
:::info
🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::

  

#### Step 4: Setup Color For Menu Mobile UI 

**Follow Design:**   

| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png)  |
|---------|-------|

##### Overview
The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
  
![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png)    

|Ordinal number| Properties | Explaination | Example |
|--------------|------------|--------------|---------|
|0             |**paintColor**  |Trigger to repaint UI components   | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)|
|1             | **Main Ui Normal Color**          |Default color of UI elements | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) |
|2             | **Main Ui Highlight Color**       | Highlight color for selected UI elements  | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
|3             | **Toggle State Off Color**        | Color of toggle when off  | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) |
|4             | **Toggle State On Color**         | Color of toggle when on  | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) |
|5             | **Background Info Page Color**    | Info screen background  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)|
|6             | **Background Menu Color**         | Menu background color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) |
|7             | **Background Point Panel Color**  | Background panel for point/balance UI  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
|8             | **Background Bottom Bar Color**   | Background bottom bar (show only mobile portrait)  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
|9             | **Button Quit Color**             | Quit button color  | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) |
|10            | **Button Cancel Color**           | Cancel button color  | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1
|11            | **Label Balance Normal Color**    | Normal balance label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
|12            | **Label Balance Spin Color**      | During-spin label color  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
|13            | **Button Plus Minus Auto Color**  | Button plus/Minus autoplay  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
|14            | **Label Start Auto Color**        | Start autoplay label  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
|15            | **Label Outline Notification**    | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
|16            | **Total Win Medium Win Color**    | Color for label medium win  | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |

---

## Setup Background

Background overview:

| | Desktop | Mobile |
|:-:|--------------|---------|
|**Background Landscape**<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)|
|**Background Portrait**<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)|

**Background landscape** use for Desktop and Mobile landscape.

**Background portrait** only use for Mobile portrait.

### Prepare the assets
| | Assets | Description |
|:-:|--------------|---------|
|**Static**<br/>|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game|
|**Animation**<br/>|![Background Prepare Portrait](./img/05-main-scene/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|

### Background Landscape
    
    We use sprite frame background for landscape from prepared assets.

    ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png)

### Background Portrait

    We use sprite frame background for mobile from prepared assets.

    ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)

### Background Animation

If the game have design animation for background, we will do this step.

1. Using hepler to generate animation from prepared assets

    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png)
    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-anim-provider.png)

2. We have the result as below, and continue setup for **spine-animation**.
    - **Is Loop**: is ✅ because this animation will play through the game.
    - **Static Sprite Frame**: It will be displayed when the animation has not finished loading.

    ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-1.png)
    ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-2.png)

3. Add animation background with component below:

    **Animation background landscape**

    - Create **Empty Node** with name **anim-background-main-game**.
    - Add **animation-play-on-anable** with animation name in **Animation Provider**.
    - Add **background-scaler** resize with screen resolution.

    ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png)

    **Animation background portrait**
    
    - Create **Empty Node** with name **mobile-background-anim-portrait**.
    - Add **mobile-portrait-background-ui-controller** to display only on **Mobile**.
    - Add **orientation-ui-controller** to display on Portrait with the options below.

    ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-1.png)

    - Create **Empty Node** with name **anim-background-main-game**.
    - Add **animation-play-on-anable** with animation name in **Animation Provider**.
    - Add **portrait-anim-background-scaler** resize with screen resolution.

    ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-2.png)

## Setup Popup Panel

### Overview

A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.

|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](./img/05-main-scene/popup-credit-game.png)|
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|


### Popup in the Game
The popup panel is already integrated into the main scenes `template-main-game`.

![Popup In Game](./img/05-main-scene/popup-panel-in-game.png)       


| ![Popup Definition](./img/05-main-scene/popup-before.png)  | Change set Sibling index  | ![Popup Position](./img/05-main-scene/popup-after.png)|
| -----------------------------------------------------------|------------------------- | ------------------------------------------------------|

#### Detail configuring:

##### Multiple Popup Panel:

:::info
![Popup Position](./img/05-main-scene/popup-multi-panel.png) 

To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core:   

**Path**    : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab*        
:::

##### Manual Popup Panel:

:::info
-  This popup is self-configured using shared textures and layout structure.
-  The color theme and style may vary depending on the game design.         
-  Note: **Exit Game** Popup only in **Desktop**.
:::

##### Assets pack:  

- *Prepare asset to pack*.

🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)   

|                           Path                              |                     Example                                       |
|-------------------------------------------------------------|-------------------------------------------------------------------|
|`assets\game-assets\textures\desktop\preloads\main-game\exit`|![Exit Game Popup In Game](./img/05-main-scene/exit-popup-game.png)|

- structure prefabs:

![Exit Game Popup In Game](./img/05-main-scene/popup-exit-in-game.png)

**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     |
   
    ![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    |

    ![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 Logo Static when is low Network
:::