diff --git a/docs/03-setup-special-feature/02-free-spin.md b/docs/03-setup-special-feature/02-free-spin.md index 710a605..1482c98 100644 --- a/docs/03-setup-special-feature/02-free-spin.md +++ b/docs/03-setup-special-feature/02-free-spin.md @@ -7,6 +7,269 @@ sidebar_position: 2 ## Overview The **Free Spin (or Free Games) Feature** awards players a set number of spins without requiring additional bets. During these spins, players can still win prizes—often larger than in the base game—without spending any of their own credits. ![Free Spin Overview](./img/freespins/fs-trigger.jpg) -## Implementation -### Prepare Assets \ No newline at end of file +## Implementation Guide + +### Prepare Assets + +| Component Type | Description | Visual | +|------------------------|---------------------------------------------------|--------| +| **Core Components** | Locate the prefabs from the core package. | ![Core Prefabs](./img/freespins/freespin-prefabs-core.png) | +| **Game-Specific Components** | Prefabs are already present in the main game scene. | ![Game Prefabs](./img/freespins/freespin-prefabs-game.png) | + +--- + +### Setup Scene + +#### Structure Free Spins + +Your scene should include the following nodes: + +- **Trigger** +- **Retrigger** +- **Win** + +***Example Scene Structure:*** + +![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png) + +| Property | Description | +|------------------------- |----------------------------------------------------------| +| `transitionStart` | Triggers the show animation when Free Spins start.
Default: `null`. | +| `transitionStop` | Triggers the return animation to the base game.
Default: `null`. | +| `nodeActivate` | Maintains the visual state during Free Spins. | +| `freeSideBandContainer` | Activates the Free Spins side band visual. | + +--- +#### Component Configuration + +##### Trigger & Retrigger + +To configure the Free Spin **trigger** and **retrigger** components, follow these steps: + +1. **Add Animations** + +Include the required animations for both the trigger and retrigger elements. + +![Add Animation](./img/freespins/add-anim-freespin.png) +![Add Animation Content](./img/freespins/add-anim-content.png) + +| Node Name | Purpose | Location in Core Package | +|-----------|-----------------------------------------|------------------------------------------------------------------| +| `content` | Handles zoom-in and zoom-out animations | `assets/core-assets/slotty-core/packages/feature-game/animations` | + +![Trigger Config](./img/freespins/freespin-trigger.png) + +| Property | Description | +|------------------------|--------------------------------------------------------------------------| +| `durationPresentation` | Duration (in seconds) the trigger animation plays before auto-stopping | + +2. **Add Background Animation Effect** + +![Effect Example](./img/freespins/effect-explosive.png) + +| Prefab Name | Purpose | Location in Core Package | +|-------------|-------------------------------------------------|-------------------------------------------------------------| +| `explosive` | Background animation effect triggered | `assets/core-assets/hyper-core/packages/explosive/prefabs` | + +3. **Configure Particle Effects** + +![Particles](./img/freespins/textture-particles.png) +![Set Particles Scale](./img/freespins/set-particles-scale.png) + +| Node Name | Purpose | Location in Core Package | +|-------------|-----------------------------------------------------------------------------------------|------------------------------------------------------------| +| `particles` | - Particle effects around title and number triggers.
- Set scale to `1` for visibility. | `assets/core-assets/slotty-core/packages/present/particles` | + +:::tip +Set up the **present freespin retrigger** in the same way as the **present freespin trigger**. +::: + +##### 1. present freespin trigger + +Add fonts and textures for Free Spin trigger. + +![Trigger](./img/freespins/trigger-freespin.png) + +##### 2. present freespin retrigger + +Add fonts and textures to show retrigger effect. + +![Retrigger](./img/freespins/retrigger-freespin.png) + +##### Add Font + +![config](./img/freespins/trigger-freespin-font.png) + +#### 3. Present Free Spin Win + +**Free Spin Win Setup** + +![Win](./img/freespins/set-freespin-win.png) + +| Property | Description | +|-------------------------|-----------------------------------------------------------------------------------------------| +| `content` | Node for displaying the win animation content. | +| `durationPresentWin` | Duration (in seconds) that the win presentation is shown. | +| `animation` | - Animation controller for the win presentation.
- Located at: `assets/core-assets/slotty-core/packages/feature-game/animations` | +| `clipStartPresentation` | Animation clip played when the win presentation starts. | +| `clipStopPresentation` | Animation clip played when the win presentation ends. | +| `allowPresentWinPoint` | Enables the display of win points during the presentation. | +| `durationCountPoint` | Duration (in seconds) for counting up win points. | +| `lblTotalWinPoint` | Label node showing the total win points. | +| `lblTotalFreeSpinCount` | Label node showing the total number of free spins awarded. | + +- Add congratulatory font and texture for the win display. + +![Win](./img/freespins/win-freespin.png) + +--- + +:::tip Best Practice +Follow the visual and font flow as defined by your game's design system. +::: + +--- +#### Free Spins Count Box + +The **Free Spins Count Box** displays the remaining number of free spins to the player. Follow these steps to set it up: + +##### Steps to Add the Count Box + +| Step | Description | Image | +|------|-----------------------------------------------------------------------------|-----------------------------------------------| +| 1 | Locate the `freespins-count-box` prefab in the Core package. | ![Core Prefab](./img/freespins/find-freespin-box.png) | +| 2 | Add the `freespins-count-box` prefab to your main game scene. | ![In Scene](./img/freespins/game-freespin-box.png) | +| 3 | Verify its appearance in both desktop and mobile modes. | ![Mobile Mode](./img/freespins/both-mode-mobile.png) | + +##### Platform-Specific Setup + +Assign the appropriate node and controller for each platform: + +| Platform | Node Name | Component to Add | Example Image | +|----------|--------------------------|-----------------------------|-------------------------------------------------------| +| Desktop | `freespins-box-desktop` | `Platform-ui-controller` | ![Desktop Controller](./img/freespins/add-script-freespin-counter.png) | +| Mobile | `freespins-box-mobile` | `Platform-ui-controller` | ![Mobile Controller](./img/freespins/add-script-freespin-counter-mobile.png) | + +##### Asset Configuration + +Ensure the correct assets are used for each platform: + +| Platform | Asset Path | Example Image | +|----------|-------------------------------------------------------------------|-------------------------------------------------------------------------------| +| Desktop | `assets/game-assets/textures/desktop/preloads/main-game/custom-scale` | ![Desktop Assets](./img/freespins/freespin-counter-box-desktop.png) | +| Mobile | `assets/game-assets/textures/mobile/preloads/main-game/custom-scale` | ![Mobile Assets](./img/freespins/freespin-counter-box-mobile.png) | +| Common | Freespins Box Background | ![Common Asset](./img/freespins/freespin-counter-box-common.png) | + +##### Font Setup + +Set the font for the count box display: + +![Font Setup](./img/freespins/set-font-freespin-count-box.png) + +--- +#### Free Spin Background Setup + +##### 1. Add Animation to Animation Provider + +Add the Free Spin background animation to your **Animation Provider**. + +![Add Animation](./img/freespins/add-anim-background.png) + +##### 2. Configure Background Display + +Set up the background for both landscape and portrait modes: + +- **Landscape Mode** + +![Landscape Background](./img/freespins/set-background-freespin-landscape.png) + +- **Portrait Mode** + +![Portrait Background](./img/freespins/set-background-freespin-portrait.png) + + +##### 3. Asset Example + +Example background assets for Free Spin: + +![Background Assets](./img/freespins/assets-freespin-background.png) + + +#### Sidebands (Optional) + +Sidebands are optional visual elements, often used in classic slot game designs. + +| Preview | Asset Structure | +|---------|----------------| +| ![Sidebands](./img/freespins/freespin-sideband.png) | ![Sideband Assets](./img/freespins/assets-freespind-sideband.png) | + +**Setup Steps:** + +1. **Add Preference:** + Add the free sideband preference in your configuration. + ![Add Preference](./img/freespins/add-preference-free-sideband.png) + +2. **Assign Texture:** + Set the correct texture for the free sideband. + ![Add Texture](./img/freespins/add-texture-free-sideband.png) + +**Asset Mapping:** + +| Asset Name | Node/Preference Name | +|---------------------------|------------------------| +| `anim-free-sideband-static` | `particle-free-sideband` | +| `sideband-back` | `sideband-back` | +| `sideband` | `sideband` | +| `sideband-shine` | `sideband-shine` | +| `sideband-static` | `liquid` | +| `indicator-static` | `indicator-static` | + +--- + +#### Transition Effects (Optional) + +##### Setup: Create Transition Node + +1. **Create a new node** in your scene for the transition effect. +2. **Add the following components** to this node: + - `transition` + - `transition-scaler` +3. Configure the transition properties as required for your effect. + +![Transition Setup](./img/freespins/setup-transition.png) + +| Property | Description | +|--------------------|--------------------------------------------| +| `content` | Target node for transition effects | +| `animationName` | Animation identifier/reference | +| `sfxName` | Sound effect identifier | +| `transitionFrame` | Frame to trigger transition callback | + + +##### Asset Setup + +1. Add transition animation to the **Animation Provider**. +2. Match the animation name with the correct node. + +![Transition Setup](./img/freespins/add-anim-transition.png) + +**add preferrence** + +Configure preferences as needed for your transition. + +![Transition Setup](./img/freespins/add-preference-transition.png) + +**Example Result:** + +![Transition Result](./img/freespins/fs-transition.jpg) + +--- + +## Final Result Examples + +| Phase | Image | +|-------|-------| +| Trigger | ![Trigger](./img/freespins/fs-trigger.jpg) | +| Active Scene | ![Scene](./img/freespins/fs-scene.jpg) | +| Completion | ![Congrats](./img/freespins/fs-congra.jpg) | diff --git a/docs/03-setup-special-feature/img/freespins/add-anim-background.png b/docs/03-setup-special-feature/img/freespins/add-anim-background.png new file mode 100644 index 0000000..766f4c6 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-anim-background.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-anim-content.png b/docs/03-setup-special-feature/img/freespins/add-anim-content.png new file mode 100644 index 0000000..4c1dd53 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-anim-content.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-anim-freespin.png b/docs/03-setup-special-feature/img/freespins/add-anim-freespin.png new file mode 100644 index 0000000..5f21fce Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-anim-freespin.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-anim-transition.png b/docs/03-setup-special-feature/img/freespins/add-anim-transition.png new file mode 100644 index 0000000..047adf4 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-anim-transition.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-preference-free-sideband.png b/docs/03-setup-special-feature/img/freespins/add-preference-free-sideband.png new file mode 100644 index 0000000..de52504 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-preference-free-sideband.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-preference-transition.png b/docs/03-setup-special-feature/img/freespins/add-preference-transition.png new file mode 100644 index 0000000..d2dac0d Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-preference-transition.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter-mobile.png b/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter-mobile.png new file mode 100644 index 0000000..9a726f7 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter-mobile.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter.png b/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter.png new file mode 100644 index 0000000..4500e8e Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-script-freespin-counter.png differ diff --git a/docs/03-setup-special-feature/img/freespins/add-texture-free-sideband.png b/docs/03-setup-special-feature/img/freespins/add-texture-free-sideband.png new file mode 100644 index 0000000..ca5aaff Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/add-texture-free-sideband.png differ diff --git a/docs/03-setup-special-feature/img/freespins/assets-freespin-background.png b/docs/03-setup-special-feature/img/freespins/assets-freespin-background.png new file mode 100644 index 0000000..061cfb7 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/assets-freespin-background.png differ diff --git a/docs/03-setup-special-feature/img/freespins/assets-freespind-sideband.png b/docs/03-setup-special-feature/img/freespins/assets-freespind-sideband.png new file mode 100644 index 0000000..03cd362 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/assets-freespind-sideband.png differ diff --git a/docs/03-setup-special-feature/img/freespins/both-mode-mobile.png b/docs/03-setup-special-feature/img/freespins/both-mode-mobile.png new file mode 100644 index 0000000..2a1c449 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/both-mode-mobile.png differ diff --git a/docs/03-setup-special-feature/img/freespins/effect-explosive.png b/docs/03-setup-special-feature/img/freespins/effect-explosive.png new file mode 100644 index 0000000..d8d8911 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/effect-explosive.png differ diff --git a/docs/03-setup-special-feature/img/freespins/featrue-freespin-in-scenes.png b/docs/03-setup-special-feature/img/freespins/featrue-freespin-in-scenes.png new file mode 100644 index 0000000..fbb764e Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/featrue-freespin-in-scenes.png differ diff --git a/docs/03-setup-special-feature/img/freespins/find-freespin-box.png b/docs/03-setup-special-feature/img/freespins/find-freespin-box.png new file mode 100644 index 0000000..1413aa7 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/find-freespin-box.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-counter-box-common.png b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-common.png new file mode 100644 index 0000000..e431bd6 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-common.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-counter-box-desktop.png b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-desktop.png new file mode 100644 index 0000000..4bb4f74 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-desktop.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-counter-box-mobile.png b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-mobile.png new file mode 100644 index 0000000..38e3111 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-counter-box-mobile.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-prefabs-core.png b/docs/03-setup-special-feature/img/freespins/freespin-prefabs-core.png new file mode 100644 index 0000000..4bd2d78 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-prefabs-core.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-prefabs-game.png b/docs/03-setup-special-feature/img/freespins/freespin-prefabs-game.png new file mode 100644 index 0000000..292aad4 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-prefabs-game.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-sideband.png b/docs/03-setup-special-feature/img/freespins/freespin-sideband.png new file mode 100644 index 0000000..8ccaa52 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-sideband.png differ diff --git a/docs/03-setup-special-feature/img/freespins/freespin-trigger.png b/docs/03-setup-special-feature/img/freespins/freespin-trigger.png new file mode 100644 index 0000000..93d7fab Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/freespin-trigger.png differ diff --git a/docs/03-setup-special-feature/img/freespins/fs-transition.jpg b/docs/03-setup-special-feature/img/freespins/fs-transition.jpg index 2d8ea9c..c291eea 100644 Binary files a/docs/03-setup-special-feature/img/freespins/fs-transition.jpg and b/docs/03-setup-special-feature/img/freespins/fs-transition.jpg differ diff --git a/docs/03-setup-special-feature/img/freespins/game-freespin-box.png b/docs/03-setup-special-feature/img/freespins/game-freespin-box.png new file mode 100644 index 0000000..05e04ec Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/game-freespin-box.png differ diff --git a/docs/03-setup-special-feature/img/freespins/retrigger-freespin.png b/docs/03-setup-special-feature/img/freespins/retrigger-freespin.png new file mode 100644 index 0000000..1bf4e0b Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/retrigger-freespin.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-background-freespin-landscape.png b/docs/03-setup-special-feature/img/freespins/set-background-freespin-landscape.png new file mode 100644 index 0000000..f1d5132 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-background-freespin-landscape.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-background-freespin-portrait.png b/docs/03-setup-special-feature/img/freespins/set-background-freespin-portrait.png new file mode 100644 index 0000000..82a1388 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-background-freespin-portrait.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-background-freespin.png b/docs/03-setup-special-feature/img/freespins/set-background-freespin.png new file mode 100644 index 0000000..b48fcc2 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-background-freespin.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-font-freespin-count-box.png b/docs/03-setup-special-feature/img/freespins/set-font-freespin-count-box.png new file mode 100644 index 0000000..5de3333 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-font-freespin-count-box.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-freespin-win.png b/docs/03-setup-special-feature/img/freespins/set-freespin-win.png new file mode 100644 index 0000000..7081e2a Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-freespin-win.png differ diff --git a/docs/03-setup-special-feature/img/freespins/set-particles-scale.png b/docs/03-setup-special-feature/img/freespins/set-particles-scale.png new file mode 100644 index 0000000..5d962e1 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/set-particles-scale.png differ diff --git a/docs/03-setup-special-feature/img/freespins/setup-transition.png b/docs/03-setup-special-feature/img/freespins/setup-transition.png new file mode 100644 index 0000000..ae631d3 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/setup-transition.png differ diff --git a/docs/03-setup-special-feature/img/freespins/textture-particles.png b/docs/03-setup-special-feature/img/freespins/textture-particles.png new file mode 100644 index 0000000..3c7e546 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/textture-particles.png differ diff --git a/docs/03-setup-special-feature/img/freespins/trigger-freespin-font.png b/docs/03-setup-special-feature/img/freespins/trigger-freespin-font.png new file mode 100644 index 0000000..034bfe4 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/trigger-freespin-font.png differ diff --git a/docs/03-setup-special-feature/img/freespins/trigger-freespin.png b/docs/03-setup-special-feature/img/freespins/trigger-freespin.png new file mode 100644 index 0000000..ca51ac1 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/trigger-freespin.png differ diff --git a/docs/03-setup-special-feature/img/freespins/win-freespin.png b/docs/03-setup-special-feature/img/freespins/win-freespin.png new file mode 100644 index 0000000..a4da082 Binary files /dev/null and b/docs/03-setup-special-feature/img/freespins/win-freespin.png differ