如何使用带有 Flame/Flutter 的 PositionComponent 移动 Vector2？答案

【问题标题】：How to move a Vector2 using PositionComponent with Flame/Flutter?如何使用带有 Flame/Flutter 的 PositionComponent 移动 Vector2？
【发布时间】：2021-05-28 03:34:44
【问题描述】：

我正在尝试移动 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
    );
  }

}

【问题讨论】：

几乎总是，如果您没有特定原因，您希望在需要时首先在方法中调用super.X。这也是你的问题，你已经在你的渲染方法中翻转了drawRect 和超级调用。

标签： flutter flame

【解决方案1】：

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

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

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

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

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

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

【讨论】：