CODEWITHSUNDEEP
flutterswipegesturerectflame
EEEEO
EEEEO

Reputation: 13

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

I have been having trouble trying to implement a method that moves a Rect in flutter using the flame game engine. The ultimate goal is to swipe in a direction and have the Rect move in that direction at a constant velocity. I found this code:

  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);
  }

which at least allows for the free movement of the Rect on screen in regards to finger position. I tried messing with the "translate()" method to have the x/y increment/decrement depending on the delta provide, but to no avail. Any hint or point in the right direction would be greatly appreciate.

Upvotes: 1

Views: 1311

Answers (2)

spydon
spydon

Reputation: 11562

Instead of using both the HorizontalDragDetector and VerticalDragDetector, you can use the MultiTouchDragDetector and the code will be a lot simpler.

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);
  }
}

Upvotes: 1

rickimaru
rickimaru

Reputation: 2490

You can set the drag delta X and Y in your dragUpdate(...){ ... } and use those delta values in render(...) { ... }.

Try running this sample app.

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;
  }
}

Upvotes: 1

Related Questions