diff --git a/docs/03-setup-special-feature/02-free-spin copy.md b/docs/03-setup-special-feature/02-free-spin copy.md deleted file mode 100644 index fef3f93..0000000 --- a/docs/03-setup-special-feature/02-free-spin copy.md +++ /dev/null @@ -1,105 +0,0 @@ ---- -sidebar_position: 2 ---- - -# Free Spins Implementation Guide - -## Overview -The Free Spins feature provides bonus rounds where players: -- Receive complimentary spins -- Can win prizes without additional bets -- Often encounter enhanced winning opportunities - -![Free Spins Overview](./img/freespins/fs-trigger.jpg) - -## Setup Process - -### 1. Asset Configuration - -#### Core Components -Required prefabs from core package: -![Core Assets](./img/freespins/freespin-prefabs-core.png) - -#### Game-Specific Assets -Implementation prefabs: -![Game Assets](./img/freespins/freespin-prefabs-game.png) - -### 2. Background Configuration - -1. **Animation Setup** - ```typescript - // Add to Animation Provider - animationProvider.addAnimation('freespin-background'); - ``` - ![Animation Config](./img/freespins/add-anim-background.png) - -2. **Display Modes** - | Mode | Configuration | - |------|---------------| - | Landscape | ![Landscape](./img/freespins/set-background-freespin-landscape.png) | - | Portrait | ![Portrait](./img/freespins/set-background-freespin-portrait.png) | - -### 3. Feature Implementation - -#### Scene Structure -Required components: -- Trigger Display -- Retrigger Handler -- Win Presentation - -![Scene Components](./img/freespins/featrue-freespin-in-scenes.png) - -#### Component Setup - -1. **Trigger Configuration** - - Add assets: - - Fonts - - Textures - ![Trigger Setup](./img/freespins/trigger-freespin.png) - -2. **Retrigger Configuration** - - Configure display elements - ![Retrigger Setup](./img/freespins/retrigger-freespin.png) - -3. **Win Display** - - Set congratulations assets - ![Win Setup](./img/freespins/win-freespin.png) - -:::tip Configuration Guidelines -Maintain consistency with game design specifications for: -- Font selection -- Visual elements -- Animation timing -::: - -### 4. Optional Enhancements - -#### Sidebands -Classic slot visual enhancement: -```typescript -interface SidebandConfig { - particleEffect: 'particle-free-sideband'; - background: 'sideband-back'; - foreground: 'sideband'; - shine: 'sideband-shine'; - liquid: 'sideband-static'; - indicator: 'indicator-static'; -} -``` -![Sideband Implementation](./img/freespins/freespin-sideband.png) - -#### Transitions -Polish between game states: -1. Configure animation provider -2. Set node mappings -![Transition Config](./img/freespins/setup-transition.png) - -## Implementation Examples - -### Feature Flow -1. **Trigger** - ![Trigger Example](./img/freespins/fs-trigger.jpg) -2. **Active State** - ![Active Example](./img/freespins/fs-scene.jpg) -3. **Completion** - ![Complete Example](./img/freespins/fs-congra.jpg) \ No newline at end of file diff --git a/docs/03-setup-special-feature/02-free-spin.md b/docs/03-setup-special-feature/02-free-spin.md index 96b3cf5..1482c98 100644 --- a/docs/03-setup-special-feature/02-free-spin.md +++ b/docs/03-setup-special-feature/02-free-spin.md @@ -8,7 +8,6 @@ sidebar_position: 2 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 Guide ### Prepare Assets @@ -18,32 +17,11 @@ The **Free Spin (or Free Games) Feature** awards players a set number of spins w | **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 - -#### Step 1: Configure Animation Provider - -- Add Free Spin background animation in **Animation Provider**. - -![Add Animation](./img/freespins/add-anim-background.png) - -#### Step 2: Configure Display - -- **landscape**: - -![Landscape Background](./img/freespins/set-background-freespin-landscape.png) - -- **portrait**: - -![Portrait Background](./img/freespins/set-background-freespin-portrait.png) - -#### Step 3: Asset Example - -![Background Assets](./img/freespins/assets-freespin-background.png) - --- -#### Main Scene Structure Free Spins +### Setup Scene + +#### Structure Free Spins Your scene should include the following nodes: @@ -51,6 +29,8 @@ Your scene should include the following nodes: - **Retrigger** - **Win** +***Example Scene Structure:*** + ![Scene Structure](./img/freespins/featrue-freespin-in-scenes.png) | Property | Description | @@ -61,38 +41,45 @@ Your scene should include the following nodes: | `freeSideBandContainer` | Activates the Free Spins side band visual. | --- - #### Component Configuration -##### Trigger and Retrigger Setup +##### Trigger & Retrigger -Configure animations for both trigger and retrigger. +To configure the Free Spin **trigger** and **retrigger** components, follow these steps: -![content](./img/freespins/add-anim-freespin.png) -![content](./img/freespins/add-anim-content.png) +1. **Add Animations** -| Node Name | Purpose | Location in Core Package | -|-----------| ------------------------------------------------ | ---------------------------------------------------------- | -| `content` | Zoom-in and zoom-out animation | `assets/core-assets/slotty-core/packages/feature-game/animations` | +Include the required animations for both the trigger and retrigger elements. -![config](./img/freespins/freespin-trigger.png) +![Add Animation](./img/freespins/add-anim-freespin.png) +![Add Animation Content](./img/freespins/add-anim-content.png) -| Property | Description | -|------------------------|---------------------------| -| `durationPresentation` | Specifies how long (in seconds) the animation trigger plays before auto-stopping | +| 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 by numbers | `assets/core-assets/hyper-core/packages/explosive/prefabs` | +| Prefab Name | Purpose | Location in Core Package | +|-------------|-------------------------------------------------|-------------------------------------------------------------| +| `explosive` | Background animation effect triggered | `assets/core-assets/hyper-core/packages/explosive/prefabs` | -![particles](./img/freespins/textture-particles.png) -![particles](./img/freespins/set-particles-scale.png) +3. **Configure Particle Effects** -| 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` | +![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**. @@ -124,7 +111,7 @@ Add fonts and textures to show retrigger effect. |-------------------------|-----------------------------------------------------------------------------------------------| | `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` | +| `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. | @@ -143,61 +130,112 @@ Follow the visual and font flow as defined by your game's design system. ::: --- - #### Free Spins 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 appearance in both desktop and mobile modes. | ![mode mobile](./img/freespins/both-mode-mobile.png) | +The **Free Spins Count Box** displays the remaining number of free spins to the player. Follow these steps to set it up: -##### Platform Setup +##### 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 Setup +##### 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 Background | ![common Asset](./img/freespins/freespin-counter-box-common.png) | +| Common | Freespins Box Background | ![Common Asset](./img/freespins/freespin-counter-box-common.png) | -##### Asset Font +##### Font Setup -![common Asset](./img/freespins/set-font-freespin-count-box.png) +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) -- Optional visual element, commonly used in classic or legacy slot designs. +Sidebands are optional visual elements, often used in classic slot game designs. -| Overview | Setup | -|-------------------------------------------|----------------------------------------------| +| 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 | -|------------|----------------------| +| 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` | +| `sideband-back` | `sideband-back` | +| `sideband` | `sideband` | +| `sideband-shine` | `sideband-shine` | +| `sideband-static` | `liquid` | +| `indicator-static` | `indicator-static` | --- #### Transition Effects (Optional) -create new node and add `transition`, `transition-scaler` component. +##### 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) @@ -216,7 +254,6 @@ create new node and add `transition`, `transition-scaler` component. ![Transition Setup](./img/freespins/add-anim-transition.png) - **add preferrence** Configure preferences as needed for your transition. 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 index 3ffb7e9..766f4c6 100644 Binary files a/docs/03-setup-special-feature/img/freespins/add-anim-background.png 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-transition.png b/docs/03-setup-special-feature/img/freespins/add-anim-transition.png index bcc374e..047adf4 100644 Binary files a/docs/03-setup-special-feature/img/freespins/add-anim-transition.png and b/docs/03-setup-special-feature/img/freespins/add-anim-transition.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 index 580b390..03cd362 100644 Binary files a/docs/03-setup-special-feature/img/freespins/assets-freespind-sideband.png and b/docs/03-setup-special-feature/img/freespins/assets-freespind-sideband.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 index fd0ff57..ae631d3 100644 Binary files a/docs/03-setup-special-feature/img/freespins/setup-transition.png and b/docs/03-setup-special-feature/img/freespins/setup-transition.png differ