---
sidebar_position: 5
---

# Win Point on Reel

## Overview

- Displays win points for each payline, including scatter wins.

![Overview](../img/05-main-scene/win-point-on-reel/win-point-overview.png)

## Implementation

### Prepare Asssets

#### In Core

<table>
  <thead>
    <tr>
      <th style={{ width: "300px" }}>Path</th>
      <th style={{ width: "400px" }}>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>assets\core-assets\hyper-core\packages\on-reel-present-win-point\prefab</code></td>
      <td><center>![Core Prefab](../img/05-main-scene/win-point-on-reel/win-point-core.png)</center></td>
    </tr>
  </tbody>
</table>

#### In Game

<table>
  <thead>
    <tr>
      <th style={{ width: "300px" }}>Path</th>
      <th style={{ width: "400px" }}>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>assets\game-assets\prefabs</code></td>
      <td><center>![Copied Prefab](../img/05-main-scene/win-point-on-reel/prefab-on-reel-in-game.png)</center></td>
    </tr>
  </tbody>
</table>

### Setup

#### Steps 1: Add Prefab to Scene

Add the win point on reel prefab to your main scene.

<table>
  <thead>
    <tr>
      <th style={{ width: "300px" }}>Component</th>
      <th style={{ width: "400px" }}>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>on-reel-present-win-point</code></td>
      <td><code>A component to **show/hide** points on reels</code></td>
    </tr>
    <tr>
      <td><code>hyper-present-win-point</code></td>
      <td><code>Manages win point presentation flow</code></td>
    </tr>
  </tbody>
</table>

    ![Overview](../img/05-main-scene/win-point-on-reel/win-point-component.png)

#### Steps 2: Configure Node Targets
Set the target node where each win point label appears and define its size and offset.

    ![Overview](../img/05-main-scene/win-point-on-reel/win-point-node-target-component.png)

<table>
  <thead>
    <tr>
      <th style={{ width: "200px" }}>Property</th>
      <th style={{ width: "100px" }}>Type</th>
      <th style={{ width: "400px" }}>Description</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>labelPosition</code></td>
      <td><code>cc.Vec2</code></td>
      <td>Offset position for the win point label</td>
    </tr>
    <tr>
      <td><code>nodeTarget</code></td>
      <td><code>cc.Node</code></td>
      <td>Target node containing the label</td>
    </tr>
    <tr>
      <td><code>cellItemSize</code></td>
      <td><code>cc.Vec2</code></td>
      <td>Size of each slot cell</td>
    </tr>
    <tr>
      <td><code>defaultFontSize</code></td>
      <td><code>number</code></td>
      <td>Default font size for the label</td>
    </tr>
  </tbody>
</table>

#### Steps 3: Set Up Label Component


![Overview](../img/05-main-scene/win-point-on-reel/win-point-label-component.png)

- **Component**:            
    - Displays win values on the reels.
    - Supports formatted text (number, currency).

- **Custom Font**:                   
    Add a custom font to style the win label.         
<table>
  <thead>
    <tr>
      <th style={{ width: "300px" }}>Path</th>
      <th style={{ width: "400px" }}>Example</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td><code>assets\game-assets\fonts\preloads\main-game\fnt-win-point-on-reel</code></td>
      <td><center>![Overview](../img/05-main-scene/win-point-on-reel/add-font.png)</center></td>
    </tr>
  </tbody>
</table>

:::tip
   - **Position And Size**: Follow Game Design.
:::

 ## Game Result Examples

 ![Overview](../img/05-main-scene/win-point-on-reel/win-point-result.png)|