---
sidebar_position: 2
---

# Background Setup

## Overview
The background serves as the visual scenery behind gameplay elements, supporting both **Landscape** (Desktop and Mobile) and **Portrait** (Mobile only) orientations.

| Orientation | Desktop | Mobile |
|-------------|---------|--------|
| **Landscape** | ![Background Landscape](./img/02-background/bg-overview-landscape-1.png) | ![Background Landscape](./img/02-background/bg-overview-landscape-2.png) |
| **Portrait** | ![Background Portrait](./img/02-background/bg-overview-portrait-2.png) | ![Background Portrait](./img/02-background/bg-overview-portrait-1.png) |

## Asset Preparation
| Type | Assets | Description |
|------|--------|-------------|
| **Static** | ![Static Background](./img/02-background/bg-prepare-assets-static.png) | Required for all games. |
| **Animation** | ![Animated Background](./img/02-background/bg-prepare-assets-anim.png) | Optional, depending on game design. |

## Setup Steps
1. **Landscape Background**:
   - Use the prepared sprite frame for the landscape background.
   - ![Landscape Setup](./img/02-background/bg-setup-landscape.png)

2. **Portrait Background**:
   - Use the prepared sprite frame for the mobile portrait background.
   - ![Portrait Setup](./img/02-background/bg-setup-portrait.png)

3. **Animated Background** (if applicable):
   - **Step 1**: Use the helper tool to generate animations from prepared assets.
     - ![Helper Animation](./img/02-background/bg-setup-hepler-anim.png)
     - ![Animation Provider](./img/02-background/bg-setup-anim-provider.png)
   - **Step 2**: Configure spine animation settings:
     - Enable **Is Loop** to ensure continuous playback.
     - Set a **Static Sprite Frame** for display before the animation loads.
     - ![Animation Setup 1](./img/02-background/bg-setup-anim-1.png)
     - ![Animation Setup 2](./img/02-background/bg-setup-anim-2.png)
   - **Step 3**: Add animation nodes:
     - **Landscape**:
       - Create an `Empty Node` named `anim-background-main-game`.
       - Add the `animation-play-on-enable` component with the animation name from the **Animation Provider**.
       - Add the `background-scaler` component to resize based on screen resolution.
       - ![Landscape Animation](./img/02-background/bg-setup-anim-landscape.png)
     - **Portrait**:
       - Create an `Empty Node` named `mobile-background-anim-portrait`.
       - Add the `mobile-portrait-background-ui-controller` and `orientation-ui-controller` components for mobile portrait display.
       - Create a child `Empty Node` named `anim-background-main-game`.
       - Add the `animation-play-on-enable` and `portrait-anim-background-scaler` components.
       - ![Portrait Animation 1](./img/02-background/bg-setup-anim-portrait-1.png)
       - ![Portrait Animation 2](./img/02-background/bg-setup-anim-portrait-2.png)