180 lines
7.2 KiB
Markdown
180 lines
7.2 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 overview:
|
|
|
|
| | Desktop | Mobile |
|
|
|:-:|--------------|---------|
|
|
|**Background Landscape**<br/>|<br/>|<br/>|
|
|
|**Background Portrait**<br/>||<br/>|
|
|
|
|
**Background landscape** use for Desktop and Mobile landscape.
|
|
|
|
**Background portrait** only use for Mobile portrait.
|
|
|
|
### 1. Prepare the assets
|
|
| | Assets | Description |
|
|
|:-:|--------------|---------|
|
|
|**Static**<br/>||Static background is necessary for the game|
|
|
|**Animation**<br/>||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.
|
|
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
|
|
### 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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
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.
|
|
|
|
|
|
|
|
**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.
|
|
|
|
|
|
|
|
## 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 |