Crear un fondo parallax en Flame com Flutter

Los fondos tipos parallaxCreate a parallax background in Flame com Flutterz, son empleado en toda clase de aplicaciones, no solamente en juegos en 2D, si no tambien en páginas web para definir background, etc; en esta entrada veremos como definir un fondo parallax como fondo para nuestros juegos en 2D con Flame.

Comencemos cargando las imágenes para el fondo parallax:

En Flame, tenemos un componente llamado ParallaxComponent que nos facilita el proceso de crear un efecto parallax muy fácilmente; con definir las imágenes a usar como un listado:

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;
  }
}

Verás que ya casi conseguimos el efecto parallax, de momento, todas las capas se mueven a la misma velocidad; el argumento de baseVelocity permite definir el desplazamiento de los fondos, usualmente se desea que el desplazamiento ocurra en el eje de las X y no en el eje Y, así que:

baseVelocity: Vector2(10, 0)

Como tarea, prueba distintos valores al momento de definir el vector y usar distintas imágenes (comenta y descontenta algunos de los ParallaxImageData definidos anteriormente, cambia las capas de orden) y evalúa su comportamiento; pero, en esencia, si usas valores altos, como por ejemplo:

baseVelocity: Vector2(100, 0)

Veas un desplazamiento rápido en los fondos, si colocas valores más bajos:

baseVelocity: Vector2(5, 0)

El desplazamiento será más lento, y si defines el desplazamiento en el Y:

baseVelocity: Vector2(5, 10)

Las capas se moverán en el eje X y Y.

Al ejecutar la aplicación, deberías de ver una salida como la siguiente:

Variar velocidad en las capas

De momento conseguimos un fondo parallax algo aburrido ya que, aunque tenemos un fondo que se desplaza, todo se mueve a la misma velocidad; pero, para personalizar este aspecto, es decir, que los fondos se desplacen a diferentes velocidades, podemos usar el parámetro de velocityMultiplierDelta, el cual, permite mover las imágenes de fondo (capas) con una velocidad más rápida, cuanto más "cerca" esté la imagen:

lib/main.dart

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

Con esto, tendremos el mismo efecto pero ahora las capas se desplazan a diferentes velocidades; para que entiendas el funcionamiento de este argumento, prueba colocar valores más altos y veras que mientras más cerca esté la capa, más rápida se moverá.

Crear una clase componente para el parallax

Podemos crear el equivalente del parallax con una clase componente quedando como:

lib\background\candy_background.dart

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();
  }
}

El gameRef permite obtener una referencia del juego (la clase MyGame definida en el main); en cuanto al 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());
}

Y con esto tenemos el mismo resultado que el de antes.

Este material forma parte de mi curso y libro completo sobre Flutter Flame.

18-06-2023 - Andrés Cruz

In english

• Categoría
• /
• Flutter
• /
• Crear un fondo parallax en Flame com Flutter