doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/11-ui-mobile-panel.md

---
sidebar_position: 11
---

# Mobile UI Panel

## Overview
The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices.

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

## Implementation

### Step 1: Set Up Prefabs
Configure the necessary prefabs for the Mobile UI.

| Step | Action | Description | Image Reference |
|------|--------|-------------|-----------------|
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. | ![Locate Prefabs](../img/05-main-scene/search-mobile-ui.png) |
| 2 | Clone Assets | Copy the required assets to the game assets directory. | ![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**: Maintain the following directory structure for proper prefab references:
```
assets/
└── game-assets/
    └── prefabs/
        └── mobile/
            ├── mobile-ui.prefab
            └── buy-feature.prefab
```

### Step 2: Rename Prefabs
Rename the copied prefabs by removing unnecessary prefixes to ensure consistency.

| Prefix to Remove | Example |
|------------------|---------|
| `template-` | ![Prefab Naming Example](../img/05-main-scene/result-rename-mobile.png) |

### Step 3: Configure UI in Main Scene
Add and configure a new node in the main scene to integrate the Mobile UI.

![Main Scene Setup](../img/05-main-scene/set-positon-mobile-ui.png)

**Platform Node Spawner Settings**:

### Step 4: Apply Textures
Ensure all Mobile UI assets are prepared and applied correctly.

![Texture Setup](../img/05-main-scene/add-texture-mobile-ui.png)

**Run the Helper Tool**:
- Use the Mobile UI helper tool to configure the UI components.

### Step 5: Set Color Theme for Mobile UI
Customize the color theme for the Mobile UI using the `helper-paint-color-ui-mobile.js` component to apply theme-based colors across UI elements.

**Follow Design**:
| Landscape | Portrait |
|-----------|----------|
| ![Landscape Menu](../img/05-main-scene/menu-landscape.png) | ![Portrait Menu](../img/05-main-scene/menu-portrait.png) |

**Configuration Steps**:
1. **Access the Helper Component**:
   - Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
   - ![Color Setup](../img/05-main-scene/set-color-menu-ui.png)

2. **Configure Color Properties**:
   - Adjust the following properties to match the game design:

| # | Property | Description | Example |
|---|----------|-------------|---------|
| 0 | **Paint Color** | Triggers repainting of UI components. | ![Paint Color Trigger](../img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png) |
| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). | ![Main UI Examples](../img/05-main-scene/image-for-mobile-ui-helper/buy.png) |
| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. | ![Highlight Color](../img/05-main-scene/main-ui-highlight-color.png) |
| 3 | **Toggle State Off Color** | Color for toggles in the off state. | ![Toggle Off](../img/05-main-scene/toggle-off.png) |
| 4 | **Toggle State On Color** | Color for toggles in the on state. | ![Toggle On](../img/05-main-scene/toggle-on.png) |
| 5 | **Background Info Page Color** | Background color for info pages. | ![Info Page Background](../img/05-main-scene/image-for-mobile-ui-helper/background-info.png) |
| 6 | **Background Menu Color** | Background color for menus. | ![Menu Background](../img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) |
| 7 | **Background Point Panel Color** | Background color for point/balance panels. | ![Point Panel Background](../img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) |
| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). | ![Bottom Bar Background](../img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) |
| 9 | **Button Quit Color** | Color for the Quit button. | ![Quit Button](../img/05-main-scene/btn-quit-game.png) |
| 10 | **Button Cancel Color** | Color for the Cancel button. | ![Cancel Button](../img/05-main-scene/btn-cancel-game.png) |
| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. | ![Balance Normal](../img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) |
| 12 | **Label Balance Spin Color** | Color for the balance label during spins. | ![Balance Spin](../img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) |
| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. | ![Plus/Minus Buttons](../img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) |
| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. | ![Start Auto Label](../img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) |
| 15 | **Label Outline Notification** | Outline color and width for notifications. | ![Outline Notification](../img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) |
| 16 | **Total Win Medium Win Color** | Color for medium win labels. | ![Medium Win Color](../img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) |

**Tip**: Ensure color values align with the game’s visual design specifications.