Merge remote-tracking branch 'origin/feature/add-set-up-background-main-game' into feature/add-setup-ui-panel-main-game

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

@@ -296,8 +296,78 @@ The `helper-paint-color-ui-mobile.js` component is a customizable color painter
 
 ## Setup Background
 
-> To Be Added: 
+Background overview:
-> - show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg.
+
+| | 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)|
+
+**Background landscape** use for Desktop and Mobile landscape.
+
+**Background portrait** only use for Mobile portrait.
+
+### 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|
+
+### 2. 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.
+
+    ![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