mirror of
https://github.com/flame-engine/flame.git
synced 2025-10-30 00:17:20 +08:00
46bd385675
Support secondary taps (right click) on new callbacks system. In order to follow through with our [event system migration](https://docs.google.com/document/d/1nBUup9QCPioVwWL1zs79z1hWF882tAYfNywFMdye2Qc), we need to make sure the new system is equipped to support all use cases; also changes the existing TapCallbacks to be primary-only. I noticed that we don't support "secondary taps" (i.e. right clicks), so I am adding this. I honestly really dislike the fact that this is considered a completely different event from the left click, instead of just a property on the click event. But I kept this structure to replicate what Flutter does, so this is more familiar for users. I think that is worth the slight verbosity of having yet another detector. Also, it plays well this way with Flutter because that underlying events are a bit different (for example, the secondary ones don't support `pointId`). Note: this is a slight breaking change because the existing detector works for BOTH left and right click, but there is NO WAY of distinguishing them because the `buttons` property is not propagated in the Flutter end (massive oversight I believe - might put a PR later). Since this provides the secondary as a solution, it also removes secondary clicks from triggering the primary. I think this is more versatile than having tap detector=`(primary OR secondary)` and secondary=`(secondary only)`. I don't think this should affect basically any users because (1) desktop only and (2) this acceptance of right clicks was probably a bug anyway (for example, on the example it would rotate the square and also open the context menu, which is jarring). However I am happy to add an option or pursue a different approach, I believe this is the best path forward, IMO.
64 lines
1.6 KiB
Dart
64 lines
1.6 KiB
Dart
import 'package:flame/components.dart';
|
|
import 'package:flame/events.dart';
|
|
import 'package:flame/extensions.dart';
|
|
import 'package:flame/game.dart';
|
|
import 'package:flame/palette.dart';
|
|
import 'package:flutter/material.dart';
|
|
|
|
class SecondaryTapCallbacksExample extends FlameGame {
|
|
static const String description = '''
|
|
In this example we show how to listen to both primary (left) and
|
|
secondary (right) tap events using the `TapCallbacks` and
|
|
the `SecondaryTapCallbacks` mixin to any `PositionComponent`.\n\n
|
|
The squares will change color depending on which button was used to tap them.
|
|
''';
|
|
|
|
@override
|
|
Future<void> onLoad() async {
|
|
world.add(TappableSquare()..anchor = Anchor.center);
|
|
world.add(TappableSquare()..y = 350);
|
|
}
|
|
}
|
|
|
|
class TappableSquare extends PositionComponent
|
|
with TapCallbacks, SecondaryTapCallbacks {
|
|
static final Paint _red = BasicPalette.red.paint();
|
|
static final Paint _blue = BasicPalette.blue.paint();
|
|
static final TextPaint _text = TextPaint(
|
|
style: TextStyle(color: BasicPalette.white.color, fontSize: 24),
|
|
);
|
|
|
|
int counter = 0;
|
|
Paint _paint = _red;
|
|
|
|
TappableSquare({Vector2? position})
|
|
: super(
|
|
position: position ?? Vector2.all(100),
|
|
size: Vector2.all(100),
|
|
anchor: Anchor.center,
|
|
);
|
|
|
|
@override
|
|
void render(Canvas canvas) {
|
|
canvas.drawRect(size.toRect(), _paint);
|
|
_text.render(
|
|
canvas,
|
|
'$counter',
|
|
size / 2,
|
|
anchor: Anchor.center,
|
|
);
|
|
}
|
|
|
|
@override
|
|
void onTapDown(_) {
|
|
_paint = _red;
|
|
counter++;
|
|
}
|
|
|
|
@override
|
|
void onSecondaryTapDown(_) {
|
|
_paint = _blue;
|
|
counter++;
|
|
}
|
|
}
|