---
sidebar_position: 5
---

# Main Scene

This is where all the magic happen.

---

Main scene is the most complicated scene with hundreds of object, script and config.

![Main Scene Wireframe](./img/05-main-scene/main-scene-wireframe.png)

Yet it is suprisingly simple to use.

By following step by step setup, you'll have a working main scene in no time.

:::info
In fact, if all of the other scenes are setup properly, you can even run test the game without any setup on main scene.

Try to run the project, you'll the result as below. It doesn't look like much but it is actually a game running without visual assets.

![Run Test](./img/05-main-scene/run-test.png)
:::

## Setup Reel Slot

---

1. Prepare the asset for symbols.

    ![Add Symbol Texture](./img/05-main-scene/add-symbol-texture.png)

2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.

    ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png)

3. Config reel slot using `reel-scroller-helper`. 

    ![Reel Scroller Helper](./img/05-main-scene/reel-scroller-helper.png)

    | Properties | Explaination | 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)|

4. Generate panel using `reel-scroller-helper`.

    ![Generate Panel](./img/05-main-scene/generate-panel.png)

:::tip
There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly.
:::

## Setup Spinning Panel

Reel slot panel is just one part one the spinning panel. 

There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**.

The setup is very straightforward by using the `Generate Panel` command in each panel's helper class.

- Landing Panel: 

    ![Landing Panel](./img/05-main-scene/landing-panel.png)

- Present Win Cell Panel:

    ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png)

- Present Win Cell Panel:

    ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png)

- Tension Panel:

    ![Tension Panel](./img/05-main-scene/tension-panel.png)

    If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.

    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)

## Setup UI Panel

> To be Added:
> - Different UI Layout on Desktop and Mobile
> - Which helper/p4f menu can be used

## Setup Background

Background overview:

| | Desktop | Mobile |
|:-:|--------------|---------|
|**Background Landscape**<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)|
|**Background Portrait**<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)|

**Background landscape** use for Desktop and Mobile landscape.

**Background portrait** only use for Mobile portrait.

### 1. Prepare the assets
| | Assets | Description |
|:-:|--------------|---------|
|**Static**<br/>|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game|
|**Animation**<br/>|![Background Prepare Portrait](./img/05-main-scene/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|

### 2. Background Landscape
    
    - **background-container:** must have **orientation-ui-controller** to display on Landscape with the options below.
    - **background-main-game:** we use sprite frame from prepared assets.
    
    Both must add component **Widget** with the options below to resize with parent node.

    ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png)

### 3. Background Portrait
    
    - **moible-background-container:**
        - Add **mobile-portrait-background-ui-controller** to display only on Mobile.
        - Add **background-mobile-portrait-fullscreen-scaler** to resize with screen resolution.
        - Add **orientation-ui-controller** to display on Portrait with the options below.

    - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node.

    ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)

### 4. Background Animation

If the game have design animation for background, we will do this step.

1. Add **animation-provider**: This component contains all **animation** of the game.

2. Using hepler to generate animation.

    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png)

3. We have the result as below, and continue setup for **spine-animation**.
    - **Is Loop**: is ✅ because this animation will play through the game.
    - **Static Sprite Frame**: It will be displayed when the animation has not finished loading.

    ![Background Setup Animation](./img/05-main-scene/bg-setup-animation.png)

4. Add animation background with component below:

    **Animation background landscape**
    
    - Add **animation-play-on-anable** with animation name in **Animation Provider**.
    - Add **background-scaler** resize with screen resolution.

    ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png)

    **Animation background portrait**
    
    - **mobile-background-anim-portrait:**
        - Add **mobile-portrait-background-ui-controller** to display only on **Mobile**.
        - Add **orientation-ui-controller** to display on Portrait with the options below.
    - **anim-background-main-game:**
        - **animation-play-on-anable** with animation name in **Animation Provider**.
        - **portrait-anim-background-scaler** resize with screen resolution.

        ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png)

## Setup Animation Provider

> To Be Added:
> - How to run helper / p4f menu
> - How to setup static frame / fps

## Setup Popup Panel

> To Be Added:
> - Prepare the asset
> - Run helper / p4f menu or setup manually