diff --git a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md b/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md index fc6abc0..688f5a3 100644 --- a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md +++ b/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md @@ -24,19 +24,31 @@ Each type delivers increasing visual excitement to highlight significant player ### Core Components -| Component | Description | -|----------------------------------|---------------------------------| -| `hyper-special-win-initializer` | Initializes the special win system | -| `hyper-present-special-win` | Controls display and animation flow | -| `hyper-special-win-label-point-effect` | Shows the win amount visually | +The special win system consists of three main components: -![Component Setup](../img/05-main-scene/special-win-in-game.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 | + +![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) + +| Prefab Name | Market Target | Asset Preview | +|-------------|---------------|---------------| +| `hyper-coin-shower-international` | Global markets | ![International Version](../img/05-main-scene/special-win-coin-internation.png) | +| `hyper-coin-shower-chinese` | Chinese market | ![Chinese Version](../img/05-main-scene/special-win-coin-chinese.png) | :::tip -Place the Special Win as defined by the game design. +Position the Special Win node as per game design ::: - --- ### Asset Configuration @@ -56,16 +68,56 @@ Store static assets in platform-specific directories: #### 2. Animation Setup -##### Animation Naming Convention +##### Special Win Animation Flow -Each animation type must follow the defined naming pattern per platform: +```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"] -- name type: - - bigwin - - superwin - - megawin + %% Big Win stages with flow + BW --> BWI[bigwin-in] + BWI --> BWL[bigwin-loop] + BWL --> BWO[bigwin-out] -![Type Names](../img/05-main-scene/special-win-type-name.png) + %% 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 Stage"] --> L3["Loop Stage"] --> L4["Out Stage"] + 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 +``` + ![Type Names](../img/05-main-scene/special-win-type-name.png) ##### Step 1: Add Animation Resources @@ -86,6 +138,27 @@ Place animated assets in the following directories: [View Animation Provider Setup](http://localhost:3000/docs/setup-main-game/main-scene/system#animation-provider-setup) :::tip -Static and animation paths may vary by game. Adjust as needed. +Static and animation folder paths may vary by game. Adjust as needed. ::: +##### 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 index ebb3170..beb9958 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/special-win-big.png 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-font-align.png b/docs/02-setup-main-game/img/05-main-scene/special-win-font-align.png new file mode 100644 index 0000000..da24b25 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-pack-font.png b/docs/02-setup-main-game/img/05-main-scene/special-win-pack-font.png new file mode 100644 index 0000000..cfe42f2 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-super.png b/docs/02-setup-main-game/img/05-main-scene/special-win-super.png index aad0ae4..adbae4c 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/special-win-super.png and b/docs/02-setup-main-game/img/05-main-scene/special-win-super.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