Nguyen Ngoc Thanh 830f82c479 add set up background main game

2025-05-05 15:01:53 +07:00

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.

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

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.

To be Added:

Different UI Layout on Desktop and Mobile

Which helper/p4f menu can be used

Assets
Node Tree and Properties

Animation Provider: We add anim-landscape in desktop assets , it is used for desktop and mobile landscape.

Background Container

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

Assets
Node Tree and Properties

Animation Provider: We add anim-portrait in mobile assets, anim-landscape we still use desktop assets.

Background Container

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