flutter - 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.
解决方案
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;
}
}