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

sidebar_position

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
Portrait

Asset Preparation

Type	Assets	Description
Static		Required for all games.
Animation		Optional, depending on game design.

Setup Steps

1. Landscape Background:

   • Use the prepared sprite frame for the landscape background.
   • 

2. Portrait Background:

   • Use the prepared sprite frame for the mobile portrait background.
   • 

3. Animated Background (if applicable):

   • Step 1: Use the helper tool to generate animations from prepared assets.
     • 
     • 
   • Step 2: Configure spine animation settings:
     • Enable Is Loop to ensure continuous playback.
     • Set a Static Sprite Frame for display before the animation loads.
     • 
     • 
   • 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.
       • 
     • 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.
       • 
       •