Why CameraComponent.follow works like teleport? #1902

doowonee · 2022-09-12T13:53:10Z

doowonee
Sep 12, 2022

Hello, I'm using CameraComponent to follow player.

World size LTRB (-800, -800, 800, 800
Initial start position of player is (0, 0).
Screen size [392.72727272727275,778.9090909090909]
CameraComponent bound Rectangle([-603.6363636363636, -410.54545454545456], [603.6363636363636, 410.54545454545456])

Some of code using camera component follow part

_cameraPlayer = CameraComponent(world: gameRef.world)
  ..follow(gameRef.player, snap: true)
  ..setBounds(cameraFocus);
add(_cameraPlayer);

My goal

Player can not move out of World size
When player reaches edge of screen camera does not follow until player move back toward center

flame.camera.following.teleport.phone.only.mp4

As you see after player reaches screen and move back to center. Camera didn't follow it shows player immediately like teleport!

Logs player's position and camera viewport position.

flame.camera.following.teleport.log.console.mp4

Should I implement my own camera work to do this? or did I something wrong?

Answered by doowonee

Sep 17, 2022

See #1905

View full answer

ufrshubham · 2022-09-12T14:20:11Z

ufrshubham
Sep 12, 2022
Maintainer

Will it be possible for you to share a small reproducible example?

1 reply

doowonee Sep 12, 2022
Author

Sure! I made a single dart file to reproduce.

I don't know why the player teleport when reached edge of screen and Camera bound doesn't work correctly only Top of the screen(you can see camera shows out of world only top of screen).

Example source code

// This is example for https://github.com/flame-engine/flame/discussions/1902

import 'dart:developer';

import 'package:flame/components.dart';
import 'package:flame/experimental.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'discussions_1902',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: SafeArea(
          child: GameWidget<MyGame>(
        game: MyGame(),
      )),
    );
  }
}

// world for camera
class MyWorld extends World {
  static const double size = 800;

  static const Rect bounds = Rect.fromLTWH(-size, -size, 2 * size, 2 * size);
  static final Paint _paintBg = Paint()
    ..color = const Color.fromARGB(255, 63, 63, 63);

  @override
  void render(Canvas canvas) {
    canvas.drawRect(bounds, _paintBg);
  }
}

// player
class Player<T extends FlameGame> extends CircleComponent
    with HasGameRef<MyGame> {
  Player() : super(priority: 2, radius: 5);

  @override
  Future<void> onLoad() async {
    size = Vector2(50, 50);
    anchor = Anchor.center;
  }

  @override
  void update(double dt) {
    super.update(dt);
    if (gameRef.joystick.delta.isZero()) {
      return;
    }

    // Player can not move out of map
    position.add(gameRef.joystick.relativeDelta * 500 * dt);
    x = x.clamp(MyWorld.bounds.left, MyWorld.bounds.right);
    y = y.clamp(MyWorld.bounds.top, MyWorld.bounds.bottom);
  }
}

// flamegame class
class MyGame extends FlameGame
    with
        HasCollisionDetection,
        HasTappables,
        HasDraggables,
        SingleGameInstance {
  @override
  bool debugMode = true;

  final FpsTextComponent _fpsCounter = FpsTextComponent();
  final world = MyWorld();
  late CameraComponent _cameraPlayer;
  late final Player player;
  late final JoystickComponent joystick;
  late Vector2 joystickSize;

  @override
  void update(double dt) {
    super.update(dt);
    log('player: ${player.position} camera: ${_cameraPlayer.viewfinder.position}',
        name: 'following camera');
  }

  @override
  Future<void> onLoad() async {
    add(FpsTextComponent(position: Vector2(0, size.y - 24)));

    add(world);
    world.add(player = Player());

    var cameraFocus = Rectangle.fromLTRB(
        -MyWorld.size + canvasSize.x / 2,
        -MyWorld.size + canvasSize.y / 2,
        MyWorld.size - canvasSize.x / 2,
        MyWorld.size - canvasSize.y / 2);
    _cameraPlayer = CameraComponent(world: world)
      ..follow(player, snap: true)
      ..setBounds(cameraFocus);
    add(_cameraPlayer);

    final knobPaint = BasicPalette.blue.withAlpha(200).paint();
    final backgroundPaint = BasicPalette.blue.withAlpha(100).paint();
    joystick = JoystickComponent(
        knob: CircleComponent(radius: 30, paint: knobPaint),
        background: CircleComponent(radius: 100, paint: backgroundPaint),
        position: Vector2.zero(),
        priority: 100);
    joystickSize = joystick.transform.scale;
    // Hide joystick and show only when clicked
    joystick.transform.scale = Vector2.zero();
    add(joystick);
  }

  @override
  void handleDragEnd(int pointerId, DragEndDetails details) {
    super.handleDragEnd(pointerId, details);
    joystick.transform.scale = Vector2.zero();
  }

  @override
  void onTapDown(int pointerId, TapDownInfo info) {
    super.onTapDown(pointerId, info);
    joystick.position = info.eventPosition.game;
    joystick.transform.scale = Vector2(1, 1);
  }

  @override
  void onTapUp(int pointerId, TapUpInfo info) {
    super.onTapUp(pointerId, info);
    joystick.transform.scale = Vector2.zero();
  }
}

