diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 93ea210..922782f 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/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: -> - show how many background: desktop, mobile, main game, free game, gamble, reel bg, slot panel bg. +Background overview: + +| | Desktop | Mobile | +|:-:|--------------|---------| +|**Background Landscape**
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-3.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-1.png)|
![Background Overview Landscape](./img/05-main-scene/bg-overview-landscape-2.png)| +|**Background Portrait**
![Background Overview Portrait](./img/05-main-scene/bg-overview-portrait-2.png)||
![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**
|![Background Prepare Landscape](./img/05-main-scene/bg-prepare-assets-static.png)|Static background is necessary for the game| +|**Animation**
|![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 diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png new file mode 100644 index 0000000..19c8867 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png new file mode 100644 index 0000000..596a5c8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png new file mode 100644 index 0000000..4d44bbd Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-landscape-3.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png new file mode 100644 index 0000000..70e5e9c Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-1.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png new file mode 100644 index 0000000..63a9091 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-overview-portrait-2.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png new file mode 100644 index 0000000..6854f0e Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png new file mode 100644 index 0000000..5e1dde3 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-prepare-assets-static.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png new file mode 100644 index 0000000..57e8bd8 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png new file mode 100644 index 0000000..750b465 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-anim-portrait.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png new file mode 100644 index 0000000..bc4aa16 Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-animation.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png new file mode 100644 index 0000000..000181a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-hepler-anim.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png new file mode 100644 index 0000000..6a3480a Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-landscape.png differ diff --git a/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png b/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png new file mode 100644 index 0000000..74e39cd Binary files /dev/null and b/docs/02-setup-main-game/img/05-main-scene/bg-setup-portrait.png differ