2025-05-07 16:29:33 +07:00

3.8 KiB

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.

Main Scene Wireframe

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 :::

Setup Reel Slot


  1. Prepare the asset for symbols.

    Add Symbol Texture

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

    Sprite Frame Provider

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

    Reel Scroller Helper

    Properties Explaination Example
    Cell Item Script Name The name of the script will be attached to each cell item. cell-item-script-name
    Scroller Script Name the name of the script for handling the spinning logic. scroller
    Row Count x Reel Count the number of Slot Item each row and column in the reel slot panel. reel-row-column
    Cell Size the size of each cells. cell-size
    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
    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
  4. Generate panel using reel-scroller-helper.

    Generate Panel

:::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

  • Present Win Cell Panel:

    Present Win Cell Panel

  • Present Win Border Panel:

    Present Win Border Panel

  • Tension 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.

    Tension Size Custom

Setup UI Panel

To be Added:

  • Different UI Layout on Desktop and Mobile
  • Which helper/p4f menu can be used

Setup Background

To Be Added:

  • show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg.

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