st-pasha · 2022-09-12T16:32:33Z

st-pasha
Sep 12, 2022

If I understand correctly what you want to achieve, is to have camera move smoothly towards the player's position? In that case you need to specify the maxSpeed argument for the follow() -- the default speed is infinite.

5 replies

doowonee Sep 13, 2022
Author

@st-pasha Thanks for your reply. Well I try it but It still works not correctly.

This video is from my example code above thread.

player.movement.mp4

Player can move out of camera focus another direction after reached bounds
Camera show out of range(bound) only top of screen

st-pasha Sep 13, 2022

I don't see anything wrong in the video that you posted. Perhaps it would help if you added some details to the world so that it's not a uniform gray color (like, a bunch of randomly scattered circles). Also, draw a rectangle representing the camera bounds - this way you can see where the camera hits those bounds.

doowonee Sep 13, 2022
Author

Ok I will add more details.

By the way at 0:14 ~ 0:17 Is this normal? I thought camera should follow player after player reached bottom of screen and move to left but it wasn't Camera stopped to follow when player reaches to bounds even player came out from bounds.

doowonee Sep 13, 2022
Author

I add obstacle can easily show player's movement with blue color and add cameara bound area with green color.

Example source code main.dart

// This is example for https://github.com/flame-engine/flame/discussions/1902

import 'dart:developer';
import 'dart:math' as math;

import 'package:flame/components.dart';
import 'package:flame/experimental.dart';
import 'package:flame/game.dart';
import 'package:flame/input.dart';
import 'package:flame/palette.dart';
import 'package:flutter/material.dart';

void main() {
  runApp(const MyApp());
}

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'discussions_1902',
      theme: ThemeData(
        // This is the theme of your application.
        //
        // Try running your application with "flutter run". You'll see the
        // application has a blue toolbar. Then, without quitting the app, try
        // changing the primarySwatch below to Colors.green and then invoke
        // "hot reload" (press "r" in the console where you ran "flutter run",
        // or simply save your changes to "hot reload" in a Flutter IDE).
        // Notice that the counter didn't reset back to zero; the application
        // is not restarted.
        primarySwatch: Colors.blue,
      ),
      home: SafeArea(
          child: GameWidget<MyGame>(
        game: MyGame(),
      )),
    );
  }
}

// world for camera
class MyWorld extends World {
  static const double size = 800;

  static const Rect bounds = Rect.fromLTWH(-size, -size, 2 * size, 2 * size);
  static final Paint _paintBg = Paint()
    ..color = const Color.fromARGB(255, 63, 63, 63);
  static final Paint _paintBound = Paint()
    ..strokeWidth = 4
    ..style = PaintingStyle.stroke
    ..color = const Color.fromARGB(255, 0, 255, 106);
  static final _rng = math.Random();

  @override
  void render(Canvas canvas) {
    canvas.drawRect(bounds, _paintBg);
    canvas.drawRect(bounds, _paintBound);
    // canvas.drawPath(_boundBorder, _paintBound);
  }

  static double genCoord() {
    return -size + _rng.nextDouble() * (2 * size);
  }
}

// player
class Player<T extends FlameGame> extends CircleComponent
    with HasGameRef<MyGame> {
  Player() : super(priority: 2, radius: 5);

  @override
  Future<void> onLoad() async {
    size = Vector2(50, 50);
    anchor = Anchor.center;
  }

  @override
  void update(double dt) {
    super.update(dt);
    if (gameRef.joystick.delta.isZero()) {
      return;
    }

    // Player can not move out of map
    position.add(gameRef.joystick.relativeDelta * 500 * dt);
    x = x.clamp(MyWorld.bounds.left, MyWorld.bounds.right);
    y = y.clamp(MyWorld.bounds.top, MyWorld.bounds.bottom);
  }
}

