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

Question

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

我正在使用 flame 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

您的渲染方法将大小渲染为零边界矩形，size.toRect() returns 位置 0,0 的 Rect。

相反，您可以使用 PositionComponent class:

中的 toRect 方法

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

此方法returns组件的矩形，基于 x、y 位置和大小。

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

它为您自己的渲染准备 canvas。

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

How to move a Vector2 using PositionComponent with Flame/Flutter?

flutter

flame