168 lines
5.6 KiB
Markdown
168 lines
5.6 KiB
Markdown
---
|
|
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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
:::
|
|
|
|
## Setup Reel Slot
|
|
|
|
---
|
|
|
|
1. Prepare the asset for symbols.
|
|
|
|
|
|
|
|
2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code.
|
|
|
|
|
|
|
|
3. Config reel slot using `reel-scroller-helper`.
|
|
|
|
|
|
|
|
| Properties | Explaination | Example |
|
|
|------------|--------------|---------|
|
|
|**Cell Item Script Name**|The name of the script will be attached to each cell item.||
|
|
| **Scroller Script Name** | the name of the script for handling the spinning logic.||
|
|
|**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.||
|
|
|**Cell Size**| the size of each cells.||
|
|
|**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.||
|
|
|**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.||
|
|
|
|
4. Generate panel using `reel-scroller-helper`.
|
|
|
|
|
|
|
|
:::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:
|
|
|
|
|
|
|
|
- Present Win Cell Panel:
|
|
|
|
|
|
|
|
- Present Win Cell Panel:
|
|
|
|
|
|
|
|
- Tension Panel:
|
|
|
|
|
|
|
|
If the tension use a custom size frame, we can change the option **sizeMode** to **Custom** and set the static frame and size.
|
|
|
|
|
|
|
|
## Setup UI Panel
|
|
|
|
> To be Added:
|
|
> - Different UI Layout on Desktop and Mobile
|
|
> - Which helper/p4f menu can be used
|
|
|
|
## Setup Background
|
|
### Background Desktop
|
|
1. Prepare for **Background Animation**.
|
|
|
|
- Assets
|
|
|
|
|
|
|
|
|
|
- Node Tree and Properties
|
|
|
|
Animation Provider: We add anim-landscape in desktop assets , it is used for desktop and mobile landscape.
|
|
|
|
|
|
|
|
Background Container
|
|
|
|
|
|
|
|
2. Set up **Background** for **Main Game**.
|
|
|
|
- Static
|
|
|
|
|
|
|
|
If we have animation background, we can remove **Sprite Component** to decrease Drawcall, because we already have static sprite frame on **Spine Animation Component**.
|
|
|
|
- Animation
|
|
|
|
|
|
|
|
### Background Mobile
|
|
1. Prepare for **Background Animation**.
|
|
|
|
- Assets
|
|
|
|
|
|
|
|
|
|
- Node Tree and Properties
|
|
|
|
Animation Provider: We add anim-portrait in mobile assets, anim-landscape we still use desktop assets.
|
|
|
|
|
|
|
|
Background Container
|
|
|
|
|
|
|
|
2. Set up **Background** for **Main Game**.
|
|
|
|
- Static
|
|
|
|
|
|
|
|
If we have animation background, we can remove **Sprite Component** to decrease Drawcall, because we already have static sprite frame on **Spine Animation Component**.
|
|
|
|
- Animation
|
|
|
|
|
|
|
|
|
|
|
|
## 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 |