---
sidebar_position: 11
---
# Mobile UI Panel

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


### Step 1: Set Up Prefabs

| 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: Configure 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

🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)

### Step 4: Apply Textures 

#### Texture Mobile UI 

Checklist assets completed for Mobile UI  

:::info
🔗Details [Game Asset Structure](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
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
:::

  

### Step 5: Set Color Theme for Mobile Menu 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)                               |
|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) |

---