doc-slot-core-manual/docs/02-setup-main-game/05-main-scene/02-background.md

sidebar_position

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
Background Portrait

1. Prepare the assets

	Assets	Description
Static		Static background is necessary for the game
Animation		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)