14 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.
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
UI Panel Overview
The UI system supports both desktop and mobile layouts design.
🖥️ Desktop Layout
- Full bottom bar with all controls visible
- Horizontal layout maximizing screen width
📱 Mobile Layout
The mobile interface adapts to both landscape and portrait orientations:
| Orientation | Preview |
|---|---|
| Landscape |  |
| Portrait |  |
UI Panel Desktop
Step 1: Setup Prefab Editor
| Step | Action | image |
|---|---|---|
| 1. Locate Prefab | Search for ui-bottom-bar-panel prefab |
 |
| 2. Copy Assets | Navigate to core/editor directory |
 |
| 3. Place Assets | Copy / Paste to game assets location |  |
Step 2: Configure Prefabs
Core Prefabs Structure
Navigate to the location where the prefabs:
Rename Prefabs
Rename the copied prefabs by removing unnecessary prefixes:
| 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 |
assets\game-assets\prefabs
Customize button-auto-selection Label
Use the template-label-auto-selection to customize the appearance of the label inside the button-auto-selection prefab.
| Component | Description |
|---|---|
| Label Outline | Add an outline to make the text stand out. |
| Label Shadow | Add a shadow for better contrast and readability. |
| -------------------- | ------------------------------------------------- |
Customize ui-bottom-bar-panel Label
Use template-label-title to customize the ui-bottom-bar-panel:
:::info
Follow the same configuration as Button Auto Selection Labels
Bottom bar labels include a localization component for multi-language support
:::
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: Setup Ui In Main Scenes
Create the following node configuration in your main scene:
Platform Node Spawner Settings
| Setting | Value | Description |
|---|---|---|
| Desktop Toggle | ✓ Enabled | Show prefabs for desktop platform |
| Mobile Toggle | ☐ Disabled | Hide prefabs for mobile platform |
| Target Prefab | ui-bottom-bar-panel |
References prefab |
Step 4: Apply Textures
Texture Button Bar
✅ Checklist assets completed for bottom UI and button UI text
🔗 Follow is by Complete Assets Structure Guide:
Run the Helper Tool
- Open the UI Desktop Helper
- Select texture assignment options
Verify Results
Auto Selection prefab
Bottom Bar prefab
In game
UI Panel Mobile
Step 1: Setup Prefab
| Step | Action | image |
|---|---|---|
| 1. Locate Prefab | Search for mobile-ui prefab |
 |
| 2. Place Assets | Copy to game assets location |  |
| 3. Locate Prefab | Search for buy-feature prefab |
 |
Step 2: Rename Prefabs
Rename the copied prefabs by removing unnecessary prefixes:
| Prefix to Remove | Final Name |
|---|---|
template- |
 |
Step 3: Setup Ui In Main Scenes
Create the following node configuration in your main scene:
Platform Node Spawner Settings
| Setting | Value | Description |
|---|---|---|
| Mobile Toggle | ✓ Enabled | Show prefabs for mobile platform |
| Desktop Toggle | ☐ Disabled | Hide prefabs for desktop platform |
| Target Prefab | mobile-ui |
References prefab |
Step 4: Apply Textures
Texture Mobile Ui
✅ Checklist assets completed for Mobile UI
🔗 Follow is by Complete Assets Structure Guide:
Run the Helper Tool
- Open the UI Mobile Helper
- Select texture assignment options
Results
main ui button added textures
| 
|
Step 4: Setup Color For Menu Mobile UI
Gerenal picker color using helper-paint-color-ui-mobile
 |
 |
|---|
| Ordinal number | Properties | Explaination | Example |
|---|---|---|---|
| 1 | Main Ui Normal Color | pick color: #45AEFF |                  |
| 2 | Main Ui Highlight Color | pick color: #A8CBFF |  |
| 3 | Toggle State Off Color | pick color: #45AEFF |  |
| 4 | Toggle State On Color | pick color: #A8CBFF |  |
| 5 | Background Info Page Color | pick color: #000000 |  |
| 6 | Background Menu Color | pick color: #000000 | |
| 7 | Background Point Panel Color | pick color: #000000 |  |
| 8 | Background Bottom Bar Color | pick color: #FFFFFF |  |
| 9 | Button Quit Color | pick color: #45AEFF |  |
| 10 | Button Cancel Color | pick color: #616160 |  |
| 11 | Label Balance Normal Color | pick color: #7DFFDF |  |
| 12 | Label Balance Spin Color | pick color: #FFFFFF |  |
| 13 | Button Plus Minus Auto Color | pick color: #FFFFFF |  |
| 14 | Label Start Auto Color | pick color: #FFFFFF |  |
| 15 | Label Outline Notification | pick color: #FFFFFF |  |
| 16 | Total Win Medium Win Color | pick color: #FFFFFF |  |
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