move content by titile
This commit is contained in:
dungdq
parent
d1c23fc358
commit
273d7ea74c
@ -2,10 +2,40 @@
|
|||||||
sidebar_position: 2
|
sidebar_position: 2
|
||||||
---
|
---
|
||||||
|
|
||||||
# Reel Slot
|
# Set Up Reel Slot
|
||||||
|
|
||||||
> To be added
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
> To be added
|
1. Prepare the asset for symbols and reel frame.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
3. Add reel frame.
|
||||||
|
|
||||||
|
 
|
||||||
|
|
||||||
|
4. Config reel slot using `reel-scroller-helper`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
| Properties | Explaination | Example |
|
||||||
|
|------------|--------------|---------|
|
||||||
|
|**Cell Item Script Name**|The name of the script will be attached to each cell item.||
|
||||||
|
| **Scroller Script Name** | the name of the script for handling the spinning logic.||
|
||||||
|
|**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.||
|
||||||
|
|**Cell Size**| the size of each cells.||
|
||||||
|
|**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.||
|
||||||
|
|**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.||
|
||||||
|
|
||||||
|
5. Generate panel using `reel-scroller-helper`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
:::tip
|
||||||
|
There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
|
||||||
|
:::
|
||||||
|
|||||||
@ -2,10 +2,58 @@
|
|||||||
sidebar_position: 4
|
sidebar_position: 4
|
||||||
---
|
---
|
||||||
|
|
||||||
# Spinning Panel
|
# Set Up Spinning Panel
|
||||||
|
|
||||||
> To be added
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
> To be added
|
## Overview
|
||||||
|
|
||||||
|
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.
|
||||||
|
|
||||||
|
## Set Up Panel
|
||||||
|
|
||||||
|
- Landing Panel:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Tension Panel:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**check toggle General Panel**
|
||||||
|
|
||||||
|
|
||||||
|
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'));
|
||||||
|
};
|
||||||
|
```
|
||||||
|
:::
|
||||||
|
|||||||
@ -0,0 +1,104 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 10
|
||||||
|
---
|
||||||
|
# Bottom Bar UI (Desktop)
|
||||||
|
---
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
- Full bottom bar with all controls visible
|
||||||
|
- Horizontal layout maximizing screen width
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Step 1: Set Up Prefab Editor
|
||||||
|
|
||||||
|
| Step | Action | image |
|
||||||
|
|------|---------|--------------|
|
||||||
|
| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab |  |
|
||||||
|
| 2. Find Assets | Navigate to `core/editor` directory |  |
|
||||||
|
| 3. Clone Assets | Copy / Paste to game assets location |  |
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
|
### Step 2: Configure Prefabs
|
||||||
|
|
||||||
|
#### Core Prefabs Structure
|
||||||
|
Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
|
||||||
|
|
||||||
|
|
||||||
|
#### 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
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 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. |
|
||||||
|
| -------------------- | ------------------------------------------------- |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
#### 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
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
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: Set Up UI In Main Scenes
|
||||||
|
|
||||||
|
Create new node and configuration in your main scene:
|
||||||
|
|
||||||
|
|
||||||
|
#### 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)
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
#### 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)
|
||||||
|
:::
|
||||||
|
|
||||||
|
---
|
||||||
110
docs/02-setup-main-game/05-main-scene/11-ui-panel-mobile.md
Normal file
110
docs/02-setup-main-game/05-main-scene/11-ui-panel-mobile.md
Normal file
@ -0,0 +1,110 @@
|
|||||||
|
---
|
||||||
|
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
|
||||||
|
|
||||||
|
| 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)
|
||||||
|
:::
|
||||||
|
|
||||||
|
|
||||||
|
#### 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 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 |  |
|
||||||
|
|
||||||
|
---
|
||||||
62
docs/02-setup-main-game/05-main-scene/12-popup-panel.md
Normal file
62
docs/02-setup-main-game/05-main-scene/12-popup-panel.md
Normal file
@ -0,0 +1,62 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 12
|
||||||
|
---
|
||||||
|
|
||||||
|
# Popup Panel
|
||||||
|
---
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
|
||||||
|
A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
|
||||||
|
|
||||||
|
||||
|
||||||
|
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
|
||||||
|
|
||||||
|
|
||||||
|
## Multiple Popup Panel
|
||||||
|
The popup panel is already integrated into the main scenes `template-main-game`.
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
Detail configuring:
|
||||||
|
|
||||||
|
#### Base Setting
|
||||||
|
|
||||||
|
:::info
|
||||||
|
|
||||||
|
|
||||||
|
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**.
|
||||||
|
:::
|
||||||
|
|
||||||
|
#### Pack Assets
|
||||||
|
|
||||||
|
- *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`||
|
||||||
|
|
||||||
|
- Structure prefabs:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Manually drag and drop the image onto the node:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
**Preview Result**:
|
||||||
|
|
||||||
|
|
||||||
|
---
|
||||||
128
docs/02-setup-main-game/05-main-scene/13-game-logo.md
Normal file
128
docs/02-setup-main-game/05-main-scene/13-game-logo.md
Normal file
@ -0,0 +1,128 @@
|
|||||||
|
---
|
||||||
|
sidebar_position: 13
|
||||||
|
---
|
||||||
|
|
||||||
|
# Game Logo
|
||||||
|
|
||||||
|
### Overview
|
||||||
|
The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
|
||||||
|
|
||||||
|
| Platform | Orientation | Preview |
|
||||||
|
|----------|------------|----------|
|
||||||
|
| Desktop | Standard |  |
|
||||||
|
| Mobile | Landscape |  |
|
||||||
|
| Mobile | Portrait |  |
|
||||||
|
|
||||||
|
### Logo Settings
|
||||||
|
|
||||||
|
#### 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` |  |
|
||||||
|
| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
|
||||||
|
|
||||||
|
##### Animation Assets
|
||||||
|
| Platform | Location | Preview |
|
||||||
|
|----------|----------|---------|
|
||||||
|
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
|
||||||
|
| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
|
||||||
|
|
||||||
|
#### 3. Animation Settings
|
||||||
|
1. Configure Provider
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2. Setup States
|
||||||
|
|
||||||
|
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
- Configure continuous loop playback:
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
### Platform-Specific Setup
|
||||||
|
|
||||||
|
#### Desktop Configuration
|
||||||
|
|
||||||
|
1. Base Settings
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
|
||||||
|
|
||||||
|
2. Node Setup
|
||||||
|
```typescript
|
||||||
|
Components: {
|
||||||
|
animation: 'hyper-logo-animation',
|
||||||
|
}
|
||||||
|
```
|
||||||
|
|
||||||
|
|
||||||
|
:::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 (**Exp: 1.0**) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
##### 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 (**Exp: 1.0** ) |
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
2. Position Settings
|
||||||
|
|
||||||
|
| State | Position | Example |
|
||||||
|
|-------|----------|---------|
|
||||||
|
| Jackpot Active | Upper position |  |
|
||||||
|
| Jackpot Inactive | Default position |  |
|
||||||
|
|
||||||
|
3. Size Settings
|
||||||
|
|
||||||
|
Using componet `spine-aspect-ratio-keeper` :
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
|
| 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 static logo display under slow network conditions.
|
||||||
|
:::
|
||||||
Loading…
x
Reference in New Issue
Block a user