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
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-3.png)
-
-2. Set up  **Background** for **Main Game**.
-
-- Static
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-5.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 Landscape](./img/05-main-scene/background-landscape-6.png)
-
-### Background Mobile
-1. Prepare for **Background Animation**.
-
-- Assets
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-7.png)
-    ![Background Landscape](./img/05-main-scene/background-landscape-8.png)
-
-- Node Tree and Properties
-
-    Animation Provider: We add anim-portrait in mobile assets, anim-landscape we still use desktop assets.
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-9.png)
-
-    Background Container
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-10.png)
-
-2. Set up  **Background** for **Main Game**.
-
-- Static
-
-    ![Background Landscape](./img/05-main-scene/background-landscape-11.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
+### 2. Background Landscape
     
-    ![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-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.
+
+    ![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.
+
+    - **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 Setup Portrait](./img/05-main-scene/bg-setup-portrait.png)
+
+### 4. 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.
+
+    ![Background Setup Helper Anim](./img/05-main-scene/bg-setup-hepler-anim.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 Setup Animation](./img/05-main-scene/bg-setup-animation.png)
+
+4. Add animation background with component below:
+
+    **Animation background landscape**
+    
+    - 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**
+    
+    - **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 Setup Anim Portrait](./img/05-main-scene/bg-setup-anim-portrait.png)
 
 ## Setup Animation Provider