如何让 Rect 以线性方式不断颤动/火焰移动

问题描述

我一直在尝试使用火焰游戏引擎实现一种在颤动中移动 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 增量/减量，但无济于事。任何指向正确方向的提示或点都将不胜感激。

解决方法

您可以在 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,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;
  }
}

,

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

class MyGame extends BaseGame with MultiTouchDragDetector {
  Rect _rect = const Rect.fromLTWH(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);
  }
}