パララックス

ParallaxComponent

ゲームの種類によっては背景を自動的にスクロールさせたいことがあります。 Flame にはそのための機能が組み込まれています。

その名前の通り Flappy Bird のようにパララックスで奥行き効果を出すこともできます。 （設定によってはただの自動スクロール背景にもできます）

使い方は簡単で画像を用意してloadParallaxComponentで読み込むだけです。

動かす

事前準備としてassets/images/にbg-back.png・bg-stars.pngという画像を入れておきます。

あとは loadParallaxComponentで読み込むだけです。

baseVelocityでスクロール速度を、velocityMultiplierDeltaで画像ごとの速度差を設定します。
（velocityMultiplierDeltaを設定しなければパララックス効果がなくなります）

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

class ParallaxGame extends FlameGame {
  @override
  Future<void> onLoad() async {
    super.onLoad();

    await add(
      await loadParallaxComponent(
        [
          ParallaxImageData('bg-back.png'),
          ParallaxImageData('bg-stars.png'),
        ],
        baseVelocity: Vector2(10, 0),
        velocityMultiplierDelta: Vector2(2.0, 0),
      ),
    );
  }
}

これでパララックス効果を持った自動スクロール背景が表示されます。