カメラ

CameraComponent

CameraComponentのfollowを使うと、よくあるキャラクターに追従する画面スクロールを実現できます。

※ 1.7 以前で使われていたCameraは非推奨になりました。

動かす

まずはマップとなるコンポーネントを作ります。 1500x1500 のサイズで、今いる場所がわかりやすいように適当に背景を描画します。

class Map extends PositionComponent {
  Map()
      : super(
          size: Vector2.all(length),
        );

  static const double length = 1500;

  @override
  void render(Canvas canvas) {
    super.render(canvas);

    const steps = 10;
    for (var i = steps; i >= 0; i -= 1) {
      canvas.drawRect(
        Rect.fromCenter(
          center: Offset(width * 0.5, height * 0.5),
          width: width / steps * i.toDouble(),
          height: height / steps * i.toDouble(),
        ),
        Paint()..color = Color.fromARGB(255, 0, ((200 / steps) * i).toInt(), 0),
      );
    }
  }
}

次にカメラを設定します。

1.9 から world、cameraがデフォルトで用意されるようになったので、自前で作る必要がなくなりました。

mapと_rectをworldにaddして、followでcameratが_rectを追いかけるようにします。

なお、_rectはキーボードイベントの例で使ったものと同じで、矢印キーで動きます。

    final map = Map();
    world.add(map);
    world.add(_rect);

    camera.follow(_rect);

これで、キャラクターに合わせて画面が動きます。