// flamegame class
class MyGame extends FlameGame
    with
        HasCollisionDetection,
        HasTappables,
        HasDraggables,
        SingleGameInstance {
  @override
  bool debugMode = true;

  final FpsTextComponent _fpsCounter = FpsTextComponent();
  final world = MyWorld();
  late CameraComponent _cameraPlayer;
  late final Player player;
  late final JoystickComponent joystick;
  late Vector2 joystickSize;

  @override
  void update(double dt) {
    super.update(dt);
    log('player: ${player.position} camera: ${_cameraPlayer.viewfinder.position}',
        name: 'following camera');
  }

  @override
  Future<void> onLoad() async {
    add(FpsTextComponent(position: Vector2(0, size.y - 24)));

    add(world);
    world.add(player = Player());

    for (var i = 0; i < 30; i++) {
      world.add(RectangleComponent(
          priority: 5,
          size: Vector2(20, 20),
          position: Vector2(MyWorld.genCoord(), MyWorld.genCoord()))
        ..setColor(const Color.fromARGB(255, 14, 43, 149)));
    }

    var cameraFocus = Rectangle.fromLTRB(
        -MyWorld.size + canvasSize.x / 2,
        -MyWorld.size + canvasSize.y / 2,
        MyWorld.size - canvasSize.x / 2,
        MyWorld.size - canvasSize.y / 2);
    _cameraPlayer = CameraComponent(world: world)
      ..follow(player, maxSpeed: 500, snap: true)
      ..setBounds(cameraFocus);
    add(_cameraPlayer);

    final knobPaint = BasicPalette.blue.withAlpha(200).paint();
    final backgroundPaint = BasicPalette.blue.withAlpha(100).paint();
    joystick = JoystickComponent(
        knob: CircleComponent(radius: 30, paint: knobPaint),
        background: CircleComponent(radius: 100, paint: backgroundPaint),
        position: Vector2.zero(),
        priority: 100);
    joystickSize = joystick.transform.scale;
    // Hide joystick and show only when clicked
    joystick.transform.scale = Vector2.zero();
    add(joystick);
  }

  @override
  void handleDragEnd(int pointerId, DragEndDetails details) {
    super.handleDragEnd(pointerId, details);
    joystick.transform.scale = Vector2.zero();
  }

  @override
  void onTapDown(int pointerId, TapDownInfo info) {
    super.onTapDown(pointerId, info);
    joystick.position = info.eventPosition.game;
    joystick.transform.scale = Vector2(1, 1);
  }

  @override
  void onTapUp(int pointerId, TapUpInfo info) {
    super.onTapUp(pointerId, info);
    joystick.transform.scale = Vector2.zero();
  }
}

Player can move out of camera focus another direction after reached bounds

It was SafeArea from flutter! I got it but I'm still frustrating why camera does not follow after player came out from bound.

player.movement2.mp4

doowonee Sep 13, 2022
Author

I found and I changed some code see #1903

doowonee · 2022-09-17T13:40:33Z

doowonee
Sep 17, 2022
Author

See #1905

0 replies

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

Why CameraComponent.follow works like teleport? #1902

{{title}}

Replies: 3 comments 6 replies

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{editor}}'s edit

{{editor}}'s edit

{{title}}

{{title}}

{{title}}

Select a reply

Why CameraComponent.follow works like teleport? #1902

doowonee Sep 12, 2022

Replies: 3 comments · 6 replies

ufrshubham Sep 12, 2022 Maintainer

doowonee Sep 12, 2022 Author

st-pasha Sep 12, 2022

doowonee Sep 13, 2022 Author

st-pasha Sep 13, 2022

doowonee Sep 13, 2022 Author

doowonee Sep 13, 2022 Author

doowonee Sep 13, 2022 Author

doowonee Sep 17, 2022 Author

doowonee
Sep 12, 2022

Replies: 3 comments 6 replies

ufrshubham
Sep 12, 2022
Maintainer

doowonee Sep 12, 2022
Author

st-pasha
Sep 12, 2022

doowonee Sep 13, 2022
Author

doowonee Sep 13, 2022
Author

doowonee Sep 13, 2022
Author

doowonee Sep 13, 2022
Author

doowonee
Sep 17, 2022
Author