如何让 Rect 以线性方式不断移动 flutter/flame

Question

我在尝试实现一种使用 Flame 游戏引擎在 flutter 中移动 Rect 的方法时遇到了问题。最终目标是朝一个方向滑动并让 Rect 以恒定速度朝该方向移动。我找到这段代码：

  void dragUpdate(DragUpdateDetails d)
  {
    final delta = d.delta;
    final size = gameController.screenSize;
    double translateX = delta.dx;
    double translateY = delta.dy;

    // Make sure that the player never goes outside of the screen in the X-axis
    if (playerRect.right + delta.dx >= size.width) {
      translateX = size.width - playerRect.right;
    } else if (playerRect.left + delta.dx <= 0) {
      translateX = -playerRect.left;
    }
    // Make sure that the player never goes outside of the screen in the Y-axis
    if (playerRect.bottom + delta.dy >= size.height) {
      translateY = size.height - playerRect.bottom;
    } else if (playerRect.top + delta.dy <= 0) {
      translateY = -playerRect.top;
    }

    playerRect = playerRect.translate(translateX, translateY);
  }

这至少允许 Rect 在屏幕上根据手指位置自由移动。我尝试使用“translate()”方法使 x/y increment/decrement 取决于增量提供，但无济于事。任何指向正确方向的提示或观点将不胜感激。

Answer 1

您可以在 dragUpdate(...){ ... } 中设置阻力增量 X 和 Y，并在 render(...) { ... } 中使用这些增量值。

试试运行这个示例应用程序。

import 'dart:ui';

import 'package:flame/game.dart';
import 'package:flame/gestures.dart';
import 'package:flame/util.dart';
import 'package:flutter/gestures.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';

void main() {
  BoxGame game = BoxGame();
  runApp(game.widget);

  Util flameUtil = Util();
  flameUtil.fullScreen();
  flameUtil.setOrientation(DeviceOrientation.portraitUp);
}

class BoxGame extends Game
    with HorizontalDragDetector, VerticalDragDetector {
  Size screenSize;

  double posX;
  double posY;
  double dragDX = 0.0;
  double dragDY = 0.0;

  void render(Canvas canvas) {
    // draw a black background on the whole screen
    final Rect bgRect =
        Rect.fromLTWH(0, 0, screenSize.width, screenSize.height);
    final Paint bgPaint = Paint();
    bgPaint.color = Color(0xff000000);
    canvas.drawRect(bgRect, bgPaint);

    // draw a box (make it green if won, white otherwise)
    if (posX == null) {
      final double screenCenterX = screenSize.width / 2;
      final double screenCenterY = screenSize.height / 2;
      posX = screenCenterX - 75;
      posY = screenCenterY - 75;
    }

    posX += dragDX;
    posY += dragDY;

    final Rect boxRect = Rect.fromLTWH(posX, posY, 150, 150);
    final Paint boxPaint = Paint();
    boxPaint.color = Color(0xffffffff);
    canvas.drawRect(boxRect, boxPaint);
  }

  void update(double t) {}

  void resize(Size size) {
    screenSize = size;
    super.resize(size);
  }

  @override
  void onHorizontalDragUpdate(DragUpdateDetails details) {
    dragDX = details.delta.dx;
  }

  @override
  void onVerticalDragUpdate(DragUpdateDetails details) {
    dragDY = details.delta.dy;
  }

  @override
  void onHorizontalDragEnd(DragEndDetails details) {
    dragDX = 0;
  }

  @override
  void onVerticalDragEnd(DragEndDetails details) {
    dragDY = 0;
  }
}

Answer 2

您可以使用 MultiTouchDragDetector 而不是同时使用 HorizontalDragDetector 和 VerticalDragDetector，代码会简单很多。

class MyGame extends BaseGame with MultiTouchDragDetector {
  Rect _rect = const Rect.fromLTWH(0, 0, 50, 50);
  Offset _velocity = Offset.zero;

  MyGame();

  @override
  void onReceiveDrag(DragEvent event) {
    event.onEnd = onDragEnd;
  }

  void onDragEnd(DragEndDetails details) {
    _velocity = details.velocity.pixelsPerSecond;
  }

  @override
  void update(double dt) {
    super.update(dt);
    final timeStepMovement = _velocity * dt;
    _rect = _rect.shift(timeStepMovement);
  }

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

如何让 Rect 以线性方式不断移动 flutter/flame

How to have a Rect move constantly in a linear fashion flutter/flame

flutter

swipe

gesture

rect

flame