dev-public/doc-slot-core-manual
18
0
Fork 0
Code Issues 10 Pull Requests Actions Packages Projects 1 Releases Wiki Activity
doc-slot-core-manual/docs/02-setup-main-game/05-main-scene.md
dungdq cf0d177743 add UI panel desktop
2025-05-05 19:50:19 +07:00

6.8 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.

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

UI Panel Overview

Available Layouts

The UI system supports both desktop and mobile layouts design.

🖥️ Desktop Layout

  • Full bottom bar with all controls visible
  • Horizontal layout maximizing screen width

Desktop UI Layout

📱 Mobile Layout

The mobile interface adapts to both landscape and portrait orientations:

Orientation Preview
Landscape Mobile Landscape
Portrait Mobile Portrait

1️⃣ Add Prefabs For Desktop

Step 1: Setup Prefab Files

  1. Locate Required Prefabs

    • Find ui-bottom-bar-panel prefab
      Locate Prefabs

  2. Copy UI Assets

    • Go to core/editor directory
    • Copy the bottom-ui folder
      Copy UI Folder

  3. Place Assets in Game Directory

    • Paste the copied bottom-ui folder
      Asset Placement

Step 2: Configure Prefabs

  1. Core Prefabs
    Directory Structure

  2. Copied Prefab

At here:

Prefix to Remove Original Prefab Name Final Name
template-new- template-new-ui-bottom-bar-panel ui-bottom-bar-panel
template- template-button-auto-selection button-auto-selection

Prefab Naming Example

Button Auto Selection Label

Use template-label-auto-selection to customize the button-auto-selection:

  • Modify text color
  • Add Label Outline component
  • Add Label Shadow component Label Configuration Options

Ui Bottom Bar Panel Label

Use template-label-title to customize the ui-bottom-bar-panel:
:::tip Detailed configuration the same Button Auto Selection Label ::: Bottom bar labels include a localization component for multi-language support: ![Localization Component

FormatText

The FormatText property controls text formatting behavior for label components:

Property Description Example
default Initial formatting state false
notify Formatting update callback Updates when value changes

Step 3: Apply Textures

  1. Run the Helper Tool

    • Open the UI Desktop Helper
    • Select texture assignment options
      Helper Tool

  2. Verify Results

    Auto Selection Component
    Auto Selection Result

    Bottom Bar Component Bottom Bar Result

:::tip Success Verification ✔️ Check all textures are correctly mapped
✔️ Verify button states display properly
✔️ Confirm UI layout matches design :::

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