2025-05-13 13:18:32 +07:00

51 lines
2.4 KiB
Markdown

---
sidebar_position: 2
---
# Set Up Reel Slot
---
### Prepare Assets
Add the symbol textures and reel frame:
|![Add Symbol Texture](../img/05-main-scene/add-symbol-texture.png)|![Add Symbol Texture](../img/05-main-scene/add-reel-frame.png)|
|------------------------------------------------------------------|--------------------------------------------------------------|
### Add symbols to `SpriteFrameProvider`
This allows symbols to be accessed globally from code:
![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider-reel-slot.png)
### Add Reel Frame
|![Sprite Frame Provider](../img/05-main-scene/add-reel-frame-2.png) |![Sprite Frame Provider](../img/05-main-scene/reel-frame.png) |
|--------------------------------------------------------------------|--------------------------------------------------------------|
### Configure the Reel Slot
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.
:::