Nguyen Ngoc Thanh b994bfb7de update setup background main game

2025-05-07 10:07:40 +07:00

7.2 KiB

Raw Blame History

sidebar_position

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

Prepare the asset for symbols.
Add symbols to SpriteFrameProvider which allows those symbols to be accessed globally from the code.

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.

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
Background Portrait

Background landscape use for Desktop and Mobile landscape.

Background portrait only use for Mobile portrait.

1. Prepare the assets

	Assets	Description
Static		Static background is necessary for the game
Animation		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.

Add animation-provider: This component contains all animation of the game.
Using hepler to generate animation.
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.
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.