---
sidebar_position: 2
---

# Background

Is the visual scenery that appears behind the gameplay elements.

---

The background consists of 2 parts: **Landscape** and **Portrait**.

- **Landscape** use for Desktop and Mobile landscape.
- **Portrait** only use for Mobile portrait.

| | Desktop | Mobile |
|:-:|--------------|---------|
|**Background Landscape**<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-3.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-1.png)|<br/>![Background Overview Landscape](./img/02-background/bg-overview-landscape-2.png)|
|**Background Portrait**<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-2.png)||<br/>![Background Overview Portrait](./img/02-background/bg-overview-portrait-1.png)|

### 1. Prepare the assets
| | Assets | Description |
|:-:|--------------|---------|
|**Static**<br/>|![Background Prepare Landscape](./img/02-background/bg-prepare-assets-static.png)|Static background is necessary for the game|
|**Animation**<br/>|![Background Prepare Portrait](./img/02-background/bg-prepare-assets-anim.png)|Animation background may or may not be present, depending on the game design|

### 2. Setup Background Landscape
    
    We use sprite frame background for landscape from prepared assets.

    ![Background Setup Landscape](./img/02-background/bg-setup-landscape.png)

### 3. Setup Background Portrait

    We use sprite frame background for mobile from prepared assets.

    ![Background Setup Portrait](./img/02-background/bg-setup-portrait.png)

### 4. Setup Background Animation

If the game have design animation for background, we will do this step.

**Setp 1:** Using hepler to generate animation from prepared assets

    ![Background Setup Helper Anim](./img/02-background/bg-setup-hepler-anim.png)
    ![Background Setup Helper Anim](./img/02-background/bg-setup-anim-provider.png)

**Setp 2:**. Stup 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/02-background/bg-setup-anim-1.png)
    ![Background Setup Animation](./img/02-background/bg-setup-anim-2.png)

**Setp 3:**. Add animation background with components below:

    **Landscape:** 
    - Create `Empty Node` with name `anim-background-main-game`.
    - Add `animation-play-on-enable` with animation name in **Animation Provider**.
    - Add `background-scaler`, used to resize according to screen resolution.

    ![Background Setup Anim Landscape](./img/02-background/bg-setup-anim-landscape.png)

    **Portrait:**
    
    - Create `Empty Node` with name `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.

    ![Background Setup Anim Portrait](./img/02-background/bg-setup-anim-portrait-1.png)

    - Create `Empty Node` with name `anim-background-main-game`.
    - Add `animation-play-on-enable` with animation name in **Animation Provider**.
    - Add `portrait-anim-background-scaler`, used to resize according to screen resolution.

    ![Background Setup Anim Portrait](./img/02-background/bg-setup-anim-portrait-2.png)