【Flutter x Flame】背景が移動しているように見せるには？

2023年11月23日2023年12月30日

記事内に商品プロモーションが含まれる場合があります

エンドレスランナーゲームのように延々と背景が動いているように見せるにはParallaxを使います。

● Parallaxを使ったイメージ

Prallaxを使ったサンプルコード

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

void main() async {
  runApp(GameWidget(game: MyGame()));
}

class MyGame extends FlameGame {

  // 背景画像
  final _imageNames = [
    ParallaxImageData('background/base_background.png'), // 全体の背景画像
    ParallaxImageData('background/stars.png'), // 星の画像
  ];

  @override
  Future<void> onLoad() async {
    super.onLoad();

    // Parallaxの設定
    final parallax = await loadParallaxComponent(
      _imageNames,
      fill: LayerFill.width, // 画面の幅で背景を埋めるように指定
      repeat: ImageRepeat.repeat, // 画像を繰り返し表示するように指定
      baseVelocity: Vector2(0, -5),  // 背景の基本速度を設定（垂直方向に5ピクセル）
      velocityMultiplierDelta: Vector2(0, 2), // 速度の倍率の変化を指定（速度の倍率が垂直方向に2倍ずつ変化するように設定）
    );

    // ゲームに追加
    add(parallax);
  }
}