add setup main scene

docs/02-setup-main-game/05-main-scene/01-system.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 1
+---
+
+# System
+
+> To be added
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/02-background.md

@@ -0,0 +1,76 @@
+---
+sidebar_position: 2
+---
+
+# Background
+
+Is the visual scenery that appears behind the gameplay elements.
+
+---
+
+The background consists of 2 parts: **Landscape** and **Portrait**.
+
+- **Landscape** use for Desktop and Mobile landscape.
+- **Portrait** only use for Mobile portrait.
+
+| | Desktop | Mobile |
+|:-:|--------------|---------|
+|**Background Landscape**<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-2.png)|
+|**Background Portrait**<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-1.png)|
+
+### 1. Prepare the assets
+| | Assets | Description |
+|:-:|--------------|---------|
+|**Static**<br/>|![Background Prepare Landscape](./img/02-background/bg-prepare-assets-static.png)|Static background is necessary for the game|
+|**Animation**<br/>|![Background Prepare Portrait](./img/02-background/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|
+
+### 2. Setup Background Landscape
+    
+    We use sprite frame background for landscape from prepared assets.
+
+    ![Background Setup Landscape](./img/02-background/bg-setup-landscape.png)
+
+### 3. Setup Background Portrait
+
+    We use sprite frame background for mobile from prepared assets.
+
+    ![Background Setup Portrait](./img/02-background/bg-setup-portrait.png)
+
+### 4. Setup Background Animation
+
+If the game have design animation for background, we will do this step.
+
+**Setp 1:** Using hepler to generate animation from prepared assets
+
+    ![Background Setup Helper Anim](./img/02-background/bg-setup-hepler-anim.png)
+    ![Background Setup Helper Anim](./img/02-background/bg-setup-anim-provider.png)
+
+**Setp 2:**. Stup 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/02-background/bg-setup-anim-1.png)
+    ![Background Setup Animation](./img/02-background/bg-setup-anim-2.png)
+
+**Setp 3:**. Add animation background with components below:
+
+    **Landscape:** 
+    - Create `Empty Node` with name `anim-background-main-game`.
+    - Add `animation-play-on-enable` with animation name in **Animation Provider**.
+    - Add `background-scaler`, used to resize according to screen resolution.
+
+    ![Background Setup Anim Landscape](./img/02-background/bg-setup-anim-landscape.png)
+
+    **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/02-background/bg-setup-anim-portrait-1.png)
+
+    - Create `Empty Node` with name `anim-background-main-game`.
+    - Add `animation-play-on-enable` with animation name in **Animation Provider**.
+    - Add `portrait-anim-background-scaler`, used to resize according to screen resolution.
+
+    ![Background Setup Anim Portrait](./img/02-background/bg-setup-anim-portrait-2.png)

docs/02-setup-main-game/05-main-scene/03-reel-slot.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 2
+---
+
+# Reel Slot
+
+> To be added
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/04-spinning-panel.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 4
+---
+
+# Spinning Panel
+
+> To be added
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/05-present-win.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 5
+---
+
+# Prensent Win
+
+> To be added
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/06-special-win.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 6
+---
+
+# Special Win
+
+Is a game mechanic that allows players to earn significantly higher rewards than usual, typically triggered by rare or specific conditions during gameplay.
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/07-item-description.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 7
+---
+
+# Item Description
+
+> To be Add
+
+---
+
+> To be Add

docs/02-setup-main-game/05-main-scene/08-free-round.md

@@ -0,0 +1,11 @@
+---
+sidebar_position: 8
+---
+
+# Free Round
+
+> To be added
+
+---
+
+> To be added

docs/02-setup-main-game/05-main-scene/09-info-page.md

@@ -0,0 +1,31 @@
+---
+sidebar_position: 9
+---
+
+# Info Page
+
+Info Page (Information Page) provides players with essential details about how the game works. It helps players understand the rules, features, symbols, payout structures, and other gameplay mechanics.
+
+---
+
+## Paytable
+
+Shows the value of each symbol and how much players can win from different combinations.
+
+## Special Feature
+
+Describes bonus rounds, free spins, jackpots, or other special win features.
+
+## Gamble Feature
+
+The Gamble Feature is a special option that allows players to risk their recent winnings for a chance to multiply them. 
+
+## Game Rules
+
+Explains the basic mechanics and objectives of the game.
+
+## Winning Lines or Ways
+
+This section shows the valid winning combinations or paylines.
+
+> To be added

docs/02-setup-main-game/05-main-scene/_category_.json

@@ -0,0 +1,17 @@
+{
+    "position": 11,
+    "label": "Main Scene",
+    "collapsible": true,
+    "collapsed": false,
+    "link": {
+        "type": "generated-index",
+        "title": "Setup Main Game",
+        "description": "This is where all the magic happen.",
+        "keywords": [
+            "setup",
+            "main game",
+            "game logic",
+            "structure"
+        ]
+    }
+}