Merge branch 'develop' into feature/add-setup-popup-panel

# Conflicts:
#	docs/02-setup-main-game/img/05-main-scene/add-reel-frame.png

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

@@ -41,15 +41,20 @@ Try to run the project, you'll the result as below. It doesn't look like much bu
 ## Setup Reel Slot
 ---
 
-1. Prepare the asset for symbols.
+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. Config reel slot using `reel-scroller-helper`. 
+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)
 
@@ -63,7 +68,7 @@ Try to run the project, you'll the result as below. It doesn't look like much bu
     |**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)|
 
-4. Generate panel using `reel-scroller-helper`.
+5. Generate panel using `reel-scroller-helper`.
 
     ![Generate Panel](./img/05-main-scene/generate-panel.png)
 
@@ -81,23 +86,13 @@ The setup is very straightforward by using the `Generate Panel` command in each
 
 - 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'));
-    };
-    ```
-:::
+    ![Landing Panel](./img/05-main-scene/landing-panel.png)
 
 - Present Win Cell Panel:
 
     ![Present Win Cell Panel](./img/05-main-scene/present-win-cell-panel.png)
 
-- Present Win Border Panel:
+- Present Win Cell Panel:
 
     ![Present Win Border Panel](./img/05-main-scene/present-win-border-panel.png)
 
@@ -107,18 +102,7 @@ To define Landing Panel, create the following script:
 
     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'));
-    };
-    ```
-    :::  
-
+    ![Tension Size Custom](./img/05-main-scene/tension-panel-custom.png)
 
 ## Setup UI Panel
 
@@ -211,7 +195,7 @@ The `FormatText` property controls text formatting behavior for label components
 #### Step 3: Setup UI In Main Scenes
 
 Create new node and configuration in your main scene:                    
-![main scenes](./img/05-main-scene/set-positon-bottom-bar.png)    
+![main scenes](./img/05-main-scene/prepare-ui-bottom-bar.png)    
 
 ##### Platform Node Spawner Settings
 
@@ -357,52 +341,45 @@ Background overview:
 
 **Background portrait** only use for Mobile portrait.
 
-### 1. Prepare the assets
+### Prepare the assets
 | | Assets | Description |
 |:-:|--------------|---------|
 |**Static**<br/>|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game|
 |**Animation**<br/>|![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|
 
-### 2. Background Landscape
+### Background Landscape
     
-    - **background-container:** must have **orientation-ui-controller** to display on Landscape with the options below.
-    - **background-main-game:** we use sprite frame from prepared assets.
-    
-    Both must add component **Widget** with the options below to resize with parent node.
+    We use sprite frame background for landscape from prepared assets.
 
     ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png)
 
-### 3. Background Portrait
-    
-    - **moible-background-container:**
-        - Add **mobile-portrait-background-ui-controller** to display only on Mobile.
-        - Add **background-mobile-portrait-fullscreen-scaler** to resize with screen resolution.
-        - Add **orientation-ui-controller** to display on Portrait with the options below.
+### Background Portrait
 
-    - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node.
+    We use sprite frame background for mobile from prepared assets.
 
     ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)
 
-### 4. Background Animation
+### Background Animation
 
 If the game have design animation for background, we will do this step.
 
-1. Add **animation-provider**: This component contains all **animation** of the game.
-
-2. Using hepler to generate animation.
+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)
 
-3. We have the result as below, and continue setup for **spine-animation**.
+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-animation.png)
+    ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-1.png)
+    ![Background Setup Animation](./img/05-main-scene/bg-setup-anim-2.png)
 
-4. Add animation background with component below:
+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.
 
@@ -410,14 +387,17 @@ If the game have design animation for background, we will do this step.
 
     **Animation background portrait**
     
-    - **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.
-    - **anim-background-main-game:**
-        - **animation-play-on-anable** with animation name in **Animation Provider**.
-        - **portrait-anim-background-scaler** resize with screen resolution.
+    - 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.png)
+    ![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