Compare commits
4 Commits
feature/ad
...
develop
| Author | SHA1 | Date | |
|---|---|---|---|
| b0417807c3 | |||
|
a64b8f8f6d | ||
|
|
5fa4b9fe40 | ||
|
|
d3ec058f35 |
@ -1,527 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Main Scene
|
||||
|
||||
This is where all the magic happen.
|
||||
|
||||
---
|
||||
|
||||
Main scene is the most complicated scene with hundreds of object, script and config.
|
||||
|
||||
|
||||
|
||||
Yet it is suprisingly simple to use.
|
||||
|
||||
By following step by step setup, you'll have a working main scene in no time.
|
||||
|
||||
:::info
|
||||
In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.
|
||||
|
||||
Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
## Setup SpriteFrame Provider
|
||||
---
|
||||
|
||||
**SpriteFrameProvider** allows global access to "sprite frames" from code.
|
||||
|
||||
|
||||
|
||||
## Setup Animation Provider
|
||||
---
|
||||
|
||||
**Animation Provider** contains all **animations** of the game.
|
||||
|
||||
|
||||
|
||||
## Setup Reel Slot
|
||||
---
|
||||
|
||||
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.
|
||||
:::
|
||||
|
||||
## Setup Spinning Panel
|
||||
|
||||
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.
|
||||
|
||||
- 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'));
|
||||
};
|
||||
```
|
||||
:::
|
||||
|
||||
|
||||
## Setup UI Panel
|
||||
|
||||
### UI Panel Overview
|
||||
|
||||
The UI system supports both desktop and mobile layouts design.
|
||||
|
||||
#### 🖥️ Desktop Layout
|
||||
- Full bottom bar with all controls visible
|
||||
- Horizontal layout maximizing screen width
|
||||
|
||||
|
||||
|
||||
#### 📱 Mobile Layout
|
||||
The mobile interface adapts to both landscape and portrait orientations:
|
||||
|
||||
| Orientation | Preview |
|
||||
|-------------|----------|
|
||||
| Landscape |  |
|
||||
| Portrait |  |
|
||||
|
||||
|
||||
### UI Sideband
|
||||
> To Be Added:
|
||||
> - Prepare the asset
|
||||
> - Run helper / p4f menu or setup manually
|
||||
### UI Bottom Bar Desktop
|
||||
|
||||
#### Step 1: Setup 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: Setup 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)
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
### UI Panel Mobile
|
||||
|
||||
#### Step 1: Setup Prefab
|
||||
|
||||
| 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: Setup 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 4: Setup Color For Menu Mobile 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 |  |1
|
||||
|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 |  |
|
||||
|
||||
---
|
||||
|
||||
## Setup Popup Panel
|
||||
|
||||
### Overview
|
||||
|
||||
A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
|
||||
|
||||
||||
|
||||
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
|
||||
|
||||
|
||||
### Popup in the Game
|
||||
The popup panel is already integrated into the main scenes `template-main-game`.
|
||||
|
||||
|
||||
|
||||
#### Detail configuring:
|
||||
|
||||
##### Multiple Popup Panel:
|
||||
|
||||
:::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**.
|
||||
:::
|
||||
|
||||
##### Assets pack:
|
||||
|
||||
- *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**:
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Game Logo Setup Guide
|
||||
|
||||
### 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 Configuration
|
||||
|
||||
#### 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 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.
|
||||
:::
|
||||
@ -5,4 +5,16 @@ sidebar_position: 1
|
||||
# System
|
||||
---
|
||||
|
||||
> To be added
|
||||
## Sprite Frame Provider Setup
|
||||
|
||||
**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase.
|
||||
|
||||
|
||||
|
||||
---
|
||||
|
||||
## Animation Provider Setup
|
||||
|
||||
The **Animation Provider** manages and exposes all game-related **animation assets** globally.
|
||||
|
||||
|
||||
@ -7,7 +7,6 @@ sidebar_position: 2
|
||||
Is the visual scenery that appears behind the gameplay elements.
|
||||
|
||||
---
|
||||
## Overivew
|
||||
|
||||
The background consists of 2 parts: **Landscape** and **Portrait**.
|
||||
|
||||
@ -19,25 +18,25 @@ The background consists of 2 parts: **Landscape** and **Portrait**.
|
||||
|**Background Landscape**<br/>|<br/>|<br/>|
|
||||
|**Background Portrait**<br/>||<br/>|
|
||||
|
||||
## 1. Prepare the assets
|
||||
### 1. Prepare the assets
|
||||
| | Assets | Description |
|
||||
|:-:|--------------|---------|
|
||||
|**Static**<br/>||Static background is necessary for the game|
|
||||
|**Animation**<br/>||Animation background may or may not be present, depending on the game design|
|
||||
|
||||
## 2. Setup Background Landscape
|
||||
### 2. Setup Background Landscape
|
||||
|
||||
We use sprite frame background for landscape from prepared assets.
|
||||
|
||||
|
||||
|
||||
## 3. Setup Background Portrait
|
||||
### 3. Setup Background Portrait
|
||||
|
||||
We use sprite frame background for mobile from prepared assets.
|
||||
|
||||
|
||||
|
||||
## 4. Setup Background Animation
|
||||
### 4. Setup Background Animation
|
||||
|
||||
If the game have design animation for background, we will do this step.
|
||||
|
||||
|
||||
@ -5,24 +5,31 @@ sidebar_position: 2
|
||||
# Set Up Reel Slot
|
||||
---
|
||||
|
||||
1. Prepare the asset for symbols and reel frame.
|
||||
### Prepare Assets
|
||||
|
||||
Add the symbol textures and reel frame:
|
||||
|
||||
|
||||
|
||||
|||
|
||||
|------------------------------------------------------------------|--------------------------------------------------------------|
|
||||
|
||||
2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
|
||||
### Add symbols to `SpriteFrameProvider`
|
||||
|
||||
|
||||
This allows symbols to be accessed globally from code:
|
||||
|
||||
3. Add reel frame.
|
||||
|
||||
|
||||
 
|
||||
### Add Reel Frame
|
||||
|
||||
4. Config reel slot using `reel-scroller-helper`.
|
||||
| | |
|
||||
|--------------------------------------------------------------------|--------------------------------------------------------------|
|
||||
|
||||
### Configure the Reel Slot
|
||||
|
||||
Use `reel-scroller-helper` to configure spinning behavior:
|
||||
|
||||
|
||||
|
||||
| Properties | Explaination | Example |
|
||||
| Properties | Description | 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.||
|
||||
@ -32,10 +39,12 @@ sidebar_position: 2
|
||||
|**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`.
|
||||
### Generate Reel Panel
|
||||
|
||||
Use `reel-scroller-helper` to auto-generate the full panel:
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
|
||||
A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components.
|
||||
:::
|
||||
|
||||
@ -7,11 +7,18 @@ sidebar_position: 4
|
||||
|
||||
## Overview
|
||||
|
||||
Reel slot panel is just one part one the spinning panel.
|
||||
The **reel slot panel** is just one part of the overall **spinning panel** system.
|
||||
|
||||
There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.
|
||||
Other required panels include:
|
||||
|
||||
The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.
|
||||
- `landing-panel`
|
||||
- `tension-panel`
|
||||
- `present-win-cell-panel`
|
||||
- `present-win-border-panel`
|
||||
|
||||
Each panel can be quickly set up using the **Generate Panel** function from its helper script.
|
||||
|
||||
---
|
||||
|
||||
## Set Up Panel
|
||||
|
||||
|
||||
@ -4,25 +4,8 @@ sidebar_position: 7
|
||||
|
||||
# Item Description
|
||||
|
||||
Provides players with detailed information about each item of the game.
|
||||
|
||||
> To be Add
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
|
||||
|
||||
|
||||
## Prepare the assets
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
||Used to setup background|
|
||||
||Used to setup for static symbol|
|
||||
||Used to setup for animation symbol|
|
||||
|
||||
## Setup Prefabs Item Description
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :-------------: |
|
||||
| 1 | Locate all template prefabs need for **Item Description** | Search for the `template-item-description` prefab |  |
|
||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
||||
> To be Add
|
||||
31
docs/02-setup-main-game/05-main-scene/09-info-page.md
Normal file
31
docs/02-setup-main-game/05-main-scene/09-info-page.md
Normal file
@ -0,0 +1,31 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Info Page
|
||||
|
||||
Info Page (Information Page) provides players with essential details about how the game works. It helps players understand the rules, features, symbols, payout structures, and other gameplay mechanics.
|
||||
|
||||
---
|
||||
|
||||
## Paytable
|
||||
|
||||
Shows the value of each symbol and how much players can win from different combinations.
|
||||
|
||||
## Special Feature
|
||||
|
||||
Describes bonus rounds, free spins, jackpots, or other special win features.
|
||||
|
||||
## Gamble Feature
|
||||
|
||||
The Gamble Feature is a special option that allows players to risk their recent winnings for a chance to multiply them.
|
||||
|
||||
## Game Rules
|
||||
|
||||
Explains the basic mechanics and objectives of the game.
|
||||
|
||||
## Winning Lines or Ways
|
||||
|
||||
This section shows the valid winning combinations or paylines.
|
||||
|
||||
> To be added
|
||||
@ -1,81 +0,0 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Info Pages
|
||||
|
||||
Info Pages (Information Pages) provide players with essential details about how the game works. It helps player understand the rules, features, symbols, payout structures, and other gameplay mechanics.
|
||||
|
||||
---
|
||||
## Overivew
|
||||
|
||||
- **Desktop** consists Paytable and Rules in **Info Pages**.
|
||||
- **Mobile** is divided into 2 parts Paytable and Rules
|
||||
|
||||
|Desktop | Mobile |
|
||||
|:------:|:------:|
|
||||
|||
|
||||
|<br/>||
|
||||
|
||||
## Prepare the assets
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
||Used to setup **Rules** or image in RichText|
|
||||
||Used to setup **Paytable**|
|
||||
|
||||
## Setup Prefabs Desktop
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: |
|
||||
| 1 | Locate all template prefabs need for **Info Page Desktop** | Search for the `desktop-hyper-info-panel` prefab |  |
|
||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
||||
| 3 | Get settings config| - Run DevTools on Browser.<br/>- On tab Console, find message with **event** = `config`.<br/>- Get values in context = `paytable` to setup for Item Payout with Item name and Odds |  |
|
||||
|
||||
### desktop-info-panel
|
||||
|
||||
Change color `page-background`, `menu-header-background` follow the game design.
|
||||
|
||||
|
||||
|
||||
### desktop-paytable-content
|
||||
|
||||
- Paytable: Consist **Item with Payout** and **Item with Description**
|
||||
|
||||
 
|
||||
|
||||
| Action | Item with Payout | Item with Description|
|
||||
| ------ | :--------------: | :------------------: |
|
||||
| Setup Item with **Name** and **Odds** follow the game design. |  |  |
|
||||
| Setup sprite frame `item-display` same name with Item from prepared assets. |  |  |
|
||||
| Change color **odds value** follow the game design. |  ||
|
||||
| Change **description** follow the game design. | |  |
|
||||
|
||||
- Feature Game: Depending on each game, there will be different features. Includes of 3 parts
|
||||
- Title : Change Text and Color follow the game design.
|
||||
- Image : Use from prepared assets.
|
||||
- Description: Change Text follow the game design.
|
||||
|
||||
| Overivew | Configure |
|
||||
| :--------------: | :------------------: |
|
||||
|  |  |
|
||||
|  |  |
|
||||
|
||||
### desktop-rules-content
|
||||
|
||||
1. Add new Node is child of `lines` name `lines-image` with **Sprite** Component
|
||||
2. Use sprite frame **lines** from prepared assets.
|
||||
3. Description: Change Text follow the game design.
|
||||
|
||||
| Overivew | Configure |
|
||||
| :--------------: | :------------------: |
|
||||
|  |  |
|
||||
|
||||
## Setup Prefabs Mobile
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| :--: | :----- | :---------- | :-------------: |
|
||||
| 1 | Locate all template prefabs need for **Info Page Mobile** | Search for the `mobile-ui` prefab |  |
|
||||
| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. |  |
|
||||
| 3 | Configure prefabs| We will do the same as configure for desktop. | |
|
||||
| 4 | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. |  |
|
||||
| 5 | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. |  |
|
||||
@ -74,22 +74,18 @@ The `FormatText` property controls text formatting behavior for label components
|
||||
### 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 |
|
||||
🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
|
||||
### 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)
|
||||
🔗 Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
||||
:::
|
||||
|
||||
|
||||
@ -97,7 +93,7 @@ Checklist assets completed for bottom UI and button UI text
|
||||
|
||||
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)
|
||||
🔗Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
:::
|
||||
|
||||
---
|
||||
@ -49,11 +49,7 @@ 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 |
|
||||
🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
|
||||
### Step 4: Apply Textures
|
||||
|
||||
@ -62,7 +58,7 @@ Create new node and configuration in your main scene:
|
||||
Checklist assets completed for Mobile UI
|
||||
|
||||
:::info
|
||||
🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure)
|
||||
🔗Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
||||
:::
|
||||
|
||||
|
||||
@ -70,7 +66,7 @@ Checklist assets completed for Mobile UI
|
||||
|
||||
To configure the mobile UI helper.
|
||||
:::info
|
||||
🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
:::
|
||||
|
||||
|
||||
|
||||
@ -65,7 +65,7 @@ onLoad: function () {
|
||||
|
||||
|
||||
|
||||
🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller`
|
||||
🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-ui-controller)
|
||||
|
||||
2. Node Setup
|
||||
```typescript
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
sidebar_position: 14
|
||||
---
|
||||
|
||||
# Sprite Frame Provider Setup
|
||||
---
|
||||
**SpriteFrameProvider** allows global access to "sprite frames" from code.
|
||||
|
||||
|
||||
@ -1,9 +0,0 @@
|
||||
---
|
||||
sidebar_position: 15
|
||||
---
|
||||
|
||||
# Set Up the Animation Provider
|
||||
---
|
||||
**Animation Provider** contains all **animations** of the game.
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 206 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 88 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 233 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 216 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 75 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 38 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 44 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 48 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 40 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 50 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 37 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 36 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 701 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 248 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 160 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 198 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 130 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 19 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 10 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 175 KiB |
@ -6,23 +6,22 @@ description: Main scene structure and setup process.
|
||||
|
||||
# Main Scene
|
||||
|
||||
This is where all the magic happen.
|
||||
This is where all the magic happens.
|
||||
|
||||
---
|
||||
|
||||
Main scene is the most complicated scene with hundreds of object, script and config.
|
||||
The **Main Scene** is the most complex scene in the project, containing **hundreds of objects, scripts, and configurations**.
|
||||
|
||||
|
||||
|
||||
Yet it is suprisingly simple to use.
|
||||
Yet, it is surprisingly simple to use.
|
||||
|
||||
By following step by step setup, you'll have a working main scene in no time.
|
||||
By following the step-by-step setup, you'll have a fully working main scene in no time.
|
||||
|
||||
:::info
|
||||
In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.
|
||||
In fact, if all the other scenes are set up correctly, you can even test the game without configuring the main scene.
|
||||
|
||||
Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.
|
||||
Try running the project - the result might look minimal, but it's actually the full game logic running without any visual assets.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB After Width: | Height: | Size: 56 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 11 KiB |
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-1.png
Normal file
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 102 KiB |
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-2.png
Normal file
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-2.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 20 KiB |
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png
Normal file
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png
Normal file
BIN
docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 42 KiB After Width: | Height: | Size: 142 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 122 KiB After Width: | Height: | Size: 107 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 55 KiB After Width: | Height: | Size: 69 KiB |
@ -0,0 +1,24 @@
|
||||
# Cocos Scene Setup
|
||||
---
|
||||
|
||||
## Platform Node Spawner
|
||||
|
||||
Use this configuration to control which prefabs appear based on the current platform.
|
||||
|
||||
| Setting | Value | Description |
|
||||
|--------------------|----------------------|-----------------------------------------------|
|
||||
| **Desktop Toggle** | ✅ Enabled | Show prefab on desktop |
|
||||
| **Mobile Toggle** | ❌ Disabled | Hide prefab on mobile |
|
||||
| **Target Prefab** | `prefab name` | Name of the prefab to be spawned |
|
||||
|
||||
|
||||
## Platform ui controller
|
||||
|
||||
1. Attach this script to any node that should only appear on a specific platform.
|
||||
|
||||
2. At runtime, the node will automatically be removed if it doesn’t match the active platform.
|
||||
|
||||
| Setting | Value | Description |
|
||||
|--------------------|----------------------|-----------------------------------------------|
|
||||
| **Desktop Toggle** | ✅ Enabled | Show node on desktop |
|
||||
| **Mobile Toggle** | ❌ Disabled | Hide node on mobile |
|
||||
Loading…
x
Reference in New Issue
Block a user