diff --git a/docs/01-setup-the-project/02-add-submodules.md b/docs/01-setup-the-project/02-add-submodules.md index 0ed4690..0c76f71 100644 --- a/docs/01-setup-the-project/02-add-submodules.md +++ b/docs/01-setup-the-project/02-add-submodules.md @@ -32,7 +32,7 @@ Then run the follwing command: git submodule add -f ../hyper-editor-package.git packages ``` -## Internation Theme vs Chinese Theme +## International Theme vs Chinese Theme Depend on the theme of your game, add these commands: diff --git a/docs/02-setup-main-game/05-main-scene/01-system.md b/docs/02-setup-main-game/05-main-scene/01-system.md index 97bb9f5..52d82a4 100644 --- a/docs/02-setup-main-game/05-main-scene/01-system.md +++ b/docs/02-setup-main-game/05-main-scene/01-system.md @@ -2,19 +2,25 @@ sidebar_position: 1 --- -# System ---- +# System Setup -## Sprite Frame Provider Setup +## Overview +The **System** module provides global access to sprite frames and animation assets, enabling efficient resource management across the game. -**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase. +## Sprite Frame Provider +The **SpriteFrameProvider** allows global access to sprite frames from anywhere in the codebase. ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider.png) ---- +**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 Setup +## Animation Provider +The **Animation Provider** manages and exposes game-related animation assets globally. -The **Animation Provider** manages and exposes all game-related **animation assets** globally. +![Animation Provider](../img/05-main-scene/animation-provider.png) -![Aniamtion Provider](../img/05-main-scene/animation-provider.png) \ No newline at end of file +**Setup Steps:** +1. Register animation assets in the **Animation Provider**. +2. Verify that animations are correctly linked to their respective prefabs. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/02-background.md b/docs/02-setup-main-game/05-main-scene/02-background.md index eaf7c65..7a3416b 100644 --- a/docs/02-setup-main-game/05-main-scene/02-background.md +++ b/docs/02-setup-main-game/05-main-scene/02-background.md @@ -2,76 +2,50 @@ sidebar_position: 2 --- -# Background +# Background Setup -Is the visual scenery that appears behind the gameplay elements. - ---- ## Overview +The background serves as the visual scenery behind gameplay elements, supporting both **Landscape** (Desktop and Mobile) and **Portrait** (Mobile only) orientations. -The background consists of 2 parts: **Landscape** and **Portrait**. +| Orientation | Desktop | Mobile | +|-------------|---------|--------| +| **Landscape** | ![Background Landscape](./img/02-background/bg-overview-landscape-1.png) | ![Background Landscape](./img/02-background/bg-overview-landscape-2.png) | +| **Portrait** | ![Background Portrait](./img/02-background/bg-overview-portrait-2.png) | ![Background Portrait](./img/02-background/bg-overview-portrait-1.png) | -- **Landscape** use for Desktop and Mobile landscape. -- **Portrait** only use for Mobile portrait. +## Asset Preparation +| Type | Assets | Description | +|------|--------|-------------| +| **Static** | ![Static Background](./img/02-background/bg-prepare-assets-static.png) | Required for all games. | +| **Animation** | ![Animated Background](./img/02-background/bg-prepare-assets-anim.png) | Optional, depending on game design. | -| | Desktop | Mobile | -|:-:|--------------|---------| -|**Background Landscape**
![Background Overview Landscape](./img/02-background/bg-overview-landscape-3.png)|
![Background Overview Landscape](./img/02-background/bg-overview-landscape-1.png)|
![Background Overview Landscape](./img/02-background/bg-overview-landscape-2.png)| -|**Background Portrait**
![Background Overview Portrait](./img/02-background/bg-overview-portrait-2.png)||
![Background Overview Portrait](./img/02-background/bg-overview-portrait-1.png)| +## Setup Steps +1. **Landscape Background**: + - Use the prepared sprite frame for the landscape background. + - ![Landscape Setup](./img/02-background/bg-setup-landscape.png) -## 1. Prepare the assets -| | Assets | Description | -|:-:|--------------|---------| -|**Static**
|![Background Prepare Landscape](./img/02-background/bg-prepare-assets-static.png)|Static background is necessary for the game| -|**Animation**
|![Background Prepare Portrait](./img/02-background/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design| +2. **Portrait Background**: + - Use the prepared sprite frame for the mobile portrait background. + - ![Portrait Setup](./img/02-background/bg-setup-portrait.png) -## 2. Setup Background Landscape - - We use sprite frame background for landscape from prepared assets. - - ![Background Setup Landscape](./img/02-background/bg-setup-landscape.png) - -## 3. Setup Background Portrait - - We use sprite frame background for mobile from prepared assets. - - ![Background Setup Portrait](./img/02-background/bg-setup-portrait.png) - -## 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 - - ![Background Setup Helper Anim](./img/02-background/bg-setup-hepler-anim.png) - ![Background Setup Helper Anim](./img/02-background/bg-setup-anim-provider.png) - -**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. - - ![Background Setup Animation](./img/02-background/bg-setup-anim-1.png) - ![Background Setup Animation](./img/02-background/bg-setup-anim-2.png) - -**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. - - ![Background Setup Anim Landscape](./img/02-background/bg-setup-anim-landscape.png) - - **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. - - ![Background Setup Anim Portrait](./img/02-background/bg-setup-anim-portrait-1.png) - - - 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. - - ![Background Setup Anim Portrait](./img/02-background/bg-setup-anim-portrait-2.png) \ No newline at end of file +3. **Animated Background** (if applicable): + - **Step 1**: Use the helper tool to generate animations from prepared assets. + - ![Helper Animation](./img/02-background/bg-setup-hepler-anim.png) + - ![Animation Provider](./img/02-background/bg-setup-anim-provider.png) + - **Step 2**: Configure spine animation settings: + - Enable **Is Loop** to ensure continuous playback. + - Set a **Static Sprite Frame** for display before the animation loads. + - ![Animation Setup 1](./img/02-background/bg-setup-anim-1.png) + - ![Animation Setup 2](./img/02-background/bg-setup-anim-2.png) + - **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. + - ![Landscape Animation](./img/02-background/bg-setup-anim-landscape.png) + - **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. + - ![Portrait Animation 1](./img/02-background/bg-setup-anim-portrait-1.png) + - ![Portrait Animation 2](./img/02-background/bg-setup-anim-portrait-2.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md index dce226d..6caea1c 100644 --- a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md +++ b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md @@ -1,50 +1,43 @@ --- -sidebar_position: 2 +sidebar_position: 3 --- -# Set Up Reel Slot ---- +# Reel Slot Setup -### Prepare Assets - - Add the symbol textures and reel frame: +## Overview +The reel slot system manages the core spinning mechanics of the game. - |![Add Symbol Texture](../img/05-main-scene/add-symbol-texture.png)|![Add Symbol Texture](../img/05-main-scene/add-reel-frame.png)| - |------------------------------------------------------------------|--------------------------------------------------------------| +## Asset Preparation +- Add symbol textures and reel frames: + - ![Symbol Texture](../img/05-main-scene/add-symbol-texture.png) + - ![Reel Frame](../img/05-main-scene/add-reel-frame.png) -### Add symbols to `SpriteFrameProvider` +## Sprite Frame Provider +- Add symbols to the **SpriteFrameProvider** for global access. + - ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider-reel-slot.png) - This allows symbols to be accessed globally from code: +## Reel Frame +- Configure the reel frame: + - ![Reel Frame 1](../img/05-main-scene/add-reel-frame-2.png) + - ![Reel Frame 2](../img/05-main-scene/reel-frame.png) - ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider-reel-slot.png) +## Configuration +Use the `reel-scroller-helper` to set up spinning behavior: -### Add Reel Frame +![Reel Scroller Helper](../img/05-main-scene/reel-scroller-helper.png) - |![Sprite Frame Provider](../img/05-main-scene/add-reel-frame-2.png) |![Sprite Frame Provider](../img/05-main-scene/reel-frame.png) | - |--------------------------------------------------------------------|--------------------------------------------------------------| +| Property | Description | Example | +|----------|-------------|---------| +| **Cell Item Script Name** | Script attached to each cell item. | ![Cell Item Script](../img/05-main-scene/hyper-cell-item.png) | +| **Scroller Script Name** | Script handling spinning logic. | ![Scroller Script](../img/05-main-scene/scroller.png) | +| **Row Count x Reel Count** | Number of slot items per row and column. | ![Reel Row Column](../img/05-main-scene/reel-row-column.png) | +| **Cell Size** | Size of each cell. | ![Cell Size](../img/05-main-scene/cell-size.png) | +| **Cell Spacing** | Horizontal and vertical distance between cells. | - | +| **Cell Dim Color** | Dark color for non-winning cells during win animations. | ![Dim Cell Color](../img/05-main-scene/dim-cell-color.png) | +| **Top Count and Bot Count** | Additional cells at the top and bottom for spinning logic. | ![Cell Top Bottom](../img/05-main-scene/cell-top-bottom.png) | -### Configure the Reel Slot +## Generate Reel Panel +- Use the `reel-scroller-helper` to auto-generate the reel panel. + - ![Generate Panel](../img/05-main-scene/generate-panel.png) -Use `reel-scroller-helper` to configure spinning behavior: - - ![Reel Scroller Helper](../img/05-main-scene/reel-scroller-helper.png) - - | Properties | Description | Example | - |------------|--------------|---------| - |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](../img/05-main-scene/hyper-cell-item.png)| - | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](../img/05-main-scene/scroller.png)| - |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.|![reel-row-column](../img/05-main-scene/reel-row-column.png)| - |**Cell Size**| the size of each cells.|![cell-size](../img/05-main-scene/cell-size.png)| - |**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.|![dim-cell-color](../img/05-main-scene/dim-cell-color.png)| - |**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.|![cell-top-bottom](../img/05-main-scene/cell-top-bottom.png)| - -### Generate Reel Panel - - Use `reel-scroller-helper` to auto-generate the full panel: - - ![Generate Panel](../img/05-main-scene/generate-panel.png) - -:::tip -A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components. -::: +**Tip**: Temporarily disable any popups covering the scene to view and edit reel slot components clearly. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md index 8ac0d05..81a96ac 100644 --- a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md +++ b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md @@ -2,64 +2,36 @@ sidebar_position: 4 --- -# Set Up Spinning Panel - +# 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`. -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: - - ![Landing Panel](../img/05-main-scene/landing-panel.png) - -To define Landing Panel, create the following script: - -:::warning - ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" +## Panel Setup +- **Landing Panel**: + - ![Landing Panel](../img/05-main-scene/landing-panel.png) + - **Script**: + ```jsx SlottySetting.prototype._registerInjection = function () { DIContainer.Register('landingGenerator', require('landing-generator')); }; ``` -::: -- Present Win Cell Panel: +- **Present Win Cell Panel**: + - ![Present Win Cell Panel](../img/05-main-scene/present-win-cell-panel.png) - ![Present Win Cell Panel](../img/05-main-scene/present-win-cell-panel.png) +- **Present Win Border Panel**: + - ![Present Win Border Panel](../img/05-main-scene/present-win-border-panel.png) -- Present Win Cell Panel: - - ![Present Win Border Panel](../img/05-main-scene/present-win-border-panel.png) - -- Tension Panel: - - ![Tension Panel](../img/05-main-scene/tension-panel.png) - - If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size. - - ![Tension Size Custom](../img/05-main-scene/tension-panel-custom.png) - - **check toggle General Panel** - - ![Tension Size Custom](../img/05-main-scene/note-bug-tension.png) - To define Tension Panel, create the following script: - :::warning - ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" +- **Tension Panel**: + - ![Tension Panel](../img/05-main-scene/tension-panel.png) + - For custom size frames, set **sizeMode** to **Custom** and configure the static frame and size. + - ![Tension Custom Size](../img/05-main-scene/tension-panel-custom.png) + - **Check Toggle**: Ensure the general panel toggle is correctly set. + - ![Toggle Note](../img/05-main-scene/note-bug-tension.png) + - **Script**: + ```jsx SlottySetting.prototype._registerInjection = function () { DIContainer.Register('tensionGenerator', require('tension-generator')); }; - ``` - ::: + ``` \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md b/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md index f925a48..e70ef16 100644 --- a/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md +++ b/docs/02-setup-main-game/05-main-scene/05-win-point-on-reel.md @@ -5,139 +5,43 @@ sidebar_position: 5 # Win Point on Reel ## Overview +The **Win Point on Reel** system displays win points for each payline, including scatter wins. -- Displays win points for each payline, including scatter wins. +![Win Point Overview](../img/05-main-scene/win-point-on-reel/win-point-overview.png) -![Overview](../img/05-main-scene/win-point-on-reel/win-point-overview.png) +## Asset Preparation +- **Core Assets**: + - Path: `assets/core-assets/hyper-core/packages/on-reel-present-win-point/prefab` + - ![Core Prefab](../img/05-main-scene/win-point-on-reel/win-point-core.png) -## Implementation +- **Game Assets**: + - Path: `assets/game-assets/prefabs` + - ![Game Prefab](../img/05-main-scene/win-point-on-reel/prefab-on-reel-in-game.png) -### Prepare Assets +## Setup +1. **Add Prefab to Scene**: + - Add the `on-reel-present-win-point` prefab to the main scene. + - Components: + - `on-reel-present-win-point`: Controls visibility of win points. + - `hyper-present-win-point`: Manages presentation flow. + - ![Win Point Component](../img/05-main-scene/win-point-on-reel/win-point-component.png) -#### In Core +2. **Configure Node Targets**: + - Set the target node for win point labels and define size/offset. + - ![Node Target Component](../img/05-main-scene/win-point-on-reel/win-point-node-target-component.png) + - Properties: + | Property | Type | Description | + |----------|------|-------------| + | `labelPosition` | `cc.Vec2` | Offset position for the win point label. | + | `nodeTarget` | `cc.Node` | Target node containing the label. | + | `cellItemSize` | `cc.Vec2` | Size of each slot cell. | + | `defaultFontSize` | `number` | Default font size for the label. | - - - - - - - - - - - - - -
PathExample
assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab
![Core Prefab](../img/05-main-scene/win-point-on-reel/win-point-core.png)
+3. **Set Up Label Component**: + - Displays win values with support for formatted text (number, currency). + - Add a custom font: + - Path: `assets/game-assets/fonts/preloads/main-game/fnt-win-point-on-reel` + - ![Font Setup](../img/05-main-scene/win-point-on-reel/add-font.png) + - ![Label Component](../img/05-main-scene/win-point-on-reel/win-point-label-component.png) -#### In Game - - - - - - - - - - - - - - -
PathExample
assets\game-assets\prefabs
![Copied Prefab](../img/05-main-scene/win-point-on-reel/prefab-on-reel-in-game.png)
- -### Setup - -#### Steps 1: Add Prefab to Scene - -Add the win point on reel prefab to your main scene. - - - - - - - - - - - - - - - - - - -
ComponentDescription
on-reel-present-win-pointA component to **show/hide** points on reels
hyper-present-win-pointManages win point presentation flow
- - ![Overview](../img/05-main-scene/win-point-on-reel/win-point-component.png) - -#### Steps 2: Configure Node Targets -Set the target node where each win point label appears and define its size and offset. - - ![Overview](../img/05-main-scene/win-point-on-reel/win-point-node-target-component.png) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
PropertyTypeDescription
labelPositioncc.Vec2Offset position for the win point label
nodeTargetcc.NodeTarget node containing the label
cellItemSizecc.Vec2Size of each slot cell
defaultFontSizenumberDefault font size for the label
- -#### Steps 3: Set Up Label Component - - -![Overview](../img/05-main-scene/win-point-on-reel/win-point-label-component.png) - -- **Component**: - - Displays win values on the reels. - - Supports formatted text (number, currency). - -- **Custom Font**: - Add a custom font to style the win label. - - - - - - - - - - - - - -
PathExample
assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel
![Overview](../img/05-main-scene/win-point-on-reel/add-font.png)
- -:::tip - - **Position And Size**: Follow Game Design. -::: \ No newline at end of file +**Tip**: Follow game design specifications for position and size. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/06-special-win.md b/docs/02-setup-main-game/05-main-scene/06-special-win.md index 49107af..80c5096 100644 --- a/docs/02-setup-main-game/05-main-scene/06-special-win.md +++ b/docs/02-setup-main-game/05-main-scene/06-special-win.md @@ -2,169 +2,91 @@ sidebar_position: 6 --- -# Special Win - ---- +# Special Win System ## Overview +Special Wins are high-value reward events categorized by payout thresholds: -Special Wins are high-value reward events in slot games, cagegorized based on the payout threshold: - -| Win Type | Trigger Threshold | Preview | -|-----------|-----------------------|----------------| -| **Big Win** | Medium payout | ![Big](../img/05-main-scene/special-win-big.png) | -| **Super Win** | High payout | ![Super](../img/05-main-scene/special-win-super.png) | -| **Mega Win** | Maximum payout | ![Mega](../img/05-main-scene/special-win-mega.png) | - -Each type delivers increasing visual excitement to highlight significant player rewards. - ---- +| Win Type | Trigger Threshold | Preview | +|----------|-------------------|---------| +| **Big Win** | Medium payout | ![Big Win](../img/05-main-scene/special-win-big.png) | +| **Super Win** | High payout | ![Super Win](../img/05-main-scene/special-win-super.png) | +| **Mega Win** | Maximum payout | ![Mega Win](../img/05-main-scene/special-win-mega.png) | ## 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. | + - ![Component Architecture](../img/05-main-scene/special-win-in-game.png) -### Prepare Assets +- **Coin Effect System**: + - Variants for different markets: + | Submodule | Theme | Preview | + |-----------|-------|---------| + | `hyper-coin-shower-international` | International | ![International Coin](../img/05-main-scene/special-win-coin-international.png) | + | `hyper-coin-shower-chinese` | Chinese | ![Chinese Coin](../img/05-main-scene/special-win-coin-chinese.png) | -The special win system consists of three main components: +- **Static Assets**: + | Platform | Path | Preview | + |----------|------|---------| + | Desktop | `assets/textures/desktop/preloads/special-wins` | ![Desktop Assets](../img/05-main-scene/special-win-folder-desktop.png) | + | Mobile | `assets/textures/mobile/preloads/special-wins` | ![Mobile Assets](../img/05-main-scene/special-win-folder-mobile.png) | -| Component | Purpose | -|-----------|---------| -| `hyper-special-win-initializer` | Handles system initialization and setup | -| `hyper-present-special-win` | Manages animation sequences and display logic | -| `hyper-special-win-label-point-effect` | Controls win amount visualization | +### Animation Setup +1. **Animation Resources**: + - Path: + | Platform | Path | Preview | + |----------|------|---------| + | Desktop | `assets/textures/desktop/postloads/anim-special-win` | ![Desktop Animation](../img/05-main-scene/special-win-folder-desktop-anim.png) | + | Mobile | `assets/textures/mobile/postloads/anim-special-win` | ![Mobile Animation](../img/05-main-scene/special-win-folder-mobile-anim.png) | -![Component Architecture](../img/05-main-scene/special-win-in-game.png) +2. **Animation Flow**: + ```mermaid + graph TD + SW[Special Wins] --> BW[Big Win] + SW --> SPW[Super Win] + SW --> MW[Mega Win] -#### Coin Effect System + 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] -The coin shower effect uses prefab variants for different markets: + classDef inStage fill:#e6f3ff,stroke:#666 + classDef loopStage fill:#fff2cc,stroke:#666 + classDef outStage fill:#f8cecc,stroke:#666 + classDef winType fill:#d5e8d4,stroke:#82b366 + classDef specialWin fill:#fff4dd,stroke:#ff0000 -![Base Coin Asset](../img/05-main-scene/special-win-coin.png) + 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 + ``` + - ![Type Names](../img/05-main-scene/special-win-type-name.png) -| Submodule | Theme | Preview | -|-------------|---------------|---------------| -| `hyper-coin-shower-international` | International | ![International Version](../img/05-main-scene/special-win-coin-internation.png) | -| `hyper-coin-shower-chinese` | Chinese | ![Chinese Version](../img/05-main-scene/special-win-coin-chinese.png) | +3. **Animation Settings**: + - Configure static fallback and loop animations: + | Setting | Example | + |---------|---------| + | Static Fallback | ![Static Fallback](../img/05-main-scene/special-win-static.png) | + | Loop Animation | ![Loop Animation](../img/05-main-scene/special-win-loop.png) | -:::tip -- Position the Special Win node as per game design -::: +4. **Font Configuration**: + - Path: `assets/game-assets/fonts/preloads/main-game/fnt-special-win` + - Steps: + 1. Import font files. + - ![Font Packaging](../img/05-main-scene/special-win-pack-font.png) + 2. Add font to the special win component. + - ![Font Integration](../img/05-main-scene/special-win-font.png) + 3. Configure text alignment, font size, and spacing. + - ![Font Layout](../img/05-main-scene/special-win-font-align.png) ---- - -### Setup - -#### 1. Static Resources - -Store static assets in platform-specific directories: - -| Platform | Path | Preview | -|----------|------|---------| -| Desktop | `assets/textures/desktop/preloads/special-wins` | ![Desktop](../img/05-main-scene/special-win-folder-desktop.png) | -| Mobile | `assets/textures/mobile/preloads/special-wins` | ![Mobile](../img/05-main-scene/special-win-folder-mobile.png) | - -🔗 [View Platform Asset Structure](/docs/cagegory/game-asset-structure) - ---- - -#### 2. Animation Setup - -##### Special Win Animation Flow - -```mermaid -%%{init: {'theme': 'base', 'themeVariables': { 'fontSize': '25px', 'fontFamily': 'arial' }}}%% -graph TD - %% Win Types with Thresholds - SW[Special Wins] --> BW["Big Win"] - SW --> SPW["Super Win"] - SW --> MW["Mega Win"] - - %% Big Win stages with flow - BW --> BWI[bigwin-in] - BWI --> BWL[bigwin-loop] - BWL --> BWO[bigwin-out] - - %% Super Win stages with flow - SPW --> SPWI[superwin-in] - SPWI --> SPWL[superwin-loop] - SPWL --> SPWO[superwin-out] - - %% Mega Win stages with flow - MW --> MWI[megawin-in] - MWI --> MWL[megawin-loop] - MWL --> MWO[megawin-out] - - %% Legend nodes - L0["Feature Name"]-->L1["Win Types"] --> L2["In State"] --> L3["Loop State"] --> L4["Out State"] - class L0 specialWin - class L1 winType - class L2 inStage - class L3 loopStage - class L4 outStage - - %% Style definitions - classDef inStage fill:#e6f3ff,stroke:#666,font-size:25px - classDef loopStage fill:#fff2cc,stroke:#666,font-size:25px - classDef outStage fill:#f8cecc,stroke:#666,font-size:25px - classDef winType fill:#d5e8d4,stroke:#82b366,font-size:25px - classDef specialWin fill:#fff4dd,stroke:#ff0000,font-size:25px - - class BWI,SPWI,MWI inStage - class BWL,SPWL,MWL loopStage - class BWO,SPWO,MWO outStage - class BW,SPW,MW winType - class SW specialWin - - %% Adjust node spacing - linkStyle default stroke-width:4px,stroke:#ff0000 -``` - ![Type Names](../img/05-main-scene/special-win-type-name.png) - -##### Step 1: Add Animation Resources - -Place animated assets in the following directories: - -| Platform | Path | Preview | -|----------|------|---------| -| Desktop | `assets/textures/desktop/postloads/anim-special-win` | ![Desktop](../img/05-main-scene/special-win-folder-desktop-anim.png) | -| Mobile | `assets/textures/mobile/postloads/anim-special-win` | ![Mobile](../img/05-main-scene/special-win-folder-mobile-anim.png) | - -##### Step 2: Configure Animation Settings - -| Setting | Example | -|------------------|---------| -| Static Fallback | ![Static](../img/05-main-scene/special-win-static.png) | -| Loop Animation | ![Loop](../img/05-main-scene/special-win-loop.png) | - -🔗 [View Animation Provider Setup](/docs/setup-main-game/main-scene/system#animation-provider-setup) - -:::tip -- Move assets to `custom-scale/` directory to resolve image quality issues -- Asset paths may vary by project configuration -::: - -##### Step 3: Font Configuration - -- **Path:** `assets\game-assets\fonts\preloads\main-game\fnt-special-win` -- Follow these steps to configure fonts for special win displays: - -1. **Package Font Assets** - - Import font files into project - - ![Font Packaging](../img/05-main-scene/special-win-pack-font.png) - -2. **Font Integration** - - Add font asset to special win component - - ![Font Integration](../img/05-main-scene/special-win-font.png) - -3. **Layout Settings** - - - Configure text alignment - - Adjust font size and spacing - - ![Font Layout](../img/05-main-scene/special-win-font-align.png) - - -:::tip -Customize font styles based on each game's design. -::: \ No newline at end of file +**Tip**: +- Move assets to `custom-scale/` to resolve image quality issues. +- Customize font styles based on game design. \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/07-item-description.md b/docs/02-setup-main-game/05-main-scene/07-item-description.md index 526c8b1..b767ecb 100644 --- a/docs/02-setup-main-game/05-main-scene/07-item-description.md +++ b/docs/02-setup-main-game/05-main-scene/07-item-description.md @@ -4,75 +4,61 @@ sidebar_position: 7 # Item Description -Provides players with detailed information about each item in the game. - - ---- - ## Overview +The **Item Description** system provides detailed information about game items, including payouts and descriptions. ![Item Description Overview](./img/07-item-description/overview.png) -## Implementation - -### Prepare Assets +## Asset Preparation | Assets | Description | |--------|-------------| -| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-1.png) | Used to Setup the background. | -| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-2.png) | Used to Setup the static symbol. | -| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-3.png) | Used to Setup the animation symbol. | -| ![Info Page Prepare Assets](./img/07-item-description/prepare-assets-4.png) | Used to Setup the payout/description. | +| ![Background](./img/07-item-description/prepare-assets-1.png) | Background setup. | +| ![Static Symbol](./img/07-item-description/prepare-assets-2.png) | Static symbol setup. | +| ![Animation Symbol](./img/07-item-description/prepare-assets-3.png) | Animation symbol setup. | +| ![Payout/Description](./img/07-item-description/prepare-assets-4.png) | Payout or description text setup. | -### Setup +## Setup +1. **Locate Template Prefabs**: + - Search for the `template-item-description` prefab. + - ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) +2. **Clone Assets**: + - Copy and paste to the game assets location, removing unnecessary prefixes. + - ![Clone Prefabs](./img/07-item-description/prepare-prefabs-2.png) -| Step | Action | Description | Image Reference | -| :--: | :----- | :---------- | :-------------: | -| 1 | Locate all template prefabs needed for the **Item Description** | Search for the `template-item-description` prefab. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-1.png) | -| 2 | Clone assets| Copy and paste them to the game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/07-item-description/prepare-prefabs-2.png) | +### Prefab Configurations +- **item-description-small** (Items with win payout only): + - ![Overview](./img/07-item-description/setup-item-small-overview.png) + - Steps: + | Step | Action | Image Reference | + |------|--------|-----------------| + | 1 | Set **Sprite Frame** in `background` using prepared assets. | ![Step 1](./img/07-item-description/setup-item-small-1.png) | + | 2 | Name prefab as `item-description-` and set **Animation Name** in **Animation Provider**. | ![Step 2](./img/07-item-description/setup-item-small-2.png) | + | 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. | ![Step 3](./img/07-item-description/setup-item-small-3.png) | + | 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. | ![Step 4](./img/07-item-description/setup-item-small-4.png) | -#### item-description-small +- **item-description-no-odds** (Items with description only): + - ![Overview](./img/07-item-description/setup-item-no-odds-overview.png) + - Steps: + | Step | Action | Image Reference | + |------|--------|-----------------| + | 1 | Set **Sprite Frame** in `background` using prepared assets. | ![Step 1](./img/07-item-description/setup-item-no-odds-1.png) | + | 2 | Name prefab as `item-description-` and set **Animation Name** in **Animation Provider**. | ![Step 2](./img/07-item-description/setup-item-no-odds-2.png) | + | 3 | Set **Sprite Frame** in `sprite-item` using prepared assets. | ![Step 3](./img/07-item-description/setup-item-no-odds-3.png) | + | 4 | Set **String**, **Color**, **Font**, and **Font Size** in `description`. Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if needed. | ![Step 4](./img/07-item-description/setup-item-no-odds-4.png) | - Setup the `item-description-small` prefab for items have only win payout: - - ![Locate Prefabs](./img/07-item-description/setup-item-small-overview.png) +- **item-description-big** (Items with both payout and description): + - ![Overview](./img/07-item-description/setup-item-big-overview.png) + - Steps: + | Step | Action | Image Reference | + |------|--------|-----------------| + | 1 | Set **Sprite Frame** in `background` using prepared assets. | ![Step 1](./img/07-item-description/setup-item-big-1.png) | + | 2 | Follow **Step 4** of `item-description-small` for payout setup. | [See Small Setup](#item-description-small) | + | 3 | Follow **Step 4** of `item-description-no-odds` for description setup. | [See No-Odds Setup](#item-description-no-odds) | - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-small-1.png) | - | 2 | - Name the item prefab following the format item-description-**name**".
- Setup the **Animation Name** to match the item's name in the **Animation Provider**.| ![Locate Prefabs](./img/07-item-description/setup-item-small-2.png) | - | 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-small-3.png) | - | 4 | - Adjust **Color**, **Font** and **Font Size** in `multi-x...` and `oods-x...` according to the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font.| ![Locate Prefabs](./img/07-item-description/setup-item-small-4.png) | - - -#### item-description-no-odds - Setup the `item-description-no-odds` prefab for items that have a description but no win payout: - - ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-overview.png) - - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-1.png) | - | 2 | - Name the item prefab following the format item-description-**name**".
- Setup **Animation Name** to match the item's name in the **Animation Provider**.| ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-2.png) | - | 3 | - Setup the **Sprite Frame** in the `sprite-item` using the same name as the item from the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-3.png) | - | 4 | - Set the **String** and adjust **Color**, **Font** and **Font Size** in the `description` according to the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) if you need to create a Bitmap Font. | ![Locate Prefabs](./img/07-item-description/setup-item-no-odds-4.png) | - -#### item-description-big - Setup the `item-description-big` prefab for items that include both a win payout and a description: - - ![Locate Prefabs](./img/07-item-description/setup-item-big-overview.png) - - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | - Setup the **Sprite Frame** in the `background` using the prepared assets. | ![Locate Prefabs](./img/07-item-description/setup-item-big-1.png) | - | 2 | - Setup the payout by following **Step 4** in **Setup prefab `item-description-small`** | [Configure Item Description Small](./item-description#item-description-small) | | - | 3 | - Setup the description by following **Step 4** in **Setup prefab `item-description-no-odds`** | [Configure Item Description No Odds](./item-description#item-description-no-odds) | | - -:::tip - Use Helper to setup: - 1. Setup **Content Size** and **Cell Item Size** according to the game design. - 2. Use prepared bitmap fonts to Setup the **Labels** font. - 3. Click **Set Size** to run the helper. - 4. Setup the **Background**, **Sprite Frame**, **Animation**, **Payout**, **Description** of the item using the prepared assets. - - ![Locate Prefabs](./img/07-item-description/setup-item-helper.png) -::: \ No newline at end of file +**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. + - ![Helper Setup](./img/07-item-description/setup-item-helper.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/08-free-round.md b/docs/02-setup-main-game/05-main-scene/08-free-round.md index 2d1c63b..af1449a 100644 --- a/docs/02-setup-main-game/05-main-scene/08-free-round.md +++ b/docs/02-setup-main-game/05-main-scene/08-free-round.md @@ -1,128 +1,67 @@ --- -sidebar_position: 16 +sidebar_position: 8 title: Free Round description: Display and manage remaining free rounds in the game. --- -# Free Round +# Free Round System ## Overview - -- Handles the **display** and **logic** for tracking remaining free rounds in a slot game. -- Supports both **desktop** and **mobile**, including animation and event handling. +The **Free Round** system manages the display and logic for tracking remaining free rounds in the game, supporting both desktop and mobile platforms. | Platform | Preview | |----------|---------| -| Desktop | ![Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | -| Mobile | ![Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | +| Desktop | ![Desktop Free Round](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | +| Mobile | ![Mobile Free Round](../img/05-main-scene/freeround-counter/overview-freeround.png) | ---- +## Asset Preparation +- **Core Assets**: + - Path: `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs` + - ![Core Prefabs](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png) +- **Game Assets**: + - Path: `assets/game-assets/prefabs` + - ![Game Prefabs](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png) +## Setup +1. **General Configuration**: + - Ensure script references correct nodes. + - ![General Setup](../img/05-main-scene/freeround-counter/freeround-counter-general.png) + - Properties: + | Property | Description | + |----------|-------------| + | `duration` | Duration of fade in/out animation (seconds). | + | `content` | Container node for the counter. | + | `labelLeft` | Label showing remaining free rounds. | + - ![Settings](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png) -## Implementation +2. **Platform Setup**: + - **Desktop**: + - Add `Platform-ui-controller` component. + - ![Desktop Setup](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png) + - **Mobile**: + - Add `Platform-ui-controller` and `UI Mobile Position` components. + - ![Mobile Setup](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png) -### Prepare Assets +3. **Asset Setup**: + - **Desktop**: + - Path: `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` + - ![Desktop Assets](../img/05-main-scene/freeround-counter/assets-freeround-desktop.png) + - **Mobile**: + - Path: `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` + - ![Mobile Assets../img/05-main-scene/freeround-counter/assets-freeround-mobile.png) + - **Common**: + - Free Round Background: ![Background Asset](../img/05-main-scene/freeround-counter/assets-freeround-background.png) -- Copy or parse prefabs from core to game assets. +4. **Font Setup**: + - ![Font Setup](../img/05-main-scene/freeround-counter/add-font.png) -#### Core - -| Path | Preview | -|------|---------| -| `assets/core-assets/hyper-core/packages/freeround-count-box/prefabs` | ![Desktop](../img/05-main-scene/freeround-counter/freeround-path-prefabs.png) | - -#### Game - -| Path | Preview | -|------|---------| -| `assets/game-assets/prefabs` |![Preview](../img/05-main-scene/freeround-counter/freeround-path-prefabs-in-game.png) | - ---- - -### Setup - -- Ensure the script references the correct nodes. - -![General](../img/05-main-scene/freeround-counter/freeround-counter-general.png) - -- Manages and displays the remaining free round count in-game. - -![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setting-general.png)" - -| Property | Description | -|---------------|--------------------------------------------| -| `duration` | Duration of fade in/out animation (seconds) | -| `content` | Container node for the counter | -| `labelLeft` | Label showing remaining free rounds | - ---- - -#### Platform Setup - -- Ensure that the desktop and mobile prefabs are positioned differently in the main game scene for proper layout on each platform. - -##### Desktop - -![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setup-desktop.png) - -| Component | Description | -|-------------------------|-------------| -| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) | - - -##### Mobile - -![Desktop](../img/05-main-scene/freeround-counter/freeround-counter-setup-mobile.png) - -| Component | Description | -|-------------------------|-------------| -| `Platform-ui-controller` | [View Setup](/docs/faqs/setup-cocos-scene#platform-ui-controller) | -| `UI Mobile Position` | [Mobile Position Setup](/docs/faqs/setup-cocos-scene#ui-mobile-landscape--portrait--position) | - ---- - -#### Asset Setup - -##### Desktop - -| Path | Preview | -|------|---------| -| `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Assets Desktop](../img/05-main-scene/freeround-counter/assets-freeround-desktop.png) | - -##### Mobile - -| Path | Preview | -|------|---------| -| `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` | ![Assets Mobile](../img/05-main-scene/freeround-counter/assets-freeround-mobile.png) | - -##### Common - -- **Free Round Background** - ![Assets Mobile](../img/05-main-scene/freeround-counter/assets-freeround-background.png) - -🔗 More: [Game Asset Structure](/docs/category/game-asset-structure) - -:::tip -- **Position & Size**: Follow the game design layout. -- **Asset Packing**: Use separate textures for Desktop and Mobile. -::: - ---- - -#### Font Setup - -| Preview | -|---------| -| ![Assets Mobile](../img/05-main-scene/freeround-counter/add-font.png) | - ---- +**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](http://localhost:3000/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel)). ## Game Result Example - -Make sure the main scene includes the popup panel. -🔗 [See Popup Panel Guide](/docs/setup-main-game/main-scene/popup-panel#multiple-popup-panel) - -| Platform | Popup | Action | Result | -|----------|--------|---------------|--------| -| Desktop | ![Popup Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png) | Click → Start | ![Result Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | -| Mobile | ![Popup Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png) | Click → Start | ![Result Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | +| Platform | Popup | Action | Result | +|----------|-------|--------|--------| +| Desktop | ![Popup Desktop](../img/05-main-scene/freeround-counter/popup-freeround-counter-desktop.png) | Click → Start | ![Result Desktop](../img/05-main-scene/freeround-counter/overview-freeround-desktop.png) | +| Mobile | ![Popup Mobile](../img/05-main-scene/freeround-counter/popup-freeround-counter-mobile.png) | Click → Start | ![Result Mobile](../img/05-main-scene/freeround-counter/overview-freeround.png) | \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/09-info-pages.md b/docs/02-setup-main-game/05-main-scene/09-info-pages.md index 44c8c09..ef2367a 100644 --- a/docs/02-setup-main-game/05-main-scene/09-info-pages.md +++ b/docs/02-setup-main-game/05-main-scene/09-info-pages.md @@ -4,107 +4,95 @@ sidebar_position: 9 # Info Pages -Info Pages (Information Pages) provide players with essential details about how the game works. It helps player understand the rules, features, symbols, payout structures, and other gameplay mechanics. - ---- ## 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. -- **Desktop** consists Paytable and Rules in **Info Pages**. -- **Mobile** is divided into 2 parts Paytable and Rules +| Platform | Desktop | Mobile | +|----------|---------|--------| +| Paytable/Rules | ![Desktop 1](./img/09-info-pages/overview-desktop-1.png)
![Desktop 2](./img/09-info-pages/overview-desktop-2.png)
![Desktop 3](./img/09-info-pages/overview-desktop-3.png) | ![Mobile 1](./img/09-info-pages/overview-mobile-1.png)
![Mobile 2](./img/09-info-pages/overview-mobile-2.png) | -|Desktop | Mobile | -|:------:|:------:| -|![Background Overview Landscape](./img/09-info-pages/overview-desktop-1.png)|![Background Overview Landscape](./img/09-info-pages/overview-mobile-1.png)| -|![Background Overview Landscape](./img/09-info-pages/overview-desktop-2.png)
![Background Overview Landscape](./img/09-info-pages/overview-desktop-3.png)|![Background Overview Portrait](./img/09-info-pages/overview-mobile-2.png)| - -## Prepare the assets +## Asset Preparation | Assets | Description | |--------|-------------| -|![Info Page Prepare Assets](./img/09-info-pages/prepare-assets-1.png)|Used to setup **Rules** or image in RichText| -|![Info Page Prepare Assets](./img/09-info-pages/prepare-assets-2.png)|Used to setup **Paytable**| +| ![Rules Asset](./img/09-info-pages/prepare-assets-1.png) | Used for **Rules** or RichText images. | +| ![Paytable Asset](./img/09-info-pages/prepare-assets-2.png) | Used for **Paytable** setup. | -## Setup Prefabs Desktop - -| Step | Action | Description | Image Reference | -| :--: | :----- | :---------- | :---------------------------------------------------------------------------------------------: | -| 1 | Locate all template prefabs need for **Info Pages Desktop** | Search for the `desktop-hyper-info-panel` prefab. | ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-desktop-1.png) | -| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-desktop-2.png) | +## Desktop Setup +1. **Locate Template Prefabs**: + - Search for the `desktop-hyper-info-panel` prefab. + - ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-desktop-1.png) +2. **Clone Assets**: + - Copy and paste to the game assets location, removing unnecessary prefixes. + - ![Clone Prefabs](./img/09-info-pages/prepare-prefabs-desktop-2.png) ### desktop-info-panel - - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | Change **Color** in `page-background` follow the game design.| ![Locate Prefabs](./img/09-info-pages/configure-panel-1.png) | - | 2 | Change **Color** in `menu-header-background` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-panel-2.png) | - | 3 | Update **Prefab** in `paytable-content` from prepared prefabs. | ![Locate Prefabs](./img/09-info-pages/configure-panel-3.png) || - | 4 | Update **Prefab** in `rules-content` from prepared prefabs.| ![Locate Prefabs](./img/09-info-pages/configure-panel-4.png) | +| Step | Action | Image Reference | +|------|--------|-----------------| +| 1 | Change **Color** in `page-background` per game design. | ![Step 1](./img/09-info-pages/configure-panel-1.png) | +| 2 | Change **Color** in `menu-header-background` per game design. | ![Step 2](./img/09-info-pages/configure-panel-2.png) | +| 3 | Update **Prefab** in `paytable-content` using prepared prefabs. | ![Step 3](./img/09-info-pages/configure-panel-3.png) | +| 4 | Update **Prefab** in `rules-content` using prepared prefabs. | ![Step 4](./img/09-info-pages/configure-panel-4.png) | ### desktop-paytable-content +- **Item with Payout**: + - ![Paytable Payout](./img/09-info-pages/configure-paytable-1.png) + - Steps: + | Step | Action | Image Reference | + |------|--------|-----------------| + | 1 | Set **Item Name** and **Odds Items** per game design. | ![Step 1](./img/09-info-pages/configure-item-payout-1.png) | + | 2 | Set **Sprite Frame** in `item-display` using prepared assets. | ![Step 2](./img/09-info-pages/configure-item-payout-2.png) | + | 3 | Change **Color** in `multi-x...` and `odds-x...` per game design. | ![Step 3](./img/09-info-pages/configure-item-payout-3.png) | + | 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. | ![Step 4](./img/09-info-pages/configure-item-payout-4.png) | -- Paytable: Consist **Item with Payout** and **Item with Description**. +- **Item with Description**: + - ![Paytable Description](./img/09-info-pages/configure-paytable-2.png) + - Steps: + | Step | Action | Image Reference | + |------|--------|-----------------| + | 1 | Set **Name** per game design. | ![Step 1](./img/09-info-pages/configure-item-description-1.png) | + | 2 | Set **Sprite Frame** in `item-display` using prepared assets. | ![Step 2](./img/09-info-pages/configure-item-description-2.png) | + | 3 | Change **String** in `description` per game design. | ![Step 3](./img/09-info-pages/configure-item-description-3.png) | - - Setup **Item with Payout**: - - ![Locate Prefabs](./img/09-info-pages/configure-paytable-1.png) - - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | Setup Item with **Item Name** and **Odds Items** follow the game design.| ![Locate Prefabs](./img/09-info-pages/configure-item-payout-1.png) | - | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-payout-2.png) | - | 3 | Change **Color** in `multi-x...` and `oods-x...` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-item-payout-3.png) || - | 4 | - Change **Font** and **Font Size** in `multi-x...` and `oods-x...` follow the game design.
- Use [Bitmap Font Creator](http://localhost:3000/docs/category/game-asset-structure) to create Font Bitmap if you need it.| ![Locate Prefabs](./img/09-info-pages/configure-item-payout-4.png) | - - - Setup **Item with Description**: - - ![Locate Prefabs](./img/09-info-pages/configure-paytable-2.png) - - | Step | Action | Image Reference | - | :--: | :----- | :-------------: | - | 1 | Setup Item with **Name** follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-item-description-1.png) | - | 2 | Setup **Sprite Frame** in `item-display` same name with item from prepared assets. | ![Locate Prefabs](./img/09-info-pages/configure-item-description-2.png) | - | 3 | Change **String** in `description` follow the game design. | ![Locate Prefabs](./img/09-info-pages/configure-item-description-3.png) | - -- Feature Game: Depending on each game, there will be different feature: **FREESPIN BONUS**, **BONUS FEATURE**, ... - - - Title : Change **String** and **Color** in `freespins-bonus-title` follow the game design. - - Image : Setup **Sprite Frame** `freespins-bonus-image-...` use from prepared assets. - - Description: Change **String** in `freespins-bonus-description` ollow the game design. - -| Overivew | Configure | -| :--------------: | :------------------: | -| ![Locate Prefabs](./img/09-info-pages/configure-feature-game-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-2.png) | -| ![Locate Prefabs](./img/09-info-pages/configure-feature-game-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-feature-game-4.png) | +- **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`. + - ![Feature Overview](./img/09-info-pages/configure-feature-game-1.png) + - ![Feature Configure](./img/09-info-pages/configure-feature-game-2.png) + - ![Feature Overview 2](./img/09-info-pages/configure-feature-game-3.png) + - ![Feature Configure 2](./img/09-info-pages/configure-feature-game-4.png) ### desktop-rules-content - There are 2 types: **Lines** and **Ways**. - 1. Setup **Sprite Frame** in `lines-image` from prepared assets. - 2. Change **Color** in `lines-title` follow game desgin. - 3. If the game is **Ways**: - - Change **String** in `lines-title` is **WIN WAYS/DYNAWAYS**. - - Enable and update **String** in `lines-description`. +- 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`. + - ![Rules Overview](./img/09-info-pages/configure-rules-1.png) + - ![Rules Configure](./img/09-info-pages/configure-rules-2.png) + - ![Rules Overview 2](./img/09-info-pages/configure-rules-3.png) + - ![Rules Configure 2](./img/09-info-pages/configure-rules-4.png) -| Overivew | Configure | -| :--------------: | :------------------: | -| ![Locate Prefabs](./img/09-info-pages/configure-rules-1.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-2.png) | -| ![Locate Prefabs](./img/09-info-pages/configure-rules-3.png) | ![Locate Prefabs](./img/09-info-pages/configure-rules-4.png) | +## Mobile Setup +1. **Locate Template Prefabs**: + - Search for the `mobile-ui` prefab. + - ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-1.png) +2. **Clone Assets**: + - Copy and paste to the game assets location, removing unnecessary prefixes. + - ![Clone Prefabs](./img/09-info-pages/prepare-prefabs-mobile-2.png) +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. + - ![Paytable Spawner](./img/09-info-pages/configure-prefab-mobile-1.png) + - For **Rules**: Use `mobile-rule-content-spawner` in the `mobile-ui` prefab. + - ![Rules Spawner](./img/09-info-pages/configure-prefab-mobile-2.png) -## Setup Prefabs Mobile - -| Step | Action | Description | Image Reference | -| :--: | :----- | :---------- | :-------------: | -| 1 | Locate all template prefabs need for **Info Pages Mobile**| Search for the `mobile-ui` prefab. |![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-1.png) | -| 2 | Clone assets| Copy/Pase to game assets location, then rename the copied prefabs by removing unnecessary prefixes. | ![Locate Prefabs](./img/09-info-pages/prepare-prefabs-mobile-2.png) | -| 3 | Configure prefabs| We will configure `mobile-paytable-content` and `mobile-rules-content` the same as configure for desktop. | [Configure prefabs Desktop](./info-pages#setup-prefabs-desktop) | -| 4 | Locate **Paytable** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-paytable-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-pages/configure-prefab-mobile-1.png) | -| 5 | Locate **Rules** spawner position in `mobile-ui`, then use prefab configured.| Search for the `mobile-rule-content-spawner` in `mobile-ui` prefab. | ![Locate Prefabs](./img/09-info-pages/configure-prefab-mobile-2.png) | - -:::tip - -If the game already have server, we will check config settings from server. - -1. Run DevTools on Browser, on tab **Network** find message with **event** = "config". - -2. Check values in **paytable** and compare it with what we've done. - -![Info Page Prepare Assets](./img/09-info-pages/prepare-setting-config.png) -::: \ No newline at end of file +**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. + - ![Config Settings](./img/09-info-pages/prepare-setting-config.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-coin-internation.png b/docs/02-setup-main-game/img/05-main-scene/special-win-coin-international.png similarity index 100% rename from docs/02-setup-main-game/img/05-main-scene/special-win-coin-internation.png rename to docs/02-setup-main-game/img/05-main-scene/special-win-coin-international.png