update setup background main game

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

@@ -93,67 +93,79 @@ The setup is very straightforward by using the `Generate Panel` command in each
 > - Which helper/p4f menu can be used
 
 ## Setup Background
-### Background Desktop
-1. Prepare for **Background Animation**.
 
-- Assets
+Background overview:
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-1.png)
-    ![Background Landscape](./img/05-main-scene/background-landscape-2.png)
+| | Desktop | Mobile |
+|:-:|--------------|---------|
+|**Background Landscape**<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)|
+|**Background Portrait**<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-1.png)|
 
-- Node Tree and Properties
+**Background landscape** use for Desktop and Mobile landscape.
 
-    Animation Provider: We add anim-landscape in desktop assets , it is used for desktop and mobile landscape.
+**Background portrait** only use for Mobile portrait.
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-4.png)
+### 1. 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|
 
-    Background Container
+### 2. Background Landscape
     
-    ![Background Landscape](./img/05-main-scene/background-landscape-3.png)
+    - **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.
     
-2. Set up  **Background** for **Main Game**.
+    Both must add component **Widget** with the options below to resize with parent node.
 
-- Static
+    ![Background Setup Landscape](./img/05-main-scene/bg-setup-landscape.png)
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-5.png)
+### 3. Background Portrait
     
-    If we have animation background, we can remove **Sprite Component** to decrease Drawcall, because we already have static sprite frame on **Spine Animation Component**.
+    - **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.
 
-- Animation
+    - **mobile-background-main-game:** we use sprite frame from prepared assets. Must add component **Widget** with the options below to resize with parent node.
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-6.png)
+    ![Background Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)
 
-### Background Mobile
-1. Prepare for **Background Animation**.
+### 4. Background Animation
 
-- Assets
+If the game have design animation for background, we will do this step.
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-7.png)
-    ![Background Landscape](./img/05-main-scene/background-landscape-8.png)
+1. Add **animation-provider**: This component contains all **animation** of the game.
 
-- Node Tree and Properties
+2. Using hepler to generate animation.
 
-    Animation Provider: We add anim-portrait in mobile assets, anim-landscape we still use desktop assets.
+    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.png)
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-9.png)
+3. 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 Container
+    ![Background Setup Animation](./img/05-main-scene/bg-setup-animation.png)
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-10.png)
+4. Add animation background with component below:
 
-2. Set up  **Background** for **Main Game**.
+    **Animation background landscape**
     
-- Static
+    - Add **animation-play-on-anable** with animation name in **Animation Provider**.
+    - Add **background-scaler** resize with screen resolution.
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-11.png)
+    ![Background Setup Anim Landscape](./img/05-main-scene/bg-setup-anim-landscape.png)
 
-    If we have animation background, we can remove **Sprite Component** to decrease Drawcall, because we already have static sprite frame on **Spine Animation Component**.
+    **Animation background portrait**
     
-- Animation
+    - **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.
 
-    ![Background Landscape](./img/05-main-scene/background-landscape-12.png)
-    ![Background Landscape](./img/05-main-scene/background-landscape-13.png)
-    ![Background Landscape](./img/05-main-scene/background-landscape-14.png)
+        ![Background Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png)
 
 ## Setup Animation Provider