Guides Scenes Use Scene Backgrounds and Backdrops

Scenes 1 min read Updated Apr 2026

Use Scene Backgrounds and Backdrops

Use scene backdrops when you want to establish the look of a scene before you start filling it with foreground detail.

If you want the concept first, read What Are Scene Backdrops?.

A platformer scene using layered backdrop images and parallax settings.

Edit Backdrops from the Scene Root

  1. select the scene root in the Hierarchy
  2. open the Backdrop card in the Inspector
  3. choose a background Color
  4. click the add button in Layers to add one or more layers
  5. assign an image to each layer
  6. set Parallax and Offset for each layer

You can also toggle whether the backdrop is visible in the Scene view while you are editing.

What a Layer Controls

Each backdrop layer stores:

  • imagePath
  • parallax
  • offset
  • repeat

Think of it like this:

  • imagePath chooses the image
  • parallax decides how much the layer moves with the camera
  • offset nudges the layer without moving the camera
  • repeat decides whether the layer wraps on the X axis, Y axis, or both

Lower parallax values usually feel farther away. Higher values usually feel closer.

Example Layer Stack

{
  "backgroundColor": "#0F1B2D",
  "backgroundLayers": [
    {
      "imagePath": "Assets/Images/Sky.png",
      "parallax": { "x": 0.05, "y": 0.00 }
    },
    {
      "imagePath": "Assets/Images/Mountains.png",
      "parallax": { "x": 0.20, "y": 0.05 }
    },
    {
      "imagePath": "Assets/Images/Trees.png",
      "parallax": { "x": 0.45, "y": 0.10 },
      "offset": { "x": 24.0, "y": 0.0 }
    }
  ]
}

You normally author this through the editor, but it helps to understand the scene data shape.

Drive Backdrops from Scripts

You can also scroll backdrop layers from PHP code through Scene and BackdropLayer.

That is useful for:

  • starfields in space shooters
  • endless-runner sky or ground motion
  • warp or boost effects that temporarily increase backdrop speed

Example:

use Lenga\Engine\Core\Time;
use Lenga\Engine\Core\Vector2;
use Lenga\Engine\SceneManagement\SceneManager;

$scene = SceneManager::getActiveScene();
$layer = $scene?->getBackdropLayer(0);

if ($layer !== null) {
    $layer->repeat = new Vector2(1.0, 0.0);
    $layer->translateOffset(new Vector2(30.0 * Time::deltaTime(), 0.0));
}

A Good Starting Recipe for 2D Parallax

If you want a quick layered background that already feels better than a flat image, try:

Sky layer        parallax x = 0.05
Mountains layer  parallax x = 0.20
Trees layer      parallax x = 0.45
Foreground haze  parallax x = 0.70

Keep the furthest layer subtle. The closer the layer feels, the more motion it can tolerate.

Where the Backdrop Appears

The backdrop appears consistently across the runtime and the editor.

That includes:

  • the game when you press Play
  • the Game or Player preview
  • the scene camera preview
  • the Scene view, when Show In Scene is enabled

Tips for Better-Looking Results

  1. use broad shapes and simple silhouettes for the furthest layers
  2. reserve high-detail art for closer parallax layers
  3. let the background color support the image instead of fighting it
  4. keep the layer count modest at first, then add more only when they clearly improve depth

What Comes Next