--- 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 🔗 See setup 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 🔗See setup 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 🔗See setup 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) | ---