flutter - 如何使用带有 Flame/Flutter 的 PositionComponent 移动 Vector2？

Question

我正在尝试移动 Vector2 的 x 位置，正在调用更新，x 值正在更改但白色方形组件没有移动，我错过了什么？

我正在使用火焰 1.0.0-releasecandidate.11。

import 'dart:ui';
import 'package:flame/components.dart';
import 'package:flame/palette.dart';

class PlayerComponent extends PositionComponent {

  static const squareSize = 128.0;
  static Paint white = BasicPalette.white.paint();

  @override
  void render(Canvas canvas) {
    canvas.drawRect(size.toRect(), white);
    super.render(canvas);
  }

  @override
  void update(double dt) {
    x += 10 * dt;
    print(x);
    super.update(dt);
  }

  @override
  void onMount() {
    super.onMount();
    size.setValues(squareSize, squareSize);
    anchor = Anchor.center;
  }

}

class AnimalVillageGame extends BaseGame {

  @override
  Future<void> onLoad() async {

    add(PlayerComponent()
      ..x = 100
      ..y = 100
    );
  }

}

Answer 1

您的 render 方法将大小呈现为一个零边界矩形，size.toRect()在位置 0,0 返回一个 Rect。

相反，您可以使用类中的toRect方法PositionComponent：

  @override
  void render(Canvas canvas) {
    canvas.drawRect(toRect(), white);
    super.render(canvas);
  }

此方法根据 x、y 位置和大小返回组件的矩形。

编辑：正如 spydon 所说，super.render在渲染到画布之后调用，最好先调用 super 方法，因为它会自动为您处理平移、旋转等事情。

它为您自己的渲染准备画布。