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,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
|
||||
```
|
||||
|
||||
## Internation 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**](../custom-cocos-engine/custom-cocos-engine.md)
|
||||
|
||||
**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,20 +0,0 @@
|
||||
---
|
||||
sidebar_position: 1
|
||||
---
|
||||
|
||||
# System
|
||||
---
|
||||
|
||||
## 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.
|
||||
|
||||
|
||||
@ -1,76 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Background
|
||||
|
||||
Is the visual scenery that appears behind the gameplay elements.
|
||||
|
||||
---
|
||||
|
||||
The background consists of 2 parts: **Landscape** and **Portrait**.
|
||||
|
||||
- **Landscape** use for Desktop and Mobile landscape.
|
||||
- **Portrait** only use for Mobile portrait.
|
||||
|
||||
| | Desktop | Mobile |
|
||||
|:-:|--------------|---------|
|
||||
|**Background Landscape**<br/>|<br/>|<br/>|
|
||||
|**Background Portrait**<br/>||<br/>|
|
||||
|
||||
### 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
|
||||
|
||||
We use sprite frame background for landscape from prepared assets.
|
||||
|
||||
|
||||
|
||||
### 3. Setup Background Portrait
|
||||
|
||||
We use sprite frame background for mobile from prepared assets.
|
||||
|
||||
|
||||
|
||||
### 4. Setup Background Animation
|
||||
|
||||
If the game have design animation for background, we will do this step.
|
||||
|
||||
**Setp 1:** Using hepler to generate animation from prepared assets
|
||||
|
||||
|
||||
|
||||
|
||||
**Setp 2:**. Stup for spine-animation
|
||||
- `Is Loop`: is ✅ because this animation will play through the game.
|
||||
- `Static Sprite Frame`: It will be displayed when the animation has not finished loading.
|
||||
|
||||
|
||||
|
||||
|
||||
**Setp 3:**. Add animation background with components below:
|
||||
|
||||
**Landscape:**
|
||||
- Create `Empty Node` with name `anim-background-main-game`.
|
||||
- Add `animation-play-on-enable` with animation name in **Animation Provider**.
|
||||
- Add `background-scaler`, used to resize according to screen resolution.
|
||||
|
||||
|
||||
|
||||
**Portrait:**
|
||||
|
||||
- Create `Empty Node` with name `mobile-background-anim-portrait`.
|
||||
- Add `mobile-portrait-background-ui-controller` to display only on **Mobile**.
|
||||
- Add `orientation-ui-controller` to display on Portrait with the options below.
|
||||
|
||||
|
||||
|
||||
- Create `Empty Node` with name `anim-background-main-game`.
|
||||
- Add `animation-play-on-enable` with animation name in **Animation Provider**.
|
||||
- Add `portrait-anim-background-scaler`, used to resize according to screen resolution.
|
||||
|
||||
|
||||
@ -1,50 +0,0 @@
|
||||
---
|
||||
sidebar_position: 2
|
||||
---
|
||||
|
||||
# Set Up Reel Slot
|
||||
---
|
||||
|
||||
### Prepare Assets
|
||||
|
||||
Add the symbol textures and reel frame:
|
||||
|
||||
|||
|
||||
|------------------------------------------------------------------|--------------------------------------------------------------|
|
||||
|
||||
### Add symbols to `SpriteFrameProvider`
|
||||
|
||||
This allows symbols to be accessed globally from code:
|
||||
|
||||
|
||||
|
||||
### Add Reel Frame
|
||||
|
||||
| | |
|
||||
|--------------------------------------------------------------------|--------------------------------------------------------------|
|
||||
|
||||
### Configure the Reel Slot
|
||||
|
||||
Use `reel-scroller-helper` to configure spinning behavior:
|
||||
|
||||
|
||||
|
||||
| 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.||
|
||||
|**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.||
|
||||
|
||||
### Generate Reel Panel
|
||||
|
||||
Use `reel-scroller-helper` to auto-generate the full panel:
|
||||
|
||||
|
||||
|
||||
:::tip
|
||||
A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components.
|
||||
:::
|
||||
@ -1,65 +0,0 @@
|
||||
---
|
||||
sidebar_position: 4
|
||||
---
|
||||
|
||||
# Set Up Spinning Panel
|
||||
|
||||
|
||||
## Overview
|
||||
|
||||
The **reel slot panel** is just one part of the overall **spinning panel** system.
|
||||
|
||||
Other required panels include:
|
||||
|
||||
- `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
|
||||
|
||||
- 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'));
|
||||
};
|
||||
```
|
||||
:::
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
sidebar_position: 5
|
||||
---
|
||||
|
||||
# Prensent Win
|
||||
|
||||
> To be added
|
||||
|
||||
---
|
||||
|
||||
> To be added
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
sidebar_position: 6
|
||||
---
|
||||
|
||||
# Special Win
|
||||
|
||||
Is a game mechanic that allows players to earn significantly higher rewards than usual, typically triggered by rare or specific conditions during gameplay.
|
||||
|
||||
---
|
||||
|
||||
> To be added
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
sidebar_position: 7
|
||||
---
|
||||
|
||||
# Item Description
|
||||
|
||||
> To be Add
|
||||
|
||||
---
|
||||
|
||||
> To be Add
|
||||
@ -1,11 +0,0 @@
|
||||
---
|
||||
sidebar_position: 8
|
||||
---
|
||||
|
||||
# Free Round
|
||||
|
||||
> To be added
|
||||
|
||||
---
|
||||
|
||||
> To be added
|
||||
@ -1,31 +0,0 @@
|
||||
---
|
||||
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,99 +0,0 @@
|
||||
---
|
||||
sidebar_position: 10
|
||||
---
|
||||
# Bottom Bar UI (Desktop)
|
||||
|
||||
### Overview
|
||||
- Full bottom bar with all controls visible
|
||||
- Horizontal layout maximizing screen width
|
||||
|
||||
|
||||
|
||||
### Step 1: Set Up Prefab Editor
|
||||
|
||||
| Step | Action | image |
|
||||
|------|---------|--------------|
|
||||
| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab |  |
|
||||
| 2. Find Assets | Navigate to `core/editor` directory |  |
|
||||
| 3. Clone Assets | Copy / Paste to game assets location |  |
|
||||
|
||||
---
|
||||
|
||||
### Step 2: Configure Prefabs
|
||||
|
||||
#### Core Prefabs Structure
|
||||
Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\`
|
||||
|
||||
|
||||
#### Rename Prefabs
|
||||
Rename the copied prefabs by removing unnecessary prefixes:
|
||||
| Prefix to Remove | Original Prefab Name | Final Name |
|
||||
|------------------|----------------------|------------|
|
||||
| `template-new-` | `template-new-ui-bottom-bar-panel` | `ui-bottom-bar-panel` |
|
||||
| `template-` | `template-button-auto-selection` | `button-auto-selection` |
|
||||
|
||||
|
||||
```jsx title="The folder structure is as follows:"
|
||||
assets\game-assets\prefabs
|
||||
```
|
||||
|
||||
|
||||
|
||||
|
||||
#### Customize *`button-auto-selection`* Label
|
||||
|
||||
**Follow Design:**
|
||||
Use the `template-label-auto-selection` to customize the appearance of the label inside the `button-auto-selection` prefab.
|
||||
|
||||
| Component | Description |
|
||||
| -------------------- | ------------------------------------------------- |
|
||||
| **Label Outline** | Add an outline to make the text stand out. |
|
||||
| **Label Shadow** | Add a shadow for better contrast and readability. |
|
||||
| -------------------- | ------------------------------------------------- |
|
||||
|
||||
|
||||
|
||||
#### Customize *`ui-bottom-bar-panel`* Label
|
||||
Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`:
|
||||
:::info
|
||||
🔗[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)
|
||||
Bottom bar labels include a localization component for multi-language support
|
||||
:::
|
||||
|
||||
|
||||
|
||||
The `FormatText` property controls text formatting behavior for label components:
|
||||
|
||||
| Property | Description | Example |
|
||||
|----------|-------------|---------|
|
||||
| `default` | Initial formatting state | `false` |
|
||||
| `notify` | Formatting update callback | Updates when value changes |
|
||||
|
||||
---
|
||||
|
||||
### Step 3: Set Up UI In Main Scenes
|
||||
|
||||
Create new node and configuration in your main scene:
|
||||
|
||||
|
||||
#### Platform Node Spawner Settings
|
||||
|
||||
🔗 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
|
||||
🔗 Details: [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
||||
:::
|
||||
|
||||
|
||||
#### Run the Helper Tool
|
||||
|
||||
To configure the bottom bar UI helper.
|
||||
:::info
|
||||
🔗Details: [UI Bottom Bar Desktop Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
:::
|
||||
|
||||
---
|
||||
@ -1,106 +0,0 @@
|
||||
---
|
||||
sidebar_position: 11
|
||||
---
|
||||
# Mobile UI Panel
|
||||
|
||||
### Overview
|
||||
The mobile interface adapts to both landscape and portrait orientations:
|
||||
|
||||
| Orientation | Preview |
|
||||
|-------------|----------|
|
||||
| Landscape |  |
|
||||
| Portrait | 
|
||||
|
||||
|
||||
### Step 1: Set Up Prefabs
|
||||
|
||||
| Step | Action | Description | Image Reference |
|
||||
| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- |
|
||||
| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab |  |
|
||||
| 2 | Clone Assets | Copy the required assets |  |
|
||||
| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - |
|
||||
| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab |  |
|
||||
| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - |
|
||||
|
||||
|
||||
:::tip File Structure
|
||||
Maintain this directory structure for proper prefab references:
|
||||
```
|
||||
assets/
|
||||
└── game-assets/
|
||||
└── prefabs/
|
||||
└── mobile/
|
||||
├── Exp: mobile-ui.prefab
|
||||
└── Exp: buy-feature.prefab
|
||||
```
|
||||
:::
|
||||
|
||||
### Step 2: Rename Prefabs
|
||||
|
||||
Rename the copied prefabs by removing unnecessary prefixes:
|
||||
| Prefix to Remove | Final Name |
|
||||
|------------------|----------------------|
|
||||
| `template-` | |
|
||||
|
||||
### Step 3: Configure UI in Main Scenes
|
||||
|
||||
Create new node and configuration in your main scene:
|
||||
|
||||
|
||||
#### Platform Node Spawner Settings
|
||||
|
||||
🔗 Details: [Platform Node Spawner](http://localhost:3000/docs/faqs/setup-cocos-scene#platform-node-spawner)
|
||||
|
||||
### Step 4: Apply Textures
|
||||
|
||||
#### Texture Mobile UI
|
||||
|
||||
Checklist assets completed for Mobile UI
|
||||
|
||||
:::info
|
||||
🔗Details [Game Asset Structure](http://localhost:3000/docs/category/game-asset-structure)
|
||||
:::
|
||||
|
||||
|
||||
#### Run the Helper Tool
|
||||
|
||||
To configure the mobile UI helper.
|
||||
:::info
|
||||
🔗Details: [Mobile Ui Helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper)
|
||||
:::
|
||||
|
||||
|
||||
|
||||
### Step 5: Set Color Theme for Mobile Menu UI
|
||||
|
||||
#### Follow Design:
|
||||
|
||||
| |  |
|
||||
|---------|-------|
|
||||
|
||||
#### Overview
|
||||
The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface.
|
||||
|
||||
|
||||
|
||||
|Ordinal number| Properties | Explaination | Example |
|
||||
|--------------|-------------------------------------|--------------------------------------------|--------------------------------------------------------------------------------------------------|
|
||||
|0 |**paintColor** |Trigger to repaint UI components | |
|
||||
|1 | **Main Ui Normal Color** |Default color of UI elements |  |
|
||||
|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements |  |
|
||||
|3 | **Toggle State Off Color** | Color of toggle when off |  |
|
||||
|4 | **Toggle State On Color** | Color of toggle when on |  |
|
||||
|5 | **Background Info Page Color** | Info screen background |  |
|
||||
|6 | **Background Menu Color** | Menu background color |  |
|
||||
|7 | **Background Point Panel Color** | Background panel for point/balance UI | |
|
||||
|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) |  |
|
||||
|9 | **Button Quit Color** | Quit button color |  |
|
||||
|10 | **Button Cancel Color** | Cancel button color |  |
|
||||
|11 | **Label Balance Normal Color** | Normal balance label color |  |
|
||||
|12 | **Label Balance Spin Color** | During-spin label color |  |
|
||||
|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | |
|
||||
|14 | **Label Start Auto Color** | Start autoplay label |  |
|
||||
|15 | **Label Outline Notification** | Outline color + width config | |
|
||||
|16 | **Total Win Medium Win Color** | Color for label medium win |  |
|
||||
|
||||
---
|
||||
@ -1,62 +0,0 @@
|
||||
---
|
||||
sidebar_position: 12
|
||||
---
|
||||
|
||||
|
||||
# Popup Panel
|
||||
|
||||
### Overview
|
||||
|
||||
A popup is a temporary UI element that overlays the main content to provide additional information or options to the user.
|
||||
|
||||
||||
|
||||
|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------|
|
||||
|
||||
|
||||
## Multiple Popup Panel
|
||||
The popup panel is already integrated into the main scenes `template-main-game`.
|
||||
|
||||
|
||||
|
||||
Detail configuring:
|
||||
|
||||
#### Base Setting
|
||||
|
||||
:::info
|
||||
|
||||
|
||||
To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core:
|
||||
|
||||
**Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab*
|
||||
:::
|
||||
|
||||
## Manual Popup Panel
|
||||
|
||||
:::info
|
||||
- This popup is self-configured using shared textures and layout structure.
|
||||
- The color theme and style may vary depending on the game design.
|
||||
- Note: **Exit Game** Popup only in **Desktop**.
|
||||
:::
|
||||
|
||||
#### Pack Assets
|
||||
|
||||
- *Prepare asset to pack*.
|
||||
|
||||
🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure)
|
||||
|
||||
| Path | Example |
|
||||
|---------------------------------|-----------------------------------------------------|
|
||||
|`assets\game-assets\textures\desktop\preloads\main-game\exit`||
|
||||
|
||||
- Structure prefabs:
|
||||
|
||||
|
||||
|
||||
- Manually drag and drop the image onto the node:
|
||||
|
||||
|
||||
|
||||
**Preview Result**:
|
||||
|
||||
|
||||
---
|
||||
@ -1,128 +0,0 @@
|
||||
---
|
||||
sidebar_position: 13
|
||||
---
|
||||
|
||||
# Game Logo
|
||||
|
||||
### Overview
|
||||
The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations.
|
||||
|
||||
| Platform | Orientation | Preview |
|
||||
|----------|------------|----------|
|
||||
| Desktop | Standard |  |
|
||||
| Mobile | Landscape |  |
|
||||
| Mobile | Portrait |  |
|
||||
|
||||
### Logo Settings
|
||||
|
||||
#### 1. Core Setup
|
||||
Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation`
|
||||
|
||||
```typescript
|
||||
// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js
|
||||
onLoad: function () {
|
||||
var self = this;
|
||||
// Initialize animation states
|
||||
self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play');
|
||||
self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle');
|
||||
}
|
||||
```
|
||||
|
||||
#### 2. Required Assets
|
||||
|
||||
##### Static Assets
|
||||
| Platform | Location | Preview |
|
||||
|----------|----------|---------|
|
||||
| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` |  |
|
||||
| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` |  |
|
||||
|
||||
##### Animation Assets
|
||||
| Platform | Location | Preview |
|
||||
|----------|----------|---------|
|
||||
| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` |  |
|
||||
| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` |  |
|
||||
|
||||
#### 3. Animation Settings
|
||||
1. Configure Provider
|
||||
|
||||
|
||||
|
||||
2. Setup States
|
||||
|
||||
- In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state:
|
||||
|
||||
|
||||
|
||||
- Configure continuous loop playback:
|
||||
|
||||
|
||||
|
||||
### Platform-Specific Setup
|
||||
|
||||
#### Desktop Configuration
|
||||
|
||||
1. Base Settings
|
||||
|
||||
|
||||
|
||||
🔗 Details: [Platform UI Controller](http://localhost:3000/docs/faqs/setup-cocos-scene#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.
|
||||
:::
|
||||
@ -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 |
Binary file not shown.
|
Before Width: | Height: | Size: 16 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.2 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 23 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 5.0 KiB |
Binary file not shown.
|
Before Width: | Height: | Size: 17 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