diff --git a/docs/02-setup-main-game/05-main-scene.md b/docs/02-setup-main-game/05-main-scene.md index 549ca12..18aae91 100644 --- a/docs/02-setup-main-game/05-main-scene.md +++ b/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**
![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)| -- 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**
|![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| - 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 diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-1.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-1.png deleted file mode 100644 index f27fd95..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-1.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-10.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-10.png deleted file mode 100644 index 603e51d..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-10.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-11.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-11.png deleted file mode 100644 index 0d0e221..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-11.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-12.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-12.png deleted file mode 100644 index baa3508..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-12.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-13.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-13.png deleted file mode 100644 index 52747eb..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-13.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-14.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-14.png deleted file mode 100644 index 73486ef..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-14.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-2.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-2.png deleted file mode 100644 index 2bd2b64..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-2.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-3.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-3.png deleted file mode 100644 index 37aa0cb..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-3.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-4.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-4.png deleted file mode 100644 index 0983d75..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-4.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-5.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-5.png deleted file mode 100644 index 42aa817..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-5.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-6.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-6.png deleted file mode 100644 index b358d42..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-6.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-7.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-7.png deleted file mode 100644 index c59f1ca..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-7.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-8.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-8.png deleted file mode 100644 index 06677fd..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-8.png and /dev/null differ diff --git a/docs/02-setup-main-game/img/05-main-scene/background-landscape-9.png b/docs/02-setup-main-game/img/05-main-scene/background-landscape-9.png deleted file mode 100644 index 4881c71..0000000 Binary files a/docs/02-setup-main-game/img/05-main-scene/background-landscape-9.png and /dev/null differ 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