Create a parallax background in Flame com Flutter

We will see step by step how to create a parallax background using Flame for 2D game development.

Parallax backgrounds are used in all kinds of applications, not only in 2D games, but also in web pages to define background, etc; In this post we will see how to define a parallax background as background for our 2D games with Flame.

Let's start by loading the images for the parallax background:

In Flame, we have a component called ParallaxComponent that makes the process of creating a parallax effect very easy; with defining the images to use as a list:

lib/main.dart

class MyGame extends FlameGame {
  @override
  void onLoad() async {
    super.onLoad();
    add(await bgParallax());
  }

  Future<ParallaxComponent> bgParallax() async {
     ParallaxComponent parallaxComponent = await loadParallaxComponent([
      ParallaxImageData('layer06_sky.png'),
      ParallaxImageData('layer05_rocks.png'),
      ParallaxImageData('layer04_clouds.png'),
      ParallaxImageData('layer03_trees.png'),
      ParallaxImageData('layer02_cake.png'),
      ParallaxImageData('layer01_ground.png'),
    ],
        baseVelocity: Vector2(10, 0));

        return parallaxComponent;
  }
}

You will see that we have almost achieved the parallax effect, for now, all the layers move at the same speed; the baseVelocity argument allows you to define the displacement of the backgrounds, usually you want the displacement to occur on the X axis and not on the Y axis, so:

baseVelocity: Vector2(10, 0)

As homework, try different values when defining the vector and using different images (comment out and dislike some of the ParallaxImageData defined above, change the order layers) and evaluate their behavior; but, in essence, if you use high values, such as:

baseVelocity: Vector2(100, 0)

You will see a rapid displacement in the backgrounds, if you place lower values:

baseVelocity: Vector2(5, 0)

The scroll will be slower, and if you define the scroll on the Y:

baseVelocity: Vector2(5, 10)

The layers will move on the X and Y axis.

When you run the application, you should see output like the following:

Vary speed in layers

At the moment we get a somewhat boring parallax background since, although we have a background that moves, everything moves at the same speed; but, to customize this aspect, that is, that the backgrounds move at different speeds, we can use the velocityMultiplierDelta parameter, which allows moving the background images (layers) with a faster speed, the more "close" the image is image:

lib/main.dart

Future<ParallaxComponent> bgParallax() async {
    ParallaxComponent parallaxComponent = await loadParallaxComponent([
    ***
      baseVelocity: Vector2(10, 0),
      velocityMultiplierDelta: Vector2(1.1, 0));
}

With this, we will have the same effect but now the layers move at different speeds; so that you understand how this argument works, try placing higher values and you will see that the closer the layer is, the faster it will move.

Create a component class for the parallax

We can create the parallax equivalent with a component class looking like:

import 'dart:async';

import 'package:flame/components.dart';
import 'package:flame/parallax.dart';

import 'package:parallax06/main.dart';

class CandyBackground extends ParallaxComponent {
  @override
  FutureOr<void> onLoad() async {
    parallax = await gameRef.loadParallax([
      ParallaxImageData('layer06_sky.png'),
      ParallaxImageData('layer05_rocks.png'),
      ParallaxImageData('layer04_clouds.png'),
      ParallaxImageData('layer03_trees.png'),
      ParallaxImageData('layer02_cake.png'),
      ParallaxImageData('layer01_ground.png'),
    ],
        baseVelocity: Vector2(10, 0),
        velocityMultiplierDelta: Vector2(1.1, 1.1));

    return super.onLoad();
  }
}

The gameRef allows you to get a reference to the game (the MyGame class defined in main); as for the main:

lib/main.dart

import 'package:flutter/material.dart';
import 'package:flame/game.dart';

import 'package:parallax06/background/candy_background.dart';

class MyGame extends FlameGame {
  @override
  void onLoad() async {
    super.onLoad();
    add(CandyBackground());
}

And with this we have the same result as before.

This material is part of my complete course and book on Flutter Flame.

18-06-2023 - Andrés Cruz

En español

• Category
• /
• Flutter
• /
• Create a parallax background in Flame com Flutter