diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md deleted file mode 100644 index 3410b93..0000000 --- a/docs/02-setup-main-game/05-main-scene.md +++ /dev/null @@ -1,598 +0,0 @@ ---- -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](./img/05-main-scene/main-scene-wireframe.png) - -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](./img/05-main-scene/run-test.png) -::: - -## Setup SpriteFrame Provider ---- - - **SpriteFrameProvider** allows global access to "sprite frames" from code. - - ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png) - -## Setup Animation Provider ---- - - **Animation Provider** contains all **animations** of the game. - - ![Aniamtion Provider](./img/05-main-scene/animation-provider.png) - -## Setup Reel Slot ---- - -1. Prepare the asset for symbols and reel frame. - - ![Add Symbol Texture](./img/05-main-scene/add-symbol-texture.png) - ![Add Symbol Texture](./img/05-main-scene/add-reel-frame.png) - -2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code. - - ![Sprite Frame Provider](./img/05-main-scene/sprite-frame-provider.png) - -3. Add reel frame. - - ![Sprite Frame Provider](./img/05-main-scene/add-reel-frame-2.png) ![Sprite Frame Provider](./img/05-main-scene/reel-frame.png) - -4. Config reel slot using `reel-scroller-helper`. - - ![Reel Scroller Helper](./img/05-main-scene/reel-scroller-helper.png) - - | Properties | Explaination | Example | - |------------|--------------|---------| - |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](./img/05-main-scene/hyper-cell-item.png)| - | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](./img/05-main-scene/scroller.png)| - |**Row Count x Reel Count**| the number of Slot Item each row and column in the reel slot panel.|![reel-row-column](./img/05-main-scene/reel-row-column.png)| - |**Cell Size**| the size of each cells.|![cell-size](./img/05-main-scene/cell-size.png)| - |**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](./img/05-main-scene/dim-cell-color.png)| - |**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](./img/05-main-scene/cell-top-bottom.png)| - -5. Generate panel using `reel-scroller-helper`. - - ![Generate Panel](./img/05-main-scene/generate-panel.png) - -:::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](./img/05-main-scene/landing-panel.png) - -To define Landing Panel, create the following script: - -:::warning - ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" - SlottySetting.prototype._registerInjection = function () { - DIContainer.Register('landingGenerator', require('landing-generator')); - }; - ``` -::: - -- Present Win Cell Panel: - - ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png) - -- Present Win Cell Panel: - - ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png) - -- Tension Panel: - - ![Tension Panel](./img/05-main-scene/tension-panel.png) - - 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](./img/05-main-scene/tension-panel-custom.png) - **check toggle General Panel** - ![Tension Size Custom](./img/05-main-scene/note-bug-tension.png) - To define Tension Panel, create the following script: - :::warning - ```jsx title="assets/game-assets/scripts/slotty-settings/extend-slotty-setting.js" - SlottySetting.prototype._registerInjection = function () { - DIContainer.Register('tensionGenerator', require('tension-generator')); - }; - ``` - ::: - - -## 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 - -![Desktop UI Layout](./img/05-main-scene/bottom-ui-desktop.png) - -#### 📱 Mobile Layout -The mobile interface adapts to both landscape and portrait orientations: - -| Orientation | Preview | -|-------------|----------| -| Landscape | ![Mobile Landscape](./img/05-main-scene/menu-landscape.png) | -| Portrait | ![Mobile Portrait](./img/05-main-scene/menu-portrait.png) | - - -### UI Sideband -> To Be Added: -> - Prepare the asset -> - Run helper / p4f menu or setup manually -### UI Bottom Bar Desktop - -#### Step 1: Setup Prefab Editor - -| Step | Action | image | -|------|---------|--------------| -| 1. Locate Prefab | Search for `ui-bottom-bar-panel` prefab | ![Locate Prefabs](./img/05-main-scene/add-texture-bottom-bar-prefab.png) | -| 2. Find Assets | Navigate to `core/editor` directory | ![Copy UI Folder](./img/05-main-scene/add-texture-label-prefab.png) | -| 3. Clone Assets | Copy / Paste to game assets location | ![Asset Placement](./img/05-main-scene/editor-texture-label-prefab.png) | - ---- - -#### Step 2: Configure Prefabs - -##### Core Prefabs Structure -Navigate to the location where the prefabs: `assets\core-assets\hyper-core\packages\ui\desktop-ui\prefabs\` -![Directory Structure](./img/05-main-scene/add-texture-bottom-bar-prefab2.png) - -##### 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` | - - -```jsx title="The folder structure is as follows:" - assets\game-assets\prefabs -``` - - -![Prefab Naming Example](./img/05-main-scene/rename-prefab.png) - -#### Customize *`button-auto-selection`* Label - -**Follow Design:** -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. | -| -------------------- | ------------------------------------------------- | - -![Label Configuration Options](./img/05-main-scene/option-for-label.png) - -#### Customize *`ui-bottom-bar-panel`* Label -Use `assets\game-assets\editor\bottom-ui\template-label-title` to customize the `ui-bottom-bar-panel`: -:::info -🔗*[Follow the same configuration as Button Auto Selection Labels](#customize-button-auto-selection-label)* -**Bottom bar labels include a localization component for multi-language support** -::: - -![component-locale](./img/05-main-scene/component-locale.png) - -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 new node and configuration in your main scene: -![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) - -##### 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 -:::info -🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure) -::: - ![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png) - -##### Run the Helper Tool - -To configure the bottom bar UI helper. -:::info -🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#ui-bottom-bar-desktop-editor) -::: - ---- - -### UI Panel Mobile - -#### Step 1: Setup Prefab - -| Step | Action | Description | Image Reference | -| ---- | --------------------------- | ----------------------------------------------- | ------------------------------------------------------------------- | -| 1 | Locate `mobile-ui` Prefab | Search for the `mobile-ui` prefab | ![Locate Prefabs](./img/05-main-scene/search-mobile-ui.png) | -| 2 | Clone Assets | Copy the required assets | ![Asset Placement](./img/05-main-scene/mobile-ui-prefab.png) | -| 3 | Paste Assets | Paste into: `assets/game-assets/prefabs/mobile` | - | -| 4 | Locate `buy-feature` Prefab | Search for the `buy-feature` prefab | ![Locate Prefabs](./img/05-main-scene/buy-feature-bonus-mobile.png) | -| 5 | Paste Prefab | Paste into: `assets/game-assets/prefabs/mobile` | - | - - -:::tip File Structure -Maintain this directory structure for proper prefab references: -``` -assets/ -└── game-assets/ - └── prefabs/ - └── mobile/ - ├── Exp: mobile-ui.prefab - └── Exp: buy-feature.prefab -``` -::: - -#### Step 2: Rename Prefabs - -Rename the copied prefabs by removing unnecessary prefixes: -| Prefix to Remove | Final Name | -|------------------|----------------------| -| `template-` |![Prefab Naming Example](./img/05-main-scene/result-rename-mobile.png) | - -#### Step 3: Setup Ui In Main Scenes - -Create new node and configuration in your main scene: -![main scenes](./img/05-main-scene/set-positon-mobile-ui.png) - -##### 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 - -:::info -🔗 [Click here to follow the setup pack assets](http://localhost:3000/docs/category/game-asset-structure) -::: - ![main scenes](./img/05-main-scene/add-texture-mobile-ui.png) - -##### Run the Helper Tool - -To configure the mobile UI helper. -:::info -🔗 [Click here to follow run helper](http://localhost:3000/docs/submodule/hyper-editor-package#mobile-ui-helper) -::: - - - -#### Step 4: Setup Color For Menu Mobile UI - -**Follow Design:** - -| ![Auto Selection Result](./img/05-main-scene/menu-landscape.png)| ![Auto Selection Result](./img/05-main-scene/menu-portrait.png) | -|---------|-------| - -##### Overview -The `helper-paint-color-ui-mobile.js` component is a customizable color painter for various UI elements in a MOBILE UI. It allows designers and developers to easily apply theme-based colors across the game interface. - -![Auto Selection Result](./img/05-main-scene/set-color-menu-ui.png) - -|Ordinal number| Properties | Explaination | Example | -|--------------|------------|--------------|---------| -|0 |**paintColor** |Trigger to repaint UI components | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paint-color-trigger.png)| -|1 | **Main Ui Normal Color** |Default color of UI elements | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/buy.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/close.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/tru.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cong.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/auto.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/balance2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/setting.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/paytable.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/rule.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/cheat.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button-exit.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle1.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle2.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/icon-toggle3.png) | -|2 | **Main Ui Highlight Color** | Highlight color for selected UI elements | ![Auto Selection Result](./img/05-main-scene/main-ui-highlight-color.png)![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | -|3 | **Toggle State Off Color** | Color of toggle when off | ![Auto Selection Result](./img/05-main-scene/toggle-off.png) | -|4 | **Toggle State On Color** | Color of toggle when on | ![Auto Selection Result](./img/05-main-scene/toggle-on.png) | -|5 | **Background Info Page Color** | Info screen background | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-info.png)| -|6 | **Background Menu Color** | Menu background color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-menu.png) | -|7 | **Background Point Panel Color** | Background panel for point/balance UI | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-win-point.png) | -|8 | **Background Bottom Bar Color** | Background bottom bar (show only mobile portrait) | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/background-bottom-bar.png) | -|9 | **Button Quit Color** | Quit button color | ![Auto Selection Result](./img/05-main-scene/btn-quit-game.png) | -|10 | **Button Cancel Color** | Cancel button color | ![Auto Selection Result](./img/05-main-scene/btn-cancel-game.png) |1 -|11 | **Label Balance Normal Color** | Normal balance label color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-color.png) | -|12 | **Label Balance Spin Color** | During-spin label color | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/spin-point-color.png) | -|13 | **Button Plus Minus Auto Color** | Button plus/Minus autoplay | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/btn-plus-minus-auto.png) | -|14 | **Label Start Auto Color** | Start autoplay label | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/button%20start.png) | -|15 | **Label Outline Notification** | Outline color + width config | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/outline-notifcation.png) | -|16 | **Total Win Medium Win Color** | Color for label medium win | ![Auto Selection Result](./img/05-main-scene/image-for-mobile-ui-helper/win-point-special-color.png) | - ---- - -## Setup Background - -Background overview: - -| | Desktop | Mobile | -|:-:|--------------|---------| -|**Background Landscape**
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)| -|**Background Portrait**
![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||
![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)| - -**Background landscape** use for Desktop and Mobile landscape. - -**Background portrait** only use for Mobile portrait. - -### Prepare the assets -| | Assets | Description | -|:-:|--------------|---------| -|**Static**
|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game| -|**Animation**
|![Background Prepare Portrait](./img/05-main-scene/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design| - -### Background Landscape - - We use sprite frame background for landscape from prepared assets. - - ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png) - -### Background Portrait - - We use sprite frame background for mobile from prepared assets. - - ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png) - -### Background Animation - -If the game have design animation for background, we will do this step. - -1. Using hepler to generate animation from prepared assets - - ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png) - ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-anim-provider.png) - -2. 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. - - ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-1.png) - ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-2.png) - -3. Add animation background with component below: - - **Animation background landscape** - - - Create **Empty Node** with name **anim-background-main-game**. - - Add **animation-play-on-anable** with animation name in **Animation Provider**. - - Add **background-scaler** resize with screen resolution. - - ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png) - - **Animation background portrait** - - - Create **Empty Node** with name **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. - - ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-1.png) - - - Create **Empty Node** with name **anim-background-main-game**. - - Add **animation-play-on-anable** with animation name in **Animation Provider**. - - Add **portrait-anim-background-scaler** resize with screen resolution. - - ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait-2.png) - -## Setup Popup Panel - -### Overview - -A popup is a temporary UI element that overlays the main content to provide additional information or options to the user. - -|![Popup overview exit](./img/05-main-scene/popup-disconnet.png)|![Popup overview disconnect](./img/05-main-scene/popup-exit-game.png)|![Popup overview disconnect](./img/05-main-scene/popup-credit-game.png)| -|---------------------------------------------------------------|---------------------------------------------------------------------|---------------------------------------------------------------------| - - -### Popup in the Game -The popup panel is already integrated into the main scenes `template-main-game`. - -![Popup In Game](./img/05-main-scene/popup-panel-in-game.png) - -#### Detail configuring: - -##### Multiple Popup Panel: - -:::info -![Popup Position](./img/05-main-scene/popup-multi.png) - -To use the Multiple Popup layout, reference target `hyper-multiple-popup.prefab` in core: - -**Path** : *assets/core-assets/hyper-core/packages/popup-panel/prefabs/hyper-multiple-popup.prefab* -::: - -##### Manual Popup Panel: - -:::info -- This popup is self-configured using shared textures and layout structure. -- The color theme and style may vary depending on the game design. -- Note: **Exit Game** Popup only in **Desktop**. -::: - -##### Assets pack: - -- *Prepare asset to pack*. - -🔗 Click here to follow the setup pack assets: [Here](http://localhost:3000/docs/category/game-asset-structure) - -| Path | Example | -|-------------------------------------------------------------|-------------------------------------------------------------------| -|`assets\game-assets\textures\desktop\preloads\main-game\exit`|![Exit Game Popup In Game](./img/05-main-scene/exit-popup-game.png)| - -- Structure prefabs: - -![Exit Game Popup In Game](./img/05-main-scene/popup-exit-in-game.png) - -- Manually drag and drop the image onto the node: - -![Exit Game Popup In Game](./img/05-main-scene/popup-draw.png) - -**Preview Result**: -![Popup overview exit](./img/05-main-scene/popup-exit-game.png) - ---- - -## Game Logo Setup Guide - -### Overview -The game logo is a crucial branding element that must be consistently displayed across all platforms and orientations. - -| Platform | Orientation | Preview | -|----------|------------|----------| -| Desktop | Standard | ![Desktop View](./img/05-main-scene/logo-overview-desktop.png) | -| Mobile | Landscape | ![Landscape View](./img/05-main-scene/logo-overview.png) | -| Mobile | Portrait | ![Portrait View](./img/05-main-scene/logo-overview-portrait.png) | - -### Logo Configuration - -#### 1. Core Setup -Location: `assets\core-assets\hyper-core\packages\hyper-logo-animation` - -```typescript -// filepath: assets\core-assets\hyper-core\packages\logo-animation\hyper-logo-animation.js -onLoad: function () { - var self = this; - // Initialize animation states - self.animPlay = AnimationProvider.Instance.GetAnimation('anim-logo-play'); - self.animIdle = AnimationProvider.Instance.GetAnimation('anim-logo-idle'); -} -``` - -#### 2. Required Assets - -##### Static Assets -| Platform | Location | Preview | -|----------|----------|---------| -| Desktop | `assets\game-assets\textures\desktop\preloads\main-game\custom-scale` | ![Desktop](./img/05-main-scene/logo-static-desktop.png) | -| Mobile | `assets\game-assets\textures\mobile\preloads\main-game\custom-scale` | ![Mobile](./img/05-main-scene/logo-static-mobile.png) | - -##### Animation Assets -| Platform | Location | Preview | -|----------|----------|---------| -| Desktop | `assets\game-assets\textures\desktop\postloads\main-game\animations` | ![Desktop Anim](./img/05-main-scene/logo-anim-desktop.png) | -| Mobile | `assets\game-assets\textures\mobile\postloads\main-game\animations` | ![Mobile Anim](./img/05-main-scene/logo-anim-mobile.png) | - -#### 3. Animation Settings -1. Configure Provider - - ![Provider Setup](./img/05-main-scene/logo-anim-provider.png) - -2. Setup States - - - In `anim-logo-play` and `anim-logo-idle`,Enable static frame for loading state: - - ![Provider Setup](./img/05-main-scene/logo-static-in-anim.png) - - - Configure continuous loop playback: - - ![Provider Setup](./img/05-main-scene/logo-anim-loop.png) - -### Platform Setup - -#### Desktop Configuration - -1. Base Settings - - ![Desktop Settings](./img/05-main-scene/logo-setting-desktop.png) - -🔗 Click [Here](#platform-node-spawner-settings) to follow `platform-ui-controller` - -2. Node Setup - ```typescript - Components: { - animation: 'hyper-logo-animation', - } - ``` - ![Desktop Setup](./img/05-main-scene/logo-script-desktop.png) - -:::tip - - **Position And Size**: Follow Game Design. -::: - -#### Mobile Configuration - -##### Landscape Mode - -1. Node Setup - - | Component | Description | - |-------------------------------------------|--------------------------------------------------| - | `hyper-logo-animation` | Plays and manages the logo animation | - | `node-position-by-jackpot` | Moves the logo based on the jackpot display state | - | `landscape-logo-spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0**) | - - ![Landscape Setup](./img/05-main-scene/logo-mobile-landcape.png) - -##### Portrait Mode - -1. Node Setup - - | Component | Description | - |----------------------------|--------------------------------------------------| - | `hyper-logo-animation` | Plays and manages the logo animation | - | `node-position-by-jackpot` | Moves the logo based on the jackpot display state | - | `spine-aspect-ratio-keeper`| Keeps the logo size consistent on all screens (**Exp: 1.0** ) | - - ![Portrait Setup](./img/05-main-scene/logo-mobile-portrait.png) - -2. Position Settings - - | State | Position | Example | - |-------|----------|---------| - | Jackpot Active | Upper position | ![Active](./img/05-main-scene/logo-portrait-jackpot.png) | - | Jackpot Inactive | Default position | ![Inactive](./img/05-main-scene/logo-portrait-no-jackpot.png) | - -3. Size Settings - - Using componet `spine-aspect-ratio-keeper` : - - ![Portrait Logo Configuration](./img/05-main-scene/logo-center-align.png) - - | Setting | Description | Default Value | - | ----------------- | -------------------------------------------- | --------------------- | - | **Default Scale** | Initial scale factor applied to the node | Configurable per game (**Exp: 1.0**) | - | **Default Size** | Base width and height used for scaling logic | Configurable per game (**Exp: 1050 x 1680**) | - -:::tip -- Check static logo display under slow network conditions. -::: \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/01-system.md b/docs/02-setup-main-game/05-main-scene/01-system.md index a779ce2..97bb9f5 100644 --- a/docs/02-setup-main-game/05-main-scene/01-system.md +++ b/docs/02-setup-main-game/05-main-scene/01-system.md @@ -5,4 +5,16 @@ sidebar_position: 1 # System --- -> To be added \ No newline at end of file +## Sprite Frame Provider Setup + +**SpriteFrameProvider** gives global access to **sprite frames** from anywhere in the codebase. + +![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider.png) + +--- + +## Animation Provider Setup + +The **Animation Provider** manages and exposes all game-related **animation assets** globally. + +![Aniamtion Provider](../img/05-main-scene/animation-provider.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md index e93db36..dce226d 100644 --- a/docs/02-setup-main-game/05-main-scene/03-reel-slot.md +++ b/docs/02-setup-main-game/05-main-scene/03-reel-slot.md @@ -5,24 +5,31 @@ sidebar_position: 2 # Set Up Reel Slot --- -1. Prepare the asset for symbols and reel frame. +### Prepare Assets + + Add the symbol textures and reel frame: - ![Add Symbol Texture](../img/05-main-scene/add-symbol-texture.png) - ![Add Symbol Texture](../img/05-main-scene/add-reel-frame.png) + |![Add Symbol Texture](../img/05-main-scene/add-symbol-texture.png)|![Add Symbol Texture](../img/05-main-scene/add-reel-frame.png)| + |------------------------------------------------------------------|--------------------------------------------------------------| -2. Add symbols to **SpriteFrameProvider** which allows those symbols to be accessed globally from the code. +### Add symbols to `SpriteFrameProvider` - ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider.png) + This allows symbols to be accessed globally from code: -3. Add reel frame. + ![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider-reel-slot.png) - ![Sprite Frame Provider](../img/05-main-scene/add-reel-frame-2.png) ![Sprite Frame Provider](../img/05-main-scene/reel-frame.png) +### Add Reel Frame -4. Config reel slot using `reel-scroller-helper`. + |![Sprite Frame Provider](../img/05-main-scene/add-reel-frame-2.png) |![Sprite Frame Provider](../img/05-main-scene/reel-frame.png) | + |--------------------------------------------------------------------|--------------------------------------------------------------| + +### Configure the Reel Slot + +Use `reel-scroller-helper` to configure spinning behavior: ![Reel Scroller Helper](../img/05-main-scene/reel-scroller-helper.png) - | Properties | Explaination | Example | + | Properties | Description | Example | |------------|--------------|---------| |**Cell Item Script Name**|The name of the script will be attached to each cell item.|![cell-item-script-name](../img/05-main-scene/hyper-cell-item.png)| | **Scroller Script Name** | the name of the script for handling the spinning logic.|![scroller](../img/05-main-scene/scroller.png)| @@ -32,10 +39,12 @@ sidebar_position: 2 |**Cell Dim Color**| set the dark color for the non-win cells when showing winning animation for each line.|![dim-cell-color](../img/05-main-scene/dim-cell-color.png)| |**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](../img/05-main-scene/cell-top-bottom.png)| -5. Generate panel using `reel-scroller-helper`. +### Generate Reel Panel + + Use `reel-scroller-helper` to auto-generate the full panel: ![Generate Panel](../img/05-main-scene/generate-panel.png) :::tip -There is a popup panel covering the entire game scene. You should turn off this panel to see the other component clearly. +A popup may be covering the scene. Disable it temporarily to clearly view and edit the reel slot components. ::: diff --git a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md index ebf225e..8ac0d05 100644 --- a/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md +++ b/docs/02-setup-main-game/05-main-scene/04-spinning-panel.md @@ -7,11 +7,18 @@ sidebar_position: 4 ## Overview -Reel slot panel is just one part one the spinning panel. +The **reel slot panel** is just one part of the overall **spinning panel** system. -There are other panels that need to be setup: **landing-panel**, **tension-panel**, **present-win-cell-panel** and **present-win-border-panel**. +Other required panels include: -The setup is very straightforward by using the `Generate Panel` command in each panel's helper class. +- `landing-panel` +- `tension-panel` +- `present-win-cell-panel` +- `present-win-border-panel` + +Each panel can be quickly set up using the **Generate Panel** function from its helper script. + +--- ## Set Up Panel diff --git a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md b/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md deleted file mode 100644 index f9c7c7e..0000000 --- a/docs/02-setup-main-game/05-main-scene/14-setup-sprite-frame-provider.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_position: 14 ---- - -# Sprite Frame Provider Setup ---- -**SpriteFrameProvider** allows global access to "sprite frames" from code. - -![Sprite Frame Provider](../img/05-main-scene/sprite-frame-provider.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md b/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md deleted file mode 100644 index 5a5374f..0000000 --- a/docs/02-setup-main-game/05-main-scene/15-setup-animation-provider.md +++ /dev/null @@ -1,9 +0,0 @@ ---- -sidebar_position: 15 ---- - -# Set Up the Animation Provider ---- -**Animation Provider** contains all **animations** of the game. - -![Aniamtion Provider](../img/05-main-scene/animation-provider.png) \ No newline at end of file diff --git a/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx b/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx index 49e4f47..1ca9191 100644 --- a/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx +++ b/docs/02-setup-main-game/05-main-scene/main-scene-overview.mdx @@ -6,23 +6,22 @@ description: Main scene structure and setup process. # Main Scene -This is where all the magic happen. +This is where all the magic happens. --- -Main scene is the most complicated scene with hundreds of object, script and config. +The **Main Scene** is the most complex scene in the project, containing **hundreds of objects, scripts, and configurations**. ![Main Scene Wireframe](../img/05-main-scene/main-scene-wireframe.png) -Yet it is suprisingly simple to use. +Yet, it is surprisingly simple to use. -By following step by step setup, you'll have a working main scene in no time. +By following the step-by-step setup, you'll have a fully 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. +In fact, if all the other scenes are set up correctly, you can even test the game without configuring the 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. +Try running the project - the result might look minimal, but it's actually the full game logic running without any visual assets. ![Run Test](../img/05-main-scene/run-test.png) ::: - diff --git a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png index 6977e6f..4650176 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/animation-provider.png and b/docs/02-setup-main-game/img/05-main-scene/animation-provider.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png b/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png index b6ea223..e011c23 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png and b/docs/02-setup-main-game/img/05-main-scene/main-scene-wireframe.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png b/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png index ee0fe1b..6653686 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png and b/docs/02-setup-main-game/img/05-main-scene/reel-scroller-helper.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png new file mode 100644 index 0000000..30108c8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider-reel-slot.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png index b680feb..0568d60 100644 Binary files a/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png and b/docs/02-setup-main-game/img/05-main-scene/sprite-frame-provider.png differ