106 lines
8.4 KiB
Markdown
106 lines
8.4 KiB
Markdown
---
|
|
sidebar_position: 11
|
|
---
|
|
# Mobile UI Panel
|
|
|
|
### Overview
|
|
The mobile interface adapts to both landscape and portrait orientations:
|
|
|
|
| Orientation | Preview |
|
|
|-------------|----------|
|
|
| Landscape |  |
|
|
| Portrait | 
|
|
|
|
|
|
### Step 1: Set Up Prefabs
|
|
|
|
| Step | Action | Description | Image Reference |
|
|
| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- |
|
|
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab |  |
|
|
| 2 | Clone Assets | Copy the required assets |  |
|
|
| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - |
|
|
| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab |  |
|
|
| 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-` | |
|
|
|
|
### Step 3: Configure UI in Main Scenes
|
|
|
|
Create new node and configuration in your main scene:
|
|
|
|
|
|
#### 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)
|
|
:::
|
|
|
|
|
|
#### 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:
|
|
|
|
| |  |
|
|
|---------|-------|
|
|
|
|
#### 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.
|
|
|
|
|
|
|
|
|Ordinal number| Properties | Explaination | Example |
|
|
|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
|
|
|0 |**paintColor** |Trigger to repaint UI components | |
|
|
|1 | **Main Ui Normal Color** |Default color of UI elements |  |
|
|
|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
|
|
|3 | **Toggle State Off Color** | Color of toggle when off |  |
|
|
|4 | **Toggle State On Color** | Color of toggle when on |  |
|
|
|5 | **Background Info Page Color** | Info screen background |  |
|
|
|6 | **Background Menu Color** | Menu background color |  |
|
|
|7 | **Background Point Panel Color** | Background panel for point/balance UI | |
|
|
|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
|
|
|9 | **Button Quit Color** | Quit button color |  |
|
|
|10 | **Button Cancel Color** | Cancel button color |  |
|
|
|11 | **Label Balance Normal Color** | Normal balance label color |  |
|
|
|12 | **Label Balance Spin Color** | During-spin label color |  |
|
|
|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | |
|
|
|14 | **Label Start Auto Color** | Start autoplay label |  |
|
|
|15 | **Label Outline Notification** | Outline color + width config | |
|
|
|16 | **Total Win Medium Win Color** | Color for label medium win |  |
|
|
|
|
--- |