Compare commits
No commits in common. "develop" and "master" have entirely different histories.
25
README.md
25
README.md
@ -1,25 +0,0 @@
|
||||
# Website
|
||||
|
||||
This website is built using [Docusaurus](https://docusaurus.io/), a modern static website generator.
|
||||
|
||||
### Installation
|
||||
|
||||
```
|
||||
$ npm install
|
||||
```
|
||||
|
||||
### Local Development
|
||||
|
||||
```
|
||||
$ npm start
|
||||
```
|
||||
|
||||
This command starts a local development server and opens up a browser window. Most changes are reflected live without having to restart the server.
|
||||
|
||||
### Build
|
||||
|
||||
```
|
||||
$ npm build
|
||||
```
|
||||
|
||||
This command generates static content into the `build` directory and can be served using any static contents hosting service.
|
||||
@ -1,8 +0,0 @@
|
||||
---
|
||||
id: intro
|
||||
sidebar_position: 0
|
||||
---
|
||||
|
||||
# Slot game API
|
||||
|
||||
To be written
|
||||
@ -1,69 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Create The Project
|
||||
|
||||
The first step to start a new project.
|
||||
|
||||
When starting a new project, you'll be giving an empty repository.
|
||||
|
||||
Take the `Roma Legacy` game as an example.
|
||||
|
||||
## Clone Git repository
|
||||
|
||||
To clone this repository, run the following command:
|
||||
|
||||
```bash
|
||||
git clone https://gitea.plp19.com/cocos-eanew/coc-roma-legacy.git
|
||||
```
|
||||
|
||||
Once cloned, configure your Git user information (only needed the first time):
|
||||
|
||||
```bash
|
||||
cd coc-roma-legacy
|
||||
git config user.name "Your Git Username"
|
||||
git config user.email "Your Email"
|
||||
```
|
||||
|
||||
## Create Cocos Creator project
|
||||
|
||||
Inside `coc-roma-legacy` folder, create a `project.json` file:
|
||||
|
||||
```json title="project.json"
|
||||
{
|
||||
"engine": "cocos-creator-js",
|
||||
"packages": "packages",
|
||||
"name": "coc-roma-legacy",
|
||||
"version": "2.4.4",
|
||||
"isNew": false
|
||||
}
|
||||
```
|
||||
|
||||
Now you can open the project in `Cocos Creator`.
|
||||
|
||||
1. Launch **Cocos Dashboard**
|
||||
2. Click **Add Project**
|
||||
3. Navigate to **coc-roma-legacy** folder
|
||||
4. Click **Select Project**.
|
||||
|
||||
|
||||
|
||||
Now that the project is available in `Cocos Dashboard`, double-click on it to open.
|
||||
|
||||
`Cocos Creator` will generate the entire game structure including `.gitignore` file.
|
||||
|
||||
|
||||
|
||||
## Commit to Git
|
||||
|
||||
At this point, you should create an initial commit and open your first `Pull Request`.
|
||||
|
||||
Run these following command:
|
||||
|
||||
```bash
|
||||
git checkout -b feature/init-project
|
||||
git add --a
|
||||
git commit -m "Init cocos project"
|
||||
git push --set-upstream origin feature/init-project
|
||||
```
|
||||
@ -1,92 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Add Submodules
|
||||
|
||||
Let's add more packages and templates to the project.
|
||||
|
||||
A slot game project is composed of multiple Git repositories used as [submodules](https://www.atlassian.com/git/tutorials/git-submodule).
|
||||
|
||||
It is important to understand the responsibilities of each submodule.
|
||||
|
||||
We recommend reviewing the [Slot Core Submodule documentation](../category/submodules/) before proceeding.
|
||||
|
||||
## Main submodules
|
||||
|
||||
These are submodules presented in every Slot Game project.
|
||||
|
||||
To add main submodules, run the following commands:
|
||||
|
||||
```bash
|
||||
git submodule add -f ../base-slot-template.git assets/core-assets/slotty-core
|
||||
git submodule add -f ../game-core-template.git assets/core-assets/game-core
|
||||
git submodule add -f ../hyper-slot-template.git assets/core-assets/hyper-core
|
||||
```
|
||||
|
||||
To add packages submodule, first **delete packages folder**.
|
||||
|
||||
Then run the follwing command:
|
||||
|
||||
```bash
|
||||
git submodule add -f ../hyper-editor-package.git packages
|
||||
```
|
||||
|
||||
## International Theme vs Chinese Theme
|
||||
|
||||
Depend on the theme of your game, add these commands:
|
||||
|
||||
For `International Theme`:
|
||||
|
||||
```bash
|
||||
git submodule add -f ../hyper-wintune-international.git assets/core-assets/hyper-wintune-international
|
||||
git submodule add -f ../hyper-coin-shower-international.git assets/core-assets/hyper-coin-shower-international
|
||||
git submodule add -f ../hyper-dialog-international.git assets/core-assets/hyper-dialog-international
|
||||
```
|
||||
|
||||
For `Chinese Theme`:
|
||||
|
||||
```bash
|
||||
git submodule add -f ../hyper-wintune-chinese.git assets/core-assets/hyper-wintune-chinese
|
||||
git submodule add -f ../hyper-coin-shower-chinese.git assets/core-assets/hyper-coin-shower-chinese
|
||||
git submodule add -f ../hyper-dialog-chinese.git assets/core-assets/hyper-dialog-chinese
|
||||
```
|
||||
|
||||
## Optional Submodule
|
||||
|
||||
These are submodules for specific feature including: `landing sound`, effect `win border/tension` and `hyper jackpot`.
|
||||
|
||||
Add one or more of those submodules depends on the game design.
|
||||
|
||||
```bash
|
||||
git submodule add -f ../hyper-jackpot-package.git assets/core-assets/hyper-jackpot
|
||||
git submodule add -f ../hyper-win-border-and-tension.git assets/core-assets/hyper-win-border-and-tension
|
||||
git submodule add -f ../hyper-scatter-landing-sound.git assets/core-assets/hyper-scatter-landing-sound
|
||||
```
|
||||
|
||||
## Update submodules to latest commit
|
||||
|
||||
All submodules should be on master branch and update to the latest commit.
|
||||
|
||||
To fetch the latest update, run the following command:
|
||||
|
||||
```bash
|
||||
git submodule update --init --recursive
|
||||
```
|
||||
|
||||
:::tip
|
||||
You can drop the `--init` after the first time.
|
||||
:::
|
||||
|
||||
## Commit to git
|
||||
|
||||
Now that we add all nesscessary submodule to the project, let's commit all of these change to open a Pull Request:
|
||||
|
||||
Run these following command:
|
||||
|
||||
```bash
|
||||
git checkout -b feature/add-submodules
|
||||
git add --a
|
||||
git commit -m "Add submodules"
|
||||
git push --set-upstream origin feature/add-submodules
|
||||
```
|
||||
@ -1,35 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Setup Custom Cocos Engine
|
||||
|
||||
Set **Javascript Engine Path** to a **custom Cocos Engine**.
|
||||
|
||||
Thanks to the open source nature of Cocos Creator, we are able to customize some of the function in the source code to meet the requirement for Hyper Slot Game.
|
||||
|
||||
For the detail of the Custom Engine, take a look at this [**Custom Cocos Engine documentation**](../category/custom-cocos-engine)
|
||||
|
||||
**Clone the repository**
|
||||
|
||||
This custom engine can be universally used for all Hyper Slot Game project. So you only have to do this step once.
|
||||
|
||||
Choose your working directory and clone this repo using the following command:
|
||||
|
||||
```bash
|
||||
git clone https://gitea.plp19.com/cocos-core/cocos-creator-engine.git
|
||||
```
|
||||
|
||||
**Set custom engine in Cocos Creator**
|
||||
|
||||
Open the project in Cocos Creator.
|
||||
|
||||
From the main menu, choose `Projects` -> `Project Settings`
|
||||
|
||||
|
||||
|
||||
Click on the `Custom Engine` tab, set `Javascript Engine Path` to the `cocos-creator-engine` folder.
|
||||
|
||||
Click `Save` and restart Cocos Creator.
|
||||
|
||||
|
||||
@ -1,52 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Create Game Folder Structure
|
||||
|
||||
Make a folder structure for all the game assets.
|
||||
|
||||
Inside the `assets` folder, we already have a `core-assets` folder which contains all assets of the template submodule.
|
||||
|
||||
We need to have a `game-assets` folder to contain the assets for our game.
|
||||
|
||||
Create the following folder structure:
|
||||
|
||||
|
||||
|
||||
Next we're gonna use our first template assets - the template cocos scenes.
|
||||
|
||||
These scenes are already setup and ready to use.
|
||||
|
||||
Copy all Cocos scene assets from `assets/core-assets/hyper-core/scenes` to ` assets/game-assets/scenes`.
|
||||
|
||||
Rename those scenes:
|
||||
- `template-loading` -> `loading`
|
||||
- `template-main-game` -> `main-game`
|
||||
- `template-preload` -> `preload`
|
||||
- `template-preview` -> `preview`
|
||||
|
||||
|
||||
|
||||
Inside `assets/game-assets/scripts/`, create a folder called `custom-scaler` then add a script `custom-scale-data.js`.
|
||||
|
||||
|
||||
|
||||
The setup is complete. You should create a commit and open Pull Request.
|
||||
|
||||
Run these following command:
|
||||
|
||||
```bash
|
||||
git checkout -b feature/setup-folder-structure
|
||||
git add --a
|
||||
git commit -m "Setup Folder Structure"
|
||||
git push --set-upstream origin feature/setup-folder-structure
|
||||
```
|
||||
|
||||
:::warning
|
||||
Notice that you can only commit `game-asset`, `scripts` and `scenes`.
|
||||
|
||||
Git automatically ignores empty folders, so don't be alarmed if they don't appear in your commits.
|
||||
|
||||
No worries—these folders will soon be filled with plenty of assets!
|
||||
:::
|
||||
@ -1,17 +0,0 @@
|
||||
{
|
||||
"position": 1,
|
||||
"label": "Setup The Project",
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"link": {
|
||||
"type": "generated-index",
|
||||
"title": "Start a new project",
|
||||
"description": "This section will guide you through the process of setting up a new project, including creating a new repository and configuring your development environment.",
|
||||
"keywords": [
|
||||
"setup",
|
||||
"project",
|
||||
"repository",
|
||||
"development environment"
|
||||
]
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 18 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 85 KiB |
@ -1,178 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# Game Configuration
|
||||
|
||||
The initial configuration requirements from the Slot Core.
|
||||
|
||||
---
|
||||
|
||||
While the core logic is responsible for calculations and maintaining the game state, it's the client's responsibility to define all game-specific information.
|
||||
|
||||
Let’s go step-by-step to define these elements.
|
||||
|
||||
## Slot Items
|
||||
|
||||
Each game features specific slot items displayed on the reel panel. By default, the Slot Core includes only two items: **Wild** and **Scatter**.
|
||||
|
||||
For `Roma Legacy`, there are 8 slot items total, including **Wild**.
|
||||
|
||||
|
||||
|
||||
To define the 7 additional items for this game, create the following script:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/slotty-item.js"
|
||||
var SlottyItem = p4fslot.require('slotty-item');
|
||||
var Enum = p4fslot.require('extendable-enum');
|
||||
|
||||
Enum.InitEnum(SlottyItem, [
|
||||
'Pic1',
|
||||
'Pic2',
|
||||
'Pic3',
|
||||
'Pic4',
|
||||
'Pic5',
|
||||
'Pic6',
|
||||
'Pic7',
|
||||
'Bonus'
|
||||
]);
|
||||
|
||||
module.exports = SlottyItem;
|
||||
```
|
||||
|
||||
**Note**: Item names are defined using the texture asset names, not the symbol names received from the server response.
|
||||
|
||||
|Asset's name | Server Response |
|
||||
|-------------|-----------------|
|
||||
| Pic1 | PIC1 |
|
||||
| Pic2 | PIC2 |
|
||||
| Pic3 | PIC3 |
|
||||
| Pic4 | PIC4 |
|
||||
| Pic5 | PIC5 |
|
||||
| Pic6 | PIC6 |
|
||||
| Pic7 | PIC7 |
|
||||
| Bonus | BONUS |
|
||||
|
||||
For example, if the server returns a symbol named **BONUS**, the game should display the **Bonus** asset.
|
||||
|
||||
To establish this mapping, use the following configuration script:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/configs/extend-hyper-gaming-config.js"
|
||||
var HyperGamingConfig = require('hyper-gaming-config');
|
||||
var SlottyItem = require('slotty-item');
|
||||
|
||||
HyperGamingConfig.itemMapper['BONUS'] = SlottyItem.Bonus;
|
||||
HyperGamingConfig.itemMapper['PIC1'] = SlottyItem.Pic1;
|
||||
HyperGamingConfig.itemMapper['PIC2'] = SlottyItem.Pic2;
|
||||
HyperGamingConfig.itemMapper['PIC3'] = SlottyItem.Pic3;
|
||||
HyperGamingConfig.itemMapper['PIC4'] = SlottyItem.Pic4;
|
||||
HyperGamingConfig.itemMapper['PIC5'] = SlottyItem.Pic5;
|
||||
HyperGamingConfig.itemMapper['PIC6'] = SlottyItem.Pic6;
|
||||
HyperGamingConfig.itemMapper['PIC7'] = SlottyItem.Pic7;
|
||||
```
|
||||
|
||||
## Slot Setting
|
||||
|
||||
There are two settings that determine the betting method used in the game:
|
||||
|
||||
- **TypeBetConfig**: this defines the bet calculation method. The available options are:
|
||||
- Way
|
||||
- Line
|
||||
- BetOptions
|
||||
- Dynaways
|
||||
- **TypePayline**: this setting determines which text label is displayed in the game's UI. Each type corresponds to a different label:
|
||||
| Type | Text Message |
|
||||
|---------|----------------|
|
||||
|Way | BET PER WAY |
|
||||
|Line | BET PER LINE |
|
||||
|BaseBet | PLAY MULTIPLIER|
|
||||
|
||||
Depending on the requirements of your game, you can customize both Payline and BetConfig by adding the following script:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
var BaseSlottySetting = p4fslot.require('slotty-setting');
|
||||
var SlottyItem = require('slotty-item');
|
||||
var SlottyParameter = p4fslot.require('slotty-parameter');
|
||||
|
||||
BaseSlottySetting.prototype._getDefaultTypePayline = function () {
|
||||
return SlottyParameter.TypePayline.Line;
|
||||
};
|
||||
|
||||
BaseSlottySetting.prototype._getDefaultTypeBetConfig = function () {
|
||||
return SlottyParameter.TypeBetConfig.Line;
|
||||
}
|
||||
```
|
||||
|
||||
## Default Slot Item Pattern
|
||||
|
||||
When the game is opened, the reel panel should display a **default pattern** that contains no possible win lines.
|
||||
|
||||
For instance, the following item pattern should not be used, as it contains two win lines:
|
||||
|
||||
|
||||
|
||||
To keep the gameplay experience fresh, the displayed pattern should be selected randomly each time. At a minimum, three non-winning patterns should be available.
|
||||
|
||||
To configure these patterns, add the following method to your **extend-slotty-setting** script:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
BaseSlottySetting.prototype._getPatternNotWin = function () {
|
||||
return [
|
||||
[SlottyItem.Pic5, SlottyItem.Pic3, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,
|
||||
SlottyItem.Bonus, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic1, SlottyItem.Pic5,
|
||||
SlottyItem.Pic2, SlottyItem.Pic6, SlottyItem.Pic2, SlottyItem.Pic1, SlottyItem.Pic2
|
||||
],
|
||||
[SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic2, SlottyItem.Pic5, SlottyItem.Pic7,
|
||||
SlottyItem.Pic4, SlottyItem.Pic7, SlottyItem.Pic6, SlottyItem.Pic5, SlottyItem.Pic7,
|
||||
SlottyItem.Pic7, SlottyItem.Pic3, SlottyItem.Bonus, SlottyItem.Pic2, SlottyItem.Pic3
|
||||
],
|
||||
[SlottyItem.Pic1, SlottyItem.Pic2, SlottyItem.Pic3, SlottyItem.Pic7, SlottyItem.Pic3,
|
||||
SlottyItem.Pic2, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Pic2,
|
||||
SlottyItem.Pic1, SlottyItem.Pic7, SlottyItem.Pic4, SlottyItem.Pic3, SlottyItem.Bonus
|
||||
]
|
||||
];
|
||||
};
|
||||
```
|
||||
|
||||
The results of those 3 patterns are shown below:
|
||||
|
||||
| Pattern 1 | Pattern 2 | Pattern 3 |
|
||||
|---------------------------------|---------------------------------|---------------------------------|
|
||||
||||
|
||||
|
||||
## Hyper Gaming Integration
|
||||
|
||||
The Slot Core supports both SmartFox and Hyper Gaming connections. For Hyper Gaming, we integrate specific modules using the DIContainer.
|
||||
|
||||
To connect and interact with the Hyper Gaming server, we need to register two key modules:
|
||||
- **hyper-gaming-config**: manages the connection configuration for the Hyper Gaming server.
|
||||
- **hyper-gaming-server-handler**: handles request and response data for game-server communication.
|
||||
|
||||
To register these, add the `_registerInjection` function in `extend-slotty-setting.js`:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
var DIContainer = p4fcore.require('di-container');
|
||||
|
||||
BaseSlottySetting.prototype._registerInjection = function () {
|
||||
DIContainer.Register('serverConfig', require('hyper-gaming-config'));
|
||||
DIContainer.Register('serverHandler', p4fslot.require('hyper-gaming-server-handler'));
|
||||
};
|
||||
```
|
||||
|
||||
In addition to server modules, all Hyper Gaming projects should initialize the following handlers for sound, hotkey and UI interaction.
|
||||
|
||||
In the same `extend-slotty-setting.js`, add this function:
|
||||
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
var HyperSoundHandler = require('sound-handler');
|
||||
var UISoundHandler = require('ui-sound-handler');
|
||||
var HyperHotkeyHandler = require('hyper-hotkey-handler');
|
||||
var HyperNotificationHandler = require('hyper-notification-handler');
|
||||
|
||||
BaseSlottySetting.prototype._initializeParameter = function () {
|
||||
new UISoundHandler();
|
||||
new HyperSoundHandler();
|
||||
new HyperHotkeyHandler();
|
||||
new HyperNotificationHandler();
|
||||
};
|
||||
```
|
||||
@ -1,29 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Preview Scene
|
||||
|
||||
Local login configuration.
|
||||
|
||||
---
|
||||
|
||||
The login simulator scene allows you to run the game using a session account during development, enabling easier testing and debugging.
|
||||
|
||||
This scene includes a `login-hyper-gaming` object used to establish a connection with a running environment of your choice.
|
||||
|
||||
|
||||
|
||||
Available environments:
|
||||
|
||||
- **DEMO** : similar to [https://gaming-world.joker88.club]( https://gaming-world.joker88.club/). This environment uses a demo account, so no login is required. Some features are disabled, but the outcome feature is enabled, allowing you to select specific outcomes for testing purposes.
|
||||
- **SAT** : similar to [http://fns.joker88.club](http://fns.joker88.club/). This environment requires a valid account to log in. Except for the outcome feature, all other features are enabled, including replay and resume functionality.
|
||||
- **LOCAL** : Use this only if other environments are unavailable. By manually setting up session data, you can run the game locally. Not recommended for regular use.
|
||||
|
||||
To use preview scene, simply choose an Enviroment and put in the Game ID, then save the scene.
|
||||
|
||||
:::tip
|
||||
You should set the preview scene as a start scene in `Project Setting`. With that, no matter which scene your are on, when the game starts, it will always load preview scene first.
|
||||
|
||||
|
||||
:::
|
||||
@ -1,68 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Preload Scene
|
||||
|
||||
Setup configuration for asset loading.
|
||||
|
||||
---
|
||||
|
||||
The Preload Scene is where you define which assets will be downloaded **before** and **after** the game starts.
|
||||
|
||||
Setting up the preload system involves several steps, depending on the types of assets and specific download requirements.
|
||||
|
||||
Check out the [Game Assets Structure](../category/game-asset-structure) for more detail.
|
||||
|
||||
## Preload vs Postload
|
||||
|
||||
Hyper Slot Game uses a two-stage loading process:
|
||||
- **Preload**: Downloads essential assets before the game scene is displayed. These typically include the background, text elements, and static textures.
|
||||
- **Postload**: Downloads additional assets in the background after the scene has been loaded. This usually includes animations. While these assets are downloading, static frame texture are shown in place of the actual animations. Once the download is complete, the animations seamlessly replace the static frame.
|
||||
|
||||
| Preload | Postload |
|
||||
|--------------------------------------|---------------------------------|
|
||||
|  |  |
|
||||
|
||||
Preload and postload assets are organized by scene.
|
||||
|
||||
For example, before loading the **Main Scene**, its preload assets are downloaded first. After the scene is displayed, the postload assets begin downloading in the background.
|
||||
|
||||
The same process applies to other scenes such as **Gamble**, **Free Game**, and **Bonus**.
|
||||
|
||||
## Platform Assets
|
||||
|
||||
Hyper Slot Game runs on both Web Desktop and Web Mobile platforms. While the UI and textures appear visually similar across both, the actual assets differ due to platform-specific optimization requirements.
|
||||
|
||||
Typically, the mobile version uses smaller-sized texture assets to reduce memory usage and improve performance.
|
||||
|
||||
| Assets | Desktop Size | Mobile Size |
|
||||
|-----------------------|---------------|--------------|
|
||||
| Symbol Bonus Animation| 1024x2048 | 1024x1024 |
|
||||
| Bigwin Spine Animation| 512x1024 | 358x717 |
|
||||
|
||||
As a result, when the game detects a mobile device, it will automatically download a different set of optimized assets tailored for that platform.
|
||||
|
||||
## Localize Assets
|
||||
|
||||
Hyper Slot Game supports localization through both text and raw asset replacements, with English as the default language.
|
||||
|
||||
Based on the selected language configuration, the game will download the corresponding localized assets instead of the default English versions.
|
||||
|
||||
| Assets | EN | ZH | TH |
|
||||
|---------------|-----------------------------------------|---------------------------------------------|---------------------------------------------|
|
||||
|Text Buy Bonus||||
|
||||
|
||||
## Setting Up the Preload Scene
|
||||
|
||||
|
||||
|
||||
To set up the Preload Scene, simply open the scene and run the **preload-hyper** command from the **P4F Editor** package.
|
||||
|
||||
The available commands are:
|
||||
- **Load Message**: Scans the working directory for any text message files and loads them into the `game-message` component.
|
||||
- **Load Localize**: Detects all available language options and loads the corresponding localized assets into the `localization` component.
|
||||
- **Load Preload Assets**: Defines preload and postload assets, then loads them into the `p4f-scene-manager` component of the `scene-manager` node.
|
||||
- **Load Assets By Platform**: Scans for mobile-specific assets (used when the game runs on mobile devices) and loads them into the `platform-asset-manager` component.
|
||||
- **Load Sound**: Scans for background music and sound effects (SFX) and loads them into the `sound-controller`.
|
||||
- **Load All Above**: Executes all of the above commands in sequence.
|
||||
@ -1,59 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Loading Scene
|
||||
|
||||
Generate asset loading scene layout.
|
||||
|
||||
---
|
||||
|
||||
This is where the actual preload asset downloading begins, accompanied by a progress bar to indicate loading status.
|
||||
|
||||
In addition to loading assets, Hyper Slot Game also uses this scene to showcase the game’s main features through in-game advertisements.
|
||||
|
||||
|
||||
|
||||
## Loading Hyper vs New Loading Hyper
|
||||
|
||||
In Hyper Slot games, there are 2 styles of loading scene:
|
||||
|
||||
- **loading-hyper**: The default loading setup. Displays all advertising features on a single screen, with an option to automatically launch the game once all preload assets are downloaded.
|
||||
- **new-hyper-loading**: A newer loading style that presents advertising features in a paginated layout. This version does not include an option to start the game automatically.
|
||||
|
||||
| loading-hyper | new-loading-hyper |
|
||||
|-------------------------------------------------------|-----------------------------------------------------------------|
|
||||
|||
|
||||
|
||||
## Setup loading scene
|
||||
|
||||
To set up the loading scene, use the appropriate command from the `P4F Editor` package: `loading-hyper` or `new-loading-hyper`, depending on your requirements.
|
||||
|
||||
 
|
||||
|
||||
Running either command will generate a complete loading scene, including both landscape and portrait layouts.
|
||||
|
||||
Once the scene is generated, you can customize it by positioning UI elements and assigning the appropriate assets.
|
||||
|
||||
|
||||
|
||||
One of the best features of these commands is that they can also automatically load all required assets for the loading scene.
|
||||
|
||||
If you run the command without setting up the assets, you’ll see an empty loading scene like this:
|
||||
|
||||
|
||||
|
||||
However, with a proper asset setup, the loading scene will appear fully populated, like this:
|
||||
|
||||
|
||||
|
||||
:::info
|
||||
For detailed guidelines on how to set up loading assets, refer to the [Game Asset Structure](../category/game-asset-structure) manual.
|
||||
:::
|
||||
|
||||
:::tip
|
||||
For testing purposes, you don’t need a full asset setup. \
|
||||
Just set up the ***btn-start*** node in the Node Tree and you’re good to go.
|
||||
|
||||
|
||||
:::
|
||||
@ -1,26 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# System Setup
|
||||
|
||||
## Overview
|
||||
The **System** module provides global access to sprite frames and animation assets, enabling efficient resource management across the game.
|
||||
|
||||
## Sprite Frame Provider
|
||||
The **SpriteFrameProvider** allows global access to sprite frames from anywhere in the codebase.
|
||||
|
||||
|
||||
|
||||
**Setup Steps:**
|
||||
1. Configure the **SpriteFrameProvider** to register sprite assets.
|
||||
2. Ensure all sprite frames are added to the provider for global access.
|
||||
|
||||
## Animation Provider
|
||||
The **Animation Provider** manages and exposes game-related animation assets globally.
|
||||
|
||||
|
||||
|
||||
**Setup Steps:**
|
||||
1. Register animation assets in the **Animation Provider**.
|
||||
2. Verify that animations are correctly linked to their respective prefabs.
|
||||
@ -1,51 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Background Setup
|
||||
|
||||
## Overview
|
||||
The background serves as the visual scenery behind gameplay elements, supporting both **Landscape** (Desktop and Mobile) and **Portrait** (Mobile only) orientations.
|
||||
|
||||
| Orientation | Desktop | Mobile |
|
||||
|-------------|---------|--------|
|
||||
| **Landscape** |  |  |
|
||||
| **Portrait** |  |  |
|
||||
|
||||
## Asset Preparation
|
||||
| Type | Assets | Description |
|
||||
|------|--------|-------------|
|
||||
| **Static** |  | Required for all games. |
|
||||
| **Animation** |  | Optional, depending on game design. |
|
||||
|
||||
## Setup Steps
|
||||
1. **Landscape Background**:
|
||||
- Use the prepared sprite frame for the landscape background.
|
||||
- 
|
||||
|
||||
2. **Portrait Background**:
|
||||
- Use the prepared sprite frame for the mobile portrait background.
|
||||
- 
|
||||
|
||||
3. **Animated Background** (if applicable):
|
||||
- **Step 1**: Use the helper tool to generate animations from prepared assets.
|
||||
- 
|
||||
- 
|
||||
- **Step 2**: Configure spine animation settings:
|
||||
- Enable **Is Loop** to ensure continuous playback.
|
||||
- Set a **Static Sprite Frame** for display before the animation loads.
|
||||
- 
|
||||
- 
|
||||
- **Step 3**: Add animation nodes:
|
||||
- **Landscape**:
|
||||
- Create an `Empty Node` named `anim-background-main-game`.
|
||||
- Add the `animation-play-on-enable` component with the animation name from the **Animation Provider**.
|
||||
- Add the `background-scaler` component to resize based on screen resolution.
|
||||
- 
|
||||
- **Portrait**:
|
||||
- Create an `Empty Node` named `mobile-background-anim-portrait`.
|
||||
- Add the `mobile-portrait-background-ui-controller` and `orientation-ui-controller` components for mobile portrait display.
|
||||
- Create a child `Empty Node` named `anim-background-main-game`.
|
||||
- Add the `animation-play-on-enable` and `portrait-anim-background-scaler` components.
|
||||
- 
|
||||
- 
|
||||
@ -1,43 +0,0 @@
|
||||
---
|
||||
sidebar_position: 3
|
||||
---
|
||||
|
||||
# Reel Slot Setup
|
||||
|
||||
## Overview
|
||||
The reel slot system manages the core spinning mechanics of the game.
|
||||
|
||||
## Asset Preparation
|
||||
- Add symbol textures and reel frames:
|
||||
- 
|
||||
- 
|
||||
|
||||
## Sprite Frame Provider
|
||||
- Add symbols to the **SpriteFrameProvider** for global access.
|
||||
- 
|
||||
|
||||
## Reel Frame
|
||||
- Configure the reel frame:
|
||||
- 
|
||||
- 
|
||||
|
||||
## Configuration
|
||||
Use the `reel-scroller-helper` to set up spinning behavior:
|
||||
|
||||
|
||||
|
||||
| Property | Description | Example |
|
||||
|----------|-------------|---------|
|
||||
| **Cell Item Script Name** | Script attached to each cell item. |  |
|
||||
| **Scroller Script Name** | Script handling spinning logic. |  |
|
||||
| **Row Count x Reel Count** | Number of slot items per row and column. |  |
|
||||
| **Cell Size** | Size of each cell. |  |
|
||||
| **Cell Spacing** | Horizontal and vertical distance between cells. | - |
|
||||
| **Cell Dim Color** | Dark color for non-winning cells during win animations. |  |
|
||||
| **Top Count and Bot Count** | Additional cells at the top and bottom for spinning logic. |  |
|
||||
|
||||
## Generate Reel Panel
|
||||
- Use the `reel-scroller-helper` to auto-generate the reel panel.
|
||||
- 
|
||||
|
||||
**Tip**: Temporarily disable any popups covering the scene to view and edit reel slot components clearly.
|
||||
@ -1,37 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Spinning Panel Setup
|
||||
|
||||
## Overview
|
||||
The spinning panel system includes the **reel slot panel** and additional panels: `landing-panel`, `tension-panel`, `present-win-cell-panel`, and `present-win-border-panel`.
|
||||
|
||||
## Panel Setup
|
||||
- **Landing Panel**:
|
||||
- 
|
||||
- **Script**:
|
||||
```jsx
|
||||
SlottySetting.prototype._registerInjection = function () {
|
||||
DIContainer.Register('landingGenerator', require('landing-generator'));
|
||||
};
|
||||
```
|
||||
|
||||
- **Present Win Cell Panel**:
|
||||
- 
|
||||
|
||||
- **Present Win Border Panel**:
|
||||
- 
|
||||
|
||||
- **Tension Panel**:
|
||||
- 
|
||||
- For custom size frames, set **sizeMode** to **Custom** and configure the static frame and size.
|
||||
- 
|
||||
- **Check Toggle**: Ensure the general panel toggle is correctly set.
|
||||
- 
|
||||
- **Script**:
|
||||
```jsx
|
||||
SlottySetting.prototype._registerInjection = function () {
|
||||
DIContainer.Register('tensionGenerator', require('tension-generator'));
|
||||
};
|
||||
```
|
||||
@ -1,41 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# On Reel Win Point
|
||||
|
||||
## Overview
|
||||
- The **Win Point Per Line** system displays win points for each payline, including scatter wins.
|
||||
- The **All Win Point** system displays win point at center.
|
||||
|
||||
| Win Point Per Line | All Win Point |
|
||||
| ------------------ | ------------- |
|
||||
|||
|
||||
|
||||
## Asset Preparation
|
||||
|
||||
1. Locate all template prefabs: `assets/core-assets/hyper-core/packages/on-reel-present-win-point/prefab`
|
||||
2. Copy and paste them to the game assets location: `assets/game-assets/prefabs`
|
||||
|
||||
|
||||
|
||||
3. Prepare fonts
|
||||
|
||||
|
||||
|
||||
## Setup
|
||||
- Add the `on-reel-present-win-point`, `on-reel-present-all-win-point` prefab to the main scene.
|
||||
|
||||
- Set the **Label Position**, **Cell Item Size**, and **Defaut Font Size** according to the game design.
|
||||
|
||||
|
||||
|
||||
- Set the **Font** the prepared assets.
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
Follow game design specifications for position and size.
|
||||
:::
|
||||
@ -1,93 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Special Win System
|
||||
|
||||
## Overview
|
||||
Special Wins are high-value reward events categorized by payout thresholds:
|
||||
|
||||
| Win Type | Trigger Threshold | Preview |
|
||||
|----------|-------------------|---------|
|
||||
| **Big Win** | Medium payout |  |
|
||||
| **Super Win** | High payout |  |
|
||||
| **Mega Win** | Maximum payout |  |
|
||||
|
||||
## Implementation
|
||||
### Asset Preparation
|
||||
- Components:
|
||||
| Component | Purpose |
|
||||
|-----------|---------|
|
||||
| `hyper-special-win-initializer` | Initializes the system. |
|
||||
| `hyper-present-special-win` | Manages animation sequences and display logic. |
|
||||
| `hyper-special-win-label-point-effect` | Controls win amount visualization. |
|
||||
- 
|
||||
|
||||
- **Coin Effect System**:
|
||||
- Variants for different game theme:
|
||||
| Submodule | Theme | Preview |
|
||||
|-----------|-------|---------|
|
||||
| `hyper-coin-shower-international` | International |  |
|
||||
| `hyper-coin-shower-chinese` | Chinese |  |
|
||||
|
||||
- **Static Assets**:
|
||||
| Platform | Path | Preview |
|
||||
|----------|------|---------|
|
||||
| Desktop | `assets/textures/desktop/preloads/special-wins` |  |
|
||||
| Mobile | `assets/textures/mobile/preloads/special-wins` |  |
|
||||
|
||||
### Animation Setup
|
||||
1. **Animation Resources**:
|
||||
- Path:
|
||||
| Platform | Path | Preview |
|
||||
|----------|------|---------|
|
||||
| Desktop | `assets/textures/desktop/postloads/anim-special-win` |  |
|
||||
| Mobile | `assets/textures/mobile/postloads/anim-special-win` |  |
|
||||
|
||||
2. **Animation Flow**:
|
||||
```mermaid
|
||||
graph TD
|
||||
SW[Special Wins] --> BW[Big Win]
|
||||
SW --> SPW[Super Win]
|
||||
SW --> MW[Mega Win]
|
||||
|
||||
BW --> BWI[bigwin-in] --> BWL[bigwin-loop] --> BWO[bigwin-out]
|
||||
SPW --> SPWI[superwin-in] --> SPWL[superwin-loop] --> SPWO[superwin-out]
|
||||
MW --> MWI[megawin-in] --> MWL[megawin-loop] --> MWO[megawin-out]
|
||||
|
||||
classDef inStage fill:#e6f3ff,stroke:#666,color:#000
|
||||
classDef loopStage fill:#fff2cc,stroke:#666,color:#000
|
||||
classDef outStage fill:#f8cecc,stroke:#666,color:#000
|
||||
classDef winType fill:#d5e8d4,stroke:#82b366,color:#000
|
||||
classDef specialWin fill:#fff4dd,stroke:#ff0000,color:#000
|
||||
|
||||
class BWI,SPWI,MWI inStage
|
||||
class BWL,SPWL,MWL loopStage
|
||||
class BWO,SPWO,MWO outStage
|
||||
class BW,SPW,MW winType
|
||||
class SW specialWin
|
||||
linkStyle default stroke-width:2px,stroke:#ff0000
|
||||
```
|
||||
- 
|
||||
|
||||
3. **Animation Settings**:
|
||||
- Configure static fallback and loop animations:
|
||||
| Setting | Example |
|
||||
|---------|---------|
|
||||
| Static Fallback |  |
|
||||
| Loop Animation |  |
|
||||
|
||||
4. **Font Configuration**:
|
||||
- Path: `assets/game-assets/fonts/preloads/main-game/fnt-special-win`
|
||||
- Steps:
|
||||
1. Import font files.
|
||||
- 
|
||||
2. Add font to the special win component.
|
||||
- 
|
||||
3. Configure text alignment, font size, and spacing.
|
||||
- 
|
||||
|
||||
**Tip**:
|
||||
- Move assets to `custom-scale/` to resolve image quality issues.
|
||||
- Customize font styles based on game design.
|
||||
- [View Platform Asset Structure](/docs/category/game-asset-structure)
|
||||
@ -1,63 +0,0 @@
|
||||
---
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Item Description
|
||||
|
||||
## Overview
|
||||
The **Item Description** system provides detailed information about game items, including payouts and descriptions.
|
||||
|
||||
|
||||
|
||||
## Asset Preparation
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
|  | Background setup. |
|
||||
|  | Static symbol setup. |
|
||||
|  | Animation symbol setup. |
|
||||
|  | Payout or description text setup. |
|
||||
|
||||
## Setup
|
||||
1. **Locate Template Prefabs**:
|
||||
- Search for the `template-item-description` prefab.
|
||||
- 
|
||||
2. **Clone Assets**:
|
||||
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||
- 
|
||||
|
||||
### Prefab Configurations
|
||||
- **item-description-small** (Items with win payout only):
|
||||
- 
|
||||
- Steps:
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||
| 2 | Name prefab as `item-description-<name>` and set **Animation Name** in **Animation Provider**. |  |
|
||||
| 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
|
||||
| 4 | Adjust **Color**, **Font**, and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||
|
||||
- **item-description-no-odds** (Items with description only):
|
||||
- 
|
||||
- Steps:
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||
| 2 | Name prefab as `item-description-<name>` and set **Animation Name** in **Animation Provider**. |  |
|
||||
| 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. |  |
|
||||
| 4 | Set **String**, **Color**, **Font**, and **Font Size** in `description`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||
|
||||
- **item-description-big** (Items with both payout and description):
|
||||
- 
|
||||
- Steps:
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Set **Sprite Frame** in `background` using prepared assets. |  |
|
||||
| 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#prefab-configurations) |
|
||||
| 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#prefab-configurations) |
|
||||
**Tip**:
|
||||
- Use the helper tool to configure:
|
||||
1. Set **Content Size** and **Cell Item Size** per game design.
|
||||
2. Use prepared bitmap fonts for **Labels**.
|
||||
3. Click **Set Size** to run the helper.
|
||||
4. Configure **Background**, **Sprite Frame**, **Animation**, **Payout**, and **Description** using prepared assets.
|
||||
- 
|
||||
@ -1,74 +0,0 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
title: Free Round
|
||||
description: Display and manage remaining free rounds in the game.
|
||||
---
|
||||
|
||||
# Free Round System
|
||||
|
||||
## Overview
|
||||
The **Free Round** system manages the display and logic for tracking remaining free rounds with fixed bet in the game, supporting both desktop and mobile platforms.
|
||||
- **International theme popup**
|
||||
|
||||
- **Chinese theme popup**
|
||||
|
||||
|
||||
|
||||
| Platform | Preview |
|
||||
|----------|---------|
|
||||
| Desktop |  |
|
||||
| Mobile |  |
|
||||
|
||||
## Asset Preparation
|
||||
- **Core Assets**:
|
||||
- Path: `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs`
|
||||
- 
|
||||
- **Game Assets**:
|
||||
- Path: `assets/game-assets/prefabs`
|
||||
- 
|
||||
|
||||
## Setup
|
||||
1. **General Configuration**:
|
||||
- Ensure script references correct nodes.
|
||||
- 
|
||||
- Properties:
|
||||
| Property | Description |
|
||||
|----------|-------------|
|
||||
| `duration` | Duration of fade in/out animation (seconds). |
|
||||
| `content` | Container node for the counter. |
|
||||
| `labelLeft` | Label showing remaining free rounds. |
|
||||
- 
|
||||
|
||||
2. **Platform Setup**:
|
||||
- **Desktop**:
|
||||
- Add `Platform-ui-controller` component.
|
||||
- 
|
||||
- **Mobile**:
|
||||
- Add `Platform-ui-controller` and `UI Mobile Position` components.
|
||||
- 
|
||||
|
||||
3. **Asset Setup**:
|
||||
- **Desktop**:
|
||||
- Path: `assets/game-assets/textures/desktop/preloads/main-game/custom-scale`
|
||||
- 
|
||||
- **Mobile**:
|
||||
- Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale`
|
||||
- 
|
||||
- **Common**:
|
||||
- Free Round Background: 
|
||||
|
||||
4. **Font Setup**:
|
||||
- 
|
||||
|
||||
**Tip**:
|
||||
- Follow game design for position and size.
|
||||
- Use separate textures for Desktop and Mobile.
|
||||
- Ensure the main scene includes the popup panel ([See Popup Panel Guide](/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)).
|
||||
|
||||
## Game Result Example
|
||||
| Platform | Popup | Action | Result |
|
||||
|----------|-------|--------|--------|
|
||||
| Desktop |  | Click → Start |  |
|
||||
| Mobile |  | Click → Start |  |
|
||||
|
||||
|
||||
@ -1,98 +0,0 @@
|
||||
---
|
||||
sidebar_position: 9
|
||||
---
|
||||
|
||||
# Info Pages
|
||||
|
||||
## Overview
|
||||
**Info Pages** provide players with details about game rules, features, symbols, payout structures, and mechanics. They are divided into **Paytable** and **Rules** sections, with different layouts for Desktop and Mobile.
|
||||
|
||||
| Platform | Desktop | Mobile |
|
||||
|----------|---------|--------|
|
||||
| Paytable/Rules | <br/><br/> | <br/> |
|
||||
|
||||
## Asset Preparation
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
|  | Used for **Rules** or RichText images. |
|
||||
|  | Used for **Paytable** setup. |
|
||||
|
||||
## Desktop Setup
|
||||
1. **Locate Template Prefabs**:
|
||||
- Search for the `desktop-hyper-info-panel` prefab.
|
||||
- 
|
||||
2. **Clone Assets**:
|
||||
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||
- 
|
||||
|
||||
### desktop-info-panel
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Change **Color** in `page-background` per game design. |  |
|
||||
| 2 | Change **Color** in `menu-header-background` per game design. |  |
|
||||
| 3 | Update **Prefab** in `paytable-content` using prepared prefabs. |  |
|
||||
| 4 | Update **Prefab** in `rules-content` using prepared prefabs. |  |
|
||||
|
||||
### desktop-paytable-content
|
||||
- **Item with Payout**:
|
||||
- 
|
||||
- Steps:
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Set **Item Name** and **Odds Items** per game design. |  |
|
||||
| 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
|
||||
| 3 | Change **Color** in `multi-x...` and `odds-x...` per game design. |  |
|
||||
| 4 | Adjust **Font** and **Font Size** in `multi-x...` and `odds-x...`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. |  |
|
||||
|
||||
- **Item with Description**:
|
||||
- 
|
||||
- Steps:
|
||||
| Step | Action | Image Reference |
|
||||
|------|--------|-----------------|
|
||||
| 1 | Set **Name** per game design. |  |
|
||||
| 2 | Set **Sprite Frame** in `item-display` using prepared assets. |  |
|
||||
| 3 | Change **String** in `description` per game design. |  |
|
||||
|
||||
- **Feature Game**:
|
||||
- Configure based on game features (e.g., **FREESPIN BONUS**, **BONUS FEATURE**):
|
||||
- **Title**: Update **String** and **Color** in `freespins-bonus-title`.
|
||||
- **Image**: Set **Sprite Frame** in `freespins-bonus-image-...` using prepared assets.
|
||||
- **Description**: Update **String** in `freespins-bonus-description`.
|
||||
- 
|
||||
- 
|
||||
- 
|
||||
- 
|
||||
|
||||
### desktop-rules-content
|
||||
- Types: **Lines** or **Ways**.
|
||||
- Steps:
|
||||
1. Set **Sprite Frame** in `lines-image` using prepared assets.
|
||||
2. Change **Color** in `lines-title` per game design.
|
||||
3. For **Ways**:
|
||||
- Update **String** in `lines-title` to **WIN WAYS/DYNAWAYS**.
|
||||
- Enable and update **String** in `lines-description`.
|
||||
- 
|
||||
- 
|
||||
- 
|
||||
- 
|
||||
|
||||
## Mobile Setup
|
||||
1. **Locate Template Prefabs**:
|
||||
- Search for the `mobile-ui` prefab.
|
||||
- 
|
||||
2. **Clone Assets**:
|
||||
- Copy and paste to the game assets location, removing unnecessary prefixes.
|
||||
- 
|
||||
3. **Configure Prefabs**:
|
||||
- Configure `mobile-paytable-content` and `mobile-rules-content` as described in [Desktop Setup](#desktop-setup).
|
||||
4. **Spawner Positions**:
|
||||
- For **Paytable**: Use `mobile-paytable-content-spawner` in the `mobile-ui` prefab.
|
||||
- 
|
||||
- For **Rules**: Use `mobile-rule-content-spawner` in the `mobile-ui` prefab.
|
||||
- 
|
||||
|
||||
**Tip**:
|
||||
- If the game has a server, verify config settings:
|
||||
1. Open DevTools, navigate to the **Network** tab, and find the message with **event** = "config".
|
||||
2. Compare **paytable** values with the configured setup.
|
||||
- 
|
||||
@ -1,58 +0,0 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
|
||||
# Desktop Bottom Bar UI
|
||||
|
||||
## Overview
|
||||
The **Bottom Bar UI** provides a functional interface for gameplay controls on desktop, using a horizontal layout to maximize screen width.
|
||||
|
||||
|
||||
|
||||
## Implementation
|
||||
1. **Set Up Prefab Editor**:
|
||||
- **Locate Prefab**:
|
||||
- Search for `ui-bottom-bar-panel` prefab.
|
||||
- 
|
||||
- **Find Assets**:
|
||||
- Navigate to `core/editor` directory.
|
||||
- 
|
||||
- **Clone Assets**:
|
||||
- Copy and paste to the game assets location.
|
||||
- 
|
||||
|
||||
2. **Configure Prefabs**:
|
||||
- **Core Prefabs Structure**:
|
||||
- Path: `assets/core-assets/hyper-core/packages/ui/desktop-ui/prefabs`
|
||||
- 
|
||||
- **Rename Prefabs**:
|
||||
- Remove unnecessary prefixes:
|
||||
| Prefix to Remove | Original Name | Final Name |
|
||||
|------------------|---------------|------------|
|
||||
| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
|
||||
| `template-` | `template-button-auto-selection` | `button-auto-selection` |
|
||||
- 
|
||||
- **Customize `button-auto-selection` Label**:
|
||||
- Use `template-label-auto-selection` to adjust appearance.
|
||||
- Add **Label Outline** and **Label Shadow** for better readability.
|
||||
- 
|
||||
- **Customize `ui-bottom-bar-panel` Label**:
|
||||
- Use `assets/game-assets/editor/bottom-ui/template-label-title`.
|
||||
- Include a localization component for multi-language support.
|
||||
- 
|
||||
- **FormatText Properties**:
|
||||
| Property | Description | Example |
|
||||
|----------|-------------|---------|
|
||||
| `default` | Initial formatting state | `false` |
|
||||
| `notify` | Formatting update callback | Updates when value changes |
|
||||
|
||||
3. **Set Up UI in Main Scene**:
|
||||
- Create a new node and configure in the main scene.
|
||||
- 
|
||||
|
||||
4. **Apply Textures**:
|
||||
- Ensure assets for bottom UI and button UI text are complete.
|
||||
- 
|
||||
|
||||
5. **Run Helper Tool**:
|
||||
- Configure the bottom bar UI using the helper tool.
|
||||
@ -1,96 +0,0 @@
|
||||
---
|
||||
sidebar_position: 11
|
||||
---
|
||||
|
||||
# Mobile UI Panel
|
||||
|
||||
## Overview
|
||||
The Mobile UI provides a responsive interface for gameplay controls, adapting to both **Landscape** and **Portrait** orientations on mobile devices.
|
||||
|
||||
| Orientation | Preview |
|
||||
|-------------|---------|
|
||||
| Landscape |  |
|
||||
| Portrait |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Step 1: Set Up Prefabs
|
||||
Configure the necessary prefabs for the Mobile UI.
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
|------|--------|-------------|-----------------|
|
||||
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab in the project assets. |  |
|
||||
| 2 | Clone Assets | Copy the required assets to the game assets directory. |  |
|
||||
| 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**: Maintain the following directory structure for proper prefab references:
|
||||
```
|
||||
assets/
|
||||
└── game-assets/
|
||||
└── prefabs/
|
||||
└── mobile/
|
||||
├── mobile-ui.prefab
|
||||
└── buy-feature.prefab
|
||||
```
|
||||
|
||||
### Step 2: Rename Prefabs
|
||||
Rename the copied prefabs by removing unnecessary prefixes to ensure consistency.
|
||||
|
||||
| Prefix to Remove | Example |
|
||||
|------------------|---------|
|
||||
| `template-` |  |
|
||||
|
||||
### Step 3: Configure UI in Main Scene
|
||||
Add and configure a new node in the main scene to integrate the Mobile UI.
|
||||
|
||||
|
||||
|
||||
**Platform Node Spawner Settings**:
|
||||
|
||||
### Step 4: Apply Textures
|
||||
Ensure all Mobile UI assets are prepared and applied correctly.
|
||||
|
||||
|
||||
|
||||
**Run the Helper Tool**:
|
||||
- Use the Mobile UI helper tool to configure the UI components.
|
||||
|
||||
### Step 5: Set Color Theme for Mobile UI
|
||||
Customize the color theme for the Mobile UI using the `helper-paint-color-ui-mobile.js` component to apply theme-based colors across UI elements.
|
||||
|
||||
**Follow Design**:
|
||||
| Landscape | Portrait |
|
||||
|-----------|----------|
|
||||
|  |  |
|
||||
|
||||
**Configuration Steps**:
|
||||
1. **Access the Helper Component**:
|
||||
- Locate the `helper-paint-color-ui-mobile.js` component in the node inspector.
|
||||
- 
|
||||
|
||||
2. **Configure Color Properties**:
|
||||
- Adjust the following properties to match the game design:
|
||||
|
||||
| # | Property | Description | Example |
|
||||
|---|----------|-------------|---------|
|
||||
| 0 | **Paint Color** | Triggers repainting of UI components. |  |
|
||||
| 1 | **Main UI Normal Color** | Default color for UI elements (e.g., Buy, Close, Auto). |  |
|
||||
| 2 | **Main UI Highlight Color** | Color for highlighted or selected UI elements. |  |
|
||||
| 3 | **Toggle State Off Color** | Color for toggles in the off state. |  |
|
||||
| 4 | **Toggle State On Color** | Color for toggles in the on state. |  |
|
||||
| 5 | **Background Info Page Color** | Background color for info pages. |  |
|
||||
| 6 | **Background Menu Color** | Background color for menus. |  |
|
||||
| 7 | **Background Point Panel Color** | Background color for point/balance panels. |  |
|
||||
| 8 | **Background Bottom Bar Color** | Background color for the bottom bar (Portrait only). |  |
|
||||
| 9 | **Button Quit Color** | Color for the Quit button. |  |
|
||||
| 10 | **Button Cancel Color** | Color for the Cancel button. |  |
|
||||
| 11 | **Label Balance Normal Color** | Color for the balance label in normal state. |  |
|
||||
| 12 | **Label Balance Spin Color** | Color for the balance label during spins. |  |
|
||||
| 13 | **Button Plus/Minus Auto Color** | Color for Plus/Minus buttons in autoplay. |  |
|
||||
| 14 | **Label Start Auto Color** | Color for the Start Autoplay label. |  |
|
||||
| 15 | **Label Outline Notification** | Outline color and width for notifications. |  |
|
||||
| 16 | **Total Win Medium Win Color** | Color for medium win labels. |  |
|
||||
|
||||
**Tip**: Ensure color values align with the game’s visual design specifications.
|
||||
@ -1,48 +0,0 @@
|
||||
---
|
||||
sidebar_position: 12
|
||||
---
|
||||
|
||||
# Popup Panel
|
||||
|
||||
## Overview
|
||||
The **Popup Panel** is a temporary UI element that overlays the main game content to display additional information or user options, such as exit prompts or disconnection notices.
|
||||
|
||||
| Exit Popup | Disconnect Popup | Free Rounds Popup |
|
||||
|------------|------------------|--------------|
|
||||
|  |  |  |
|
||||
|
||||
## Multiple Popup Panel
|
||||
The **Multiple Popup Panel** is pre-integrated into the main scene via the `template-main-game` prefab, allowing multiple popups to be managed efficiently.
|
||||
|
||||
|
||||
|
||||
**Base Settings**:
|
||||
- **Prefab**: `hyper-multiple-popup.prefab`
|
||||
- **Path**: `assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab`
|
||||
- **Configuration**: Reference the prefab in the main scene to enable multiple popup layouts.
|
||||
- 
|
||||
|
||||
## Manual Popup Panel
|
||||
Manually configured popups allow for custom textures and layouts, tailored to the game’s design. Note that the **Exit Game** popup is exclusive to the Desktop platform.
|
||||
|
||||
**Setup Steps**:
|
||||
1. **Prepare Assets**:
|
||||
- **Path**: `assets/game-assets/textures/desktop/preloads/main-game/exit`
|
||||
- **Example**: 
|
||||
|
||||
2. **Configure Prefabs**:
|
||||
- Locate and clone the popup prefab to `assets/game-assets/prefabs`.
|
||||
- Structure the prefab as shown:
|
||||
- 
|
||||
|
||||
3. **Apply Textures**:
|
||||
- Manually drag and drop images onto the corresponding nodes in the editor.
|
||||
- 
|
||||
|
||||
4. **Preview Result**:
|
||||
- Verify the popup displays correctly in the game.
|
||||
- 
|
||||
|
||||
**Tip**:
|
||||
- Ensure textures align with the game’s color theme and design specifications.
|
||||
- Test the popup on Desktop to confirm functionality for the Exit Game feature.
|
||||
@ -1,117 +0,0 @@
|
||||
---
|
||||
sidebar_position: 13
|
||||
---
|
||||
|
||||
# Game Logo
|
||||
|
||||
## Overview
|
||||
The **Game Logo** is a key branding element displayed consistently across all platforms and orientations to reinforce the game’s identity.
|
||||
|
||||
| Platform | Orientation | Preview |
|
||||
|----------|-------------|---------|
|
||||
| Desktop | Standard |  |
|
||||
| Mobile | Landscape |  |
|
||||
| Mobile | Portrait |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
#### 1. Core Setup
|
||||
- **Location**: `assets/core-assets/hyper-core/packages/hyper-logo-animation`
|
||||
- **Script**: Initialize animation states for the logo.
|
||||
```typescript
|
||||
// File: assets/core-assets/hyper-core/packages/logo-animation/hyper-logo-animation.js
|
||||
onLoad: function () {
|
||||
const 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 Animation Provider**:
|
||||
- Register the logo animations in the Animation Provider.
|
||||
- 
|
||||
|
||||
2. **Set Up Animation States**:
|
||||
- Enable a static frame for the loading state in `anim-logo-play` and `anim-logo-idle`.
|
||||
- 
|
||||
- Configure continuous loop playback for animations.
|
||||
- 
|
||||
|
||||
### Setup
|
||||
|
||||
#### Desktop Configuration
|
||||
1. **Base Settings**:
|
||||
- Configure the logo node in the main scene.
|
||||
- 
|
||||
|
||||
2. **Node Setup**:
|
||||
- Add the `hyper-logo-animation` component to the logo node.
|
||||
- ```typescript
|
||||
Components: {
|
||||
animation: 'hyper-logo-animation',
|
||||
}
|
||||
```
|
||||
- 
|
||||
|
||||
**Tip**: Adjust position and size according to the game design specifications.
|
||||
|
||||
#### Mobile Configuration
|
||||
|
||||
##### Landscape Mode
|
||||
1. **Node Setup**:
|
||||
- Configure the logo node with the following components:
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `hyper-logo-animation` | Plays and manages the logo animation. |
|
||||
| `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
|
||||
| `landscape-logo-spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
|
||||
- 
|
||||
|
||||
##### Portrait Mode
|
||||
1. **Node Setup**:
|
||||
- Configure the logo node with the following components:
|
||||
| Component | Description |
|
||||
|-----------|-------------|
|
||||
| `hyper-logo-animation` | Plays and manages the logo animation. |
|
||||
| `node-position-by-jackpot` | Adjusts logo position based on jackpot display state. |
|
||||
| `spine-aspect-ratio-keeper` | Maintains consistent logo size (e.g., 1.0). |
|
||||
- 
|
||||
|
||||
2. **Position Settings**:
|
||||
- Adjust logo position based on jackpot state:
|
||||
| State | Position | Example |
|
||||
|-------|----------|---------|
|
||||
| Jackpot Active | Upper position |  |
|
||||
| Jackpot Inactive | Default position |  |
|
||||
|
||||
3. **Size Settings**:
|
||||
- Use the `spine-aspect-ratio-keeper` component to maintain logo proportions.
|
||||
- 
|
||||
- **Settings**:
|
||||
| Setting | Description | Default Value |
|
||||
|---------|-------------|---------------|
|
||||
| **Default Scale** | Initial scale factor for the node. | Configurable (e.g., 1.0) |
|
||||
| **Default Size** | Base width and height for scaling. | Configurable (e.g., 1050 x 1680) |
|
||||
|
||||
**Tip**:
|
||||
- Test the static logo display under slow network conditions to ensure fallback works.
|
||||
- Verify animation states (`play` and `idle`) for smooth transitions.
|
||||
- [See More Info](/docs/category/game-asset-structure)
|
||||
@ -1,61 +0,0 @@
|
||||
---
|
||||
sidebar_position: 15
|
||||
---
|
||||
|
||||
# Jackpot Panel
|
||||
|
||||
## Overview
|
||||
The **Jackpot Feature** offers multiple prize tiers, each with increasing value, providing players with frequent smaller wins and the chance for a large top prize. The panel is responsive, supporting both desktop and mobile layouts.
|
||||
|
||||
**Jackpot Tiers**:
|
||||
| Tier | Description | Preview |
|
||||
|------|-------------|---------|
|
||||
| Grand | The top prize, rare and often worth thousands or millions (progressive). |  |
|
||||
| Major | A significant prize, less frequent but substantial. |  |
|
||||
| Minor | A moderately valuable prize, relatively common. |  |
|
||||
| Mini | The smallest prize, easiest to win. |  |
|
||||
|
||||
**Platform Support**:
|
||||
| Orientation | Preview |
|
||||
|-------------|---------|
|
||||
| Desktop |  |
|
||||
| Mobile |  |
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
- **Prefab Location**:
|
||||
- Path: `assets/core-assets/jackpot-package/prefabs`
|
||||
- Example: 
|
||||
|
||||
### Setup
|
||||
|
||||
#### Jackpot Runner
|
||||
|
||||
##### Desktop
|
||||
1. **Add Node**:
|
||||
- Integrate the jackpot node into the main scene.
|
||||
- 
|
||||
|
||||
##### Mobile
|
||||
1. **Configure Node**:
|
||||
- Set up the jackpot node for both landscape and portrait orientations.
|
||||
- Use `UI Mobile Landscape Position` and `UI Mobile Portrait Position` components for responsiveness.
|
||||
- 
|
||||
|
||||
2. **Platform Node Spawner**:
|
||||
- Example: 
|
||||
|
||||
#### Result Panel
|
||||
- Ensure the jackpot panel displays correctly across all platforms and orientations.
|
||||
- 
|
||||
|
||||
**Tip**: Follow the game design layout for positioning and sizing.
|
||||
|
||||
## Game Result Examples
|
||||
| Win Tier | Example |
|
||||
|----------|---------|
|
||||
| Grand |  |
|
||||
| Major |  |
|
||||
| Minor |  |
|
||||
| Mini |  |
|
||||
@ -1,64 +0,0 @@
|
||||
---
|
||||
sidebar_position: 16
|
||||
---
|
||||
|
||||
# Idle Animation
|
||||
|
||||
## Overview
|
||||
The **Idle Animation** enhances the visual appeal of the game by animating slot symbols during idle states, providing a dynamic and engaging experience.
|
||||
|
||||
| Static Preview | Animated Preview |
|
||||
|--------|-------------|
|
||||
|  |  |
|
||||
|
||||
|
||||
## Prepare the assets
|
||||
|
||||
| Assets | Description |
|
||||
|--------|-------------|
|
||||
|  | Static sprite frame for the idle state. |
|
||||
|  | Animation assets for the idle animation. |
|
||||
|
||||
## Setup Idle Animation
|
||||
|
||||
### Configure Settings
|
||||
|
||||
Create a script to register the idle animation components with the dependency injection container.
|
||||
```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js"
|
||||
var BaseSlottySetting = p4fslot.require('slotty-setting');
|
||||
var DIContainer = p4fcore.require('di-container');
|
||||
|
||||
BaseSlottySetting.prototype._registerInjection = function () {
|
||||
DIContainer.Register('cellItemRender', require('idle-cell-item-render'));
|
||||
DIContainer.Register('idleAnimationHandler', require('idle-animation-handler'));
|
||||
};
|
||||
```
|
||||
|
||||
### Setup Animations
|
||||
1. Using hepler to generate animation using the prepared assets
|
||||
|
||||
|
||||
|
||||
|
||||
2. Configure Spine Animation
|
||||
- Set **Is Loop** ✅.
|
||||
- Setup the **Static Sprite Frame** using the prepared assets.
|
||||
|
||||
|
||||
### Configure Scene
|
||||
|
||||
1. **Locate Prefab**:
|
||||
- Search for the `idle-animation-panel` prefab.
|
||||
2. **Add to Scene**:
|
||||
- Drag the prefab into the main scene.
|
||||
3. **Generate Panel**:
|
||||
- Click **Generate Panel** to set up the animation panel.
|
||||
-
|
||||
|
||||
:::warning
|
||||
When using prefabs directly from `core-assets`, convert them to a **Regular Node** to avoid reference issues.
|
||||
|
||||
|
||||
:::
|
||||
|
||||
**Tip**: Test the idle animation in the game to ensure smooth playback and proper looping.
|
||||
@ -1,56 +0,0 @@
|
||||
---
|
||||
sidebar_position: 17
|
||||
title: Win Limit
|
||||
description: Display win limit popups during gameplay.
|
||||
---
|
||||
|
||||
# Win Limit
|
||||
|
||||
## Overview
|
||||
The **Win Limit** system displays popups when specific win conditions are met, enhancing player feedback and interaction.
|
||||
|
||||
- **Win Limit Popup**: Appears when a player’s win points reach a predefined threshold.
|
||||
|
||||
|
||||
- **Gamble Win Limit Popup**: Triggered during the gamble feature when the maximum number of gamble attempts (typically 5) is reached.
|
||||
|
||||
|
||||
|
||||
## Prepare Assets
|
||||
|
||||
#### Prefab Location
|
||||
| Path | Prefab Name |
|
||||
|------|-------------|
|
||||
| `assets/core-assets/hyper-core/packages/present/prefabs` | `present-win-limit-reached` |
|
||||
|
||||
#### Scene Hierarchy
|
||||
Place the prefab in the following scene structure:
|
||||
```
|
||||
Canvas
|
||||
└── [main-view]
|
||||
└── [game-view]
|
||||
└── [present-win-limit-reached]
|
||||
```
|
||||
- 
|
||||
|
||||
## Setup
|
||||
|
||||
#### Assets
|
||||
- Drag and drop the required images onto the corresponding nodes in the editor.
|
||||
- 
|
||||
|
||||
| Sprite | Node Name |
|
||||
|--------|-----------|
|
||||
| `you-won` | `you-won` |
|
||||
| `win-limit-reached` | `win-limit-reached` |
|
||||
| `gamble-limit-reached` | `gamble-limit-reached` |
|
||||
| `btn-normal` | `btn-continue` |
|
||||
| `text-continue` | `continue` |
|
||||
|
||||
#### Font
|
||||
- Use a custom font to match the win label style, aligning with the game’s theme.
|
||||
- 
|
||||
|
||||
**Tip**:
|
||||
- Follow the game design layout for asset placement and font styling.
|
||||
- Verify win limit configurations to ensure they match game-specific thresholds.
|
||||
@ -1,60 +0,0 @@
|
||||
---
|
||||
sidebar_position: 18
|
||||
---
|
||||
# Buy Feature
|
||||
|
||||
---
|
||||
|
||||
## Overview
|
||||
The **Buy Feature** allows players to purchase direct access to bonus rounds, enhancing gameplay engagement.
|
||||
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
| Assets | Description |
|
||||
| :----: |-------------|
|
||||
| <img width="300"/>| Static sprite frame for the buy feature panel. |
|
||||
| <img width="300"/> | Animation assets for the buy feature button and panel. |
|
||||
| <img width="300"/> | Label for displaying the cost of the buy feature. |
|
||||
| <img width="300"/> | - Search for the `template-shortcut-buy-feature-board` prefab.<br/> - Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes.|
|
||||
|
||||
### Setup Animations
|
||||
1. **Generate Animations**:
|
||||
- Use the helper tool to create animations from prepared assets.
|
||||
|
||||
|
||||
|
||||
|
||||
2. **Configure Spine Animation**:
|
||||
- Set **Is Loop** ✅ for `anim-button-open-buy-bonus-enable` and `anim-board-shortcut-buy-bonus-idle`.
|
||||
|
||||
|
||||
|
||||
### Setup Buy Feature Board Desktop
|
||||
|
||||
| Step | Action | Image Reference |
|
||||
| :--: | :----- | :-------------: |
|
||||
| 1 | - Setup the Title **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
||||
| 2 | - Setup the **Sprite Frame** in the `static-board` using the prepared assets. | <img width="1000"/> |
|
||||
| 3 | - Adjust **Font** in `lbl-cost-buy-feature` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
|
||||
| 4 | - Setup the 4 Buttons **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
||||
|
||||
### Setup Buy Feature Button Desktop
|
||||
|
||||
| Step | Action | Image Reference |
|
||||
| :--: | :----- | :-------------: |
|
||||
| 1 | - Setup the Text **Sprite Frame** using the prepared assets. | <img width="1000"/> |
|
||||
| 2 | 1. Drag the **skeketon** `anim-button-open-buy-bonus` into child of "content".<br/><br/>2. Click **Generate Attached Node**.<br/><br/>3. Move `node-container` to the `ATTACHED_NODE:number`.<br/><br/>4. Deleted **old** `anim-button-open-buy-bonus`. | <img width="1000"/> |
|
||||
| 3 | - Move **new** `anim-button-open-buy-bonus` into **Node Animation**.|  |
|
||||
| 4 | - Adjust **Font** in `lbl-cost-buy-feature` according to the game design.<br/> - Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.|  |
|
||||
|
||||
|
||||
### Configure Scene
|
||||
1. **Add Prefabs**:
|
||||
- Drag the `shortcut-buy-feature-panel`, `shortcut-buy-feature-board` into the **Scene** at this position.
|
||||
2. **Update Prefab**:
|
||||
- Update **Prefab** in the `shortcut-buy-feature-button`.
|
||||
|
||||
|
||||
@ -1,90 +0,0 @@
|
||||
---
|
||||
sidebar_position: 19
|
||||
title: Gamble
|
||||
description: Display Gamble
|
||||
---
|
||||
|
||||
# Gamble
|
||||
|
||||
## Overview
|
||||
|
||||
The **Gamble Feature** allows players to risk their winnings for a chance to double or multiply them, typically by guessing a card’s color. It is supported across desktop and mobile platforms in both landscape and portrait orientations.
|
||||
|
||||
| Device Type | Preview |
|
||||
|---------------|-----------------------------------------------------------------------------|
|
||||
| Desktop |  |
|
||||
| Landscape |  |
|
||||
| Portrait | <center></center>|
|
||||
|
||||
|
||||
## Implementation
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
#### Scene Hierarchy
|
||||
|
||||
Place the gamble node in the following scene structure:
|
||||
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th style={{ width: "500px" }}>Path</th>
|
||||
<th style={{ width: "500px" }}>Example</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
```
|
||||
Canvas
|
||||
└── [main-view]
|
||||
└── [game-view]
|
||||
└── [gamble-loader]
|
||||
```
|
||||
</td>
|
||||
<td><center></center></td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
---
|
||||
|
||||
### Setup
|
||||
|
||||
- In node component include:
|
||||
|
||||
|
||||
|
||||
#### Components
|
||||
|
||||
**`gamble-loader`**
|
||||
- A component for managing the loading and unloading of gambling scenes in a game.
|
||||
|
||||
| Property | Type | Description |
|
||||
|------------------|-----------|---------------------------------------------------------|
|
||||
| nodeBackground | cc.Node | Background node reference |
|
||||
| sceneGamble | String | Name of the gamble scene |
|
||||
| rootGambleName | String | Root node name for the gamble scene |
|
||||
|
||||
|
||||
**`gamble-panel-mobile-scaler`**
|
||||
|
||||
#### Backgrounds
|
||||
|
||||
|
||||
|
||||
1. Use background scenes for the gamble feature:
|
||||
- `gamble-background-landscape` : [Setup Background Landscape](/docs/setup-main-game/main-scene/background#setup-steps)
|
||||
|
||||
- `gamble-background-portrait` : [Setup Background Portrait](/docs/setup-main-game/main-scene/background#setup-steps)
|
||||
|
||||
2. Attach the `orientation-ui-controller` component to both `gamble-background-landscape` and `gamble-background-portrait` nodes.
|
||||
3. The `gamble-background-portrait` node has a dedicated component for portrait mode:
|
||||
|
||||
|
||||
|
||||
This component handles properties and logic specific to the portrait layout.
|
||||
|
||||
## Game Result Example
|
||||
|
||||
Make sure the main scene includes the Win Limit Panel.
|
||||
🔗 More Info [Game Result](/docs/setup-main-game/main-scene/win-limit#overview)
|
||||
@ -1,10 +0,0 @@
|
||||
{
|
||||
"position": 11,
|
||||
"label": "Main Scene",
|
||||
"collapsible": true,
|
||||
"collapsed": false,
|
||||
"link": {
|
||||
"type": "doc",
|
||||
"id": "main-scene-overview"
|
||||
}
|
||||
}
|
||||
Binary file not shown.
|
Before Width: | Height: | Size: 53 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 9.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 14 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 60 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 220 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 195 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 190 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 208 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 138 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 8.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 11 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 102 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 39 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 57 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 54 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 64 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 20 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 99 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 100 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 452 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 219 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 78 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.8 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 41 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 239 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 329 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 13 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 223 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 27 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 144 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 264 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 269 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 12 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.1 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.6 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 6.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.9 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.7 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 4.5 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 29 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 28 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.4 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 2.3 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 65 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 3.5 KiB |
Some files were not shown because too many files have changed in this diff Show More
Loading…
x
Reference in New Issue
Block a user