diff --git a/docs/02-setup-main-game/05-main-scene/14-special-win.md b/docs/02-setup-main-game/05-main-scene/14-special-win.md new file mode 100644 index 0000000..af1d435 --- /dev/null +++ b/docs/02-setup-main-game/05-main-scene/14-special-win.md @@ -0,0 +1,170 @@ +--- +sidebar_position: 14 +--- + +# Special Win Setup + +--- + +## Overview + +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. + +--- + +## Implementation + +### Core Components + +The special win system consists of three main components: + +| 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 | + +![Component Architecture](../img/05-main-scene/special-win-in-game.png) + +#### Coin Effect System + +The coin shower effect uses prefab variants for different markets: + +![Base Coin Asset](../img/05-main-scene/special-win-coin.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) | + +:::tip +- Position the Special Win node as per game design +::: + +--- + +### Asset Configuration + +#### 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](http://localhost:3000/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](http://localhost:3000/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. +::: diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-big.png b/docs/02-setup-main-game/img/05-main-scene/special-win-big.png new file mode 100644 index 0000000..ae71b41 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-big.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-coin-chinese.png b/docs/02-setup-main-game/img/05-main-scene/special-win-coin-chinese.png new file mode 100644 index 0000000..c3feb6c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-coin-chinese.png differ 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-internation.png new file mode 100644 index 0000000..aa2fab3 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-coin-internation.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-coin.png b/docs/02-setup-main-game/img/05-main-scene/special-win-coin.png new file mode 100644 index 0000000..db1171d Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-coin.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop-anim.png b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop-anim.png new file mode 100644 index 0000000..009897a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop.png b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop.png new file mode 100644 index 0000000..640fd4f Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-desktop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile-anim.png b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile-anim.png new file mode 100644 index 0000000..26bd127 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile.png b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile.png new file mode 100644 index 0000000..c3f4cc9 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-folder-mobile.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-font-align.png b/docs/02-setup-main-game/img/05-main-scene/special-win-font-align.png new file mode 100644 index 0000000..dee4632 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-font-align.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-font.png b/docs/02-setup-main-game/img/05-main-scene/special-win-font.png new file mode 100644 index 0000000..1a98b88 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-font.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-in-game.png b/docs/02-setup-main-game/img/05-main-scene/special-win-in-game.png new file mode 100644 index 0000000..7d1db50 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-in-game.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-loop.png b/docs/02-setup-main-game/img/05-main-scene/special-win-loop.png new file mode 100644 index 0000000..badbeb2 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-loop.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-mega.png b/docs/02-setup-main-game/img/05-main-scene/special-win-mega.png new file mode 100644 index 0000000..8d40622 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-mega.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-pack-font.png b/docs/02-setup-main-game/img/05-main-scene/special-win-pack-font.png new file mode 100644 index 0000000..e78c6f4 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-pack-font.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-static.png b/docs/02-setup-main-game/img/05-main-scene/special-win-static.png new file mode 100644 index 0000000..c0d4d05 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-static.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-super.png b/docs/02-setup-main-game/img/05-main-scene/special-win-super.png new file mode 100644 index 0000000..b5c5436 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-super.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/special-win-type-name.png b/docs/02-setup-main-game/img/05-main-scene/special-win-type-name.png new file mode 100644 index 0000000..8b94939 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/special-win-type-name.png differ diff --git a/docusaurus.config.ts b/docusaurus.config.ts index f6cdec3..8f73739 100644 --- a/docusaurus.config.ts +++ b/docusaurus.config.ts @@ -31,6 +31,10 @@ const config: Config = { locales: ['en'], }, + markdown: { + mermaid: true + }, + presets: [ [ 'classic', @@ -48,6 +52,10 @@ const config: Config = { } satisfies Preset.Options, ], ], + themes: [ + // ...existing themes if any... + '@docusaurus/theme-mermaid' + ], themeConfig: { // Replace with your project's social card diff --git a/package-lock.json b/package-lock.json index 6c8175c..b275602 100644 --- a/package-lock.json +++ b/package-lock.json @@ -3646,6 +3646,28 @@ "react-dom": "^18.0.0 || ^19.0.0" } }, + "node_modules/@docusaurus/theme-mermaid": { + "version": "3.7.0", + "resolved": "https://registry.npmjs.org/@docusaurus/theme-mermaid/-/theme-mermaid-3.7.0.tgz", + "integrity": "sha512-7kNDvL7hm+tshjxSxIqYMtsLUPsEBYnkevej/ext6ru9xyLgCed+zkvTfGzTWNeq8rJIEe2YSS8/OV5gCVaPCw==", + "license": "MIT", + "dependencies": { + "@docusaurus/core": "3.7.0", + "@docusaurus/module-type-aliases": "3.7.0", + "@docusaurus/theme-common": "3.7.0", + "@docusaurus/types": "3.7.0", + "@docusaurus/utils-validation": "3.7.0", + "mermaid": ">=10.4", + "tslib": "^2.6.0" + }, + "engines": { + "node": ">=18.0" + }, + "peerDependencies": { + "react": "^18.0.0 || ^19.0.0", + "react-dom": "^18.0.0 || ^19.0.0" + } + }, "node_modules/@docusaurus/theme-search-algolia": { "version": "3.7.0", "resolved": "https://registry.npmjs.org/@docusaurus/theme-search-algolia/-/theme-search-algolia-3.7.0.tgz", diff --git a/package.json b/package.json index ef30bb5..c81d6ef 100644 --- a/package.json +++ b/package.json @@ -17,6 +17,7 @@ "dependencies": { "@docusaurus/core": "3.7.0", "@docusaurus/preset-classic": "3.7.0", + "@docusaurus/theme-mermaid": "^3.7.0", "@mdx-js/react": "^3.0.0", "clsx": "^2.0.0", "prism-react-renderer": "^2.3.0",