diff --git a/STYLEGUIDE.md b/STYLEGUIDE.md index 43abc12a9..fd5b8d8fa 100644 --- a/STYLEGUIDE.md +++ b/STYLEGUIDE.md @@ -82,7 +82,7 @@ import 'package:ordered_set/ordered_set.dart'; import '../../extensions.dart'; import '../components/component.dart'; import '../components/mixins/has_game_ref.dart'; -import '../components/mixins/tapable.dart'; +import '../components/mixins/tappable.dart'; import '../components/position_component.dart'; import '../fps_counter.dart'; import 'camera.dart'; diff --git a/doc/input.md b/doc/input.md index 9589e0914..3b633d811 100644 --- a/doc/input.md +++ b/doc/input.md @@ -138,9 +138,9 @@ class MyGame extends Game with TapDetector { You can also check more complete examples [here](https://github.com/flame-engine/flame/tree/main/examples/lib/stories/controls/). -## Tapable, Draggable and Hoverable components +## Tappable, Draggable and Hoverable components -Any component derived from `BaseComponent` (most components) can add the `Tapable`, the +Any component derived from `BaseComponent` (most components) can add the `Tappable`, the `Draggable`, and/or the `Hoverable` mixins to handle taps, drags and hovers on the component. All overridden methods return a boolean to control if the event should be passed down further along @@ -152,9 +152,9 @@ you should return `true`. The same applies if your component has children, then the event is first sent to the leaves in the children tree and then passed further down until a method returns `false`. -### Tapable components +### Tappable components -By adding the `HasTapableComponents` mixin to your game, and using the mixin `Tapable` on your +By adding the `HasTappableComponents` mixin to your game, and using the mixin `Tappable` on your components, you can override the following methods on your components: ```dart @@ -168,7 +168,7 @@ Minimal component example: ```dart import 'package:flame/components.dart'; -class TapableComponent extends PositionComponent with Tapable { +class TappableComponent extends PositionComponent with Tappable { // update and render omitted @@ -188,19 +188,19 @@ class TapableComponent extends PositionComponent with Tapable { } } -class MyGame extends BaseGame with HasTapableComponents { +class MyGame extends BaseGame with HasTappableComponents { MyGame() { - add(TapableComponent()); + add(TappableComponent()); } } ``` -**Note**: `HasTapableComponents` uses an advanced gesture detector under the hood and as explained +**Note**: `HasTappableComponents` uses an advanced gesture detector under the hood and as explained further up on this page it shouldn't be used alongside basic detectors. ### Draggable components -Just like with `Tapable`, Flame offers a mixin for `Draggable`. +Just like with `Tappable`, Flame offers a mixin for `Draggable`. By adding the `HasDraggableComponents` mixin to your game, and by using the mixin `Draggable` on your components, they can override the simple methods that enable an easy to use drag api on your diff --git a/examples/lib/stories/camera_and_viewport/follow_object.dart b/examples/lib/stories/camera_and_viewport/follow_object.dart index 4d9682b11..4e4d4157f 100644 --- a/examples/lib/stories/camera_and_viewport/follow_object.dart +++ b/examples/lib/stories/camera_and_viewport/follow_object.dart @@ -81,7 +81,7 @@ class Map extends Component { } } -class Rock extends SquareComponent with Hitbox, Collidable, Tapable { +class Rock extends SquareComponent with Hitbox, Collidable, Tappable { static final unpressedPaint = Paint()..color = const Color(0xFF2222FF); static final pressedPaint = Paint()..color = const Color(0xFF414175); @@ -112,7 +112,7 @@ class Rock extends SquareComponent with Hitbox, Collidable, Tapable { } class CameraAndViewportGame extends BaseGame - with KeyboardEvents, HasCollidables, HasTapableComponents { + with KeyboardEvents, HasCollidables, HasTappableComponents { late MovableSquare square; final Vector2 viewportResolution; diff --git a/examples/lib/stories/collision_detection/only_shapes.dart b/examples/lib/stories/collision_detection/only_shapes.dart index 0fd68f539..5b7c86fdc 100644 --- a/examples/lib/stories/collision_detection/only_shapes.dart +++ b/examples/lib/stories/collision_detection/only_shapes.dart @@ -11,7 +11,7 @@ import 'package:flutter/material.dart' hide Image, Draggable; enum Shapes { circle, rectangle, polygon } -class OnlyShapes extends BaseGame with HasTapableComponents { +class OnlyShapes extends BaseGame with HasTappableComponents { final shapePaint = BasicPalette.red.paint()..style = PaintingStyle.stroke; final _rng = Random(); @@ -52,7 +52,7 @@ class OnlyShapes extends BaseGame with HasTapableComponents { } } -class MyShapeComponent extends ShapeComponent with Tapable { +class MyShapeComponent extends ShapeComponent with Tappable { MyShapeComponent(Shape shape, Paint shapePaint) : super(shape, shapePaint); @override diff --git a/examples/lib/stories/components/priority.dart b/examples/lib/stories/components/priority.dart index f252f13ba..49cf4a7d2 100644 --- a/examples/lib/stories/components/priority.dart +++ b/examples/lib/stories/components/priority.dart @@ -7,7 +7,7 @@ import 'package:flame/game.dart'; import 'package:flame/gestures.dart'; import 'package:flame/palette.dart'; -class Square extends PositionComponent with HasGameRef, Tapable { +class Square extends PositionComponent with HasGameRef, Tappable { late final Paint paint; Square(Vector2 position) { @@ -43,7 +43,7 @@ class Square extends PositionComponent with HasGameRef, Tapable { } } -class Priority extends BaseGame with HasTapableComponents { +class Priority extends BaseGame with HasTappableComponents { @override Future onLoad() async { final squares = [ diff --git a/examples/lib/stories/controls/controls.dart b/examples/lib/stories/controls/controls.dart index 6eb3b88b4..5a1a7502b 100644 --- a/examples/lib/stories/controls/controls.dart +++ b/examples/lib/stories/controls/controls.dart @@ -10,9 +10,9 @@ import 'keyboard.dart'; import 'mouse_movement.dart'; import 'multitap.dart'; import 'multitap_advanced.dart'; -import 'overlapping_tapables.dart'; +import 'overlapping_tappables.dart'; import 'scroll.dart'; -import 'tapables.dart'; +import 'tappables.dart'; void addControlsStories(Dashbook dashbook) { dashbook.storiesOf('Controls') @@ -42,13 +42,13 @@ void addControlsStories(Dashbook dashbook) { codeLink: baseLink('controls/multitap_advanced.dart'), ) ..add( - 'Tapables', - (_) => GameWidget(game: TapablesGame()), - codeLink: baseLink('controls/tapables.dart'), + 'Tappables', + (_) => GameWidget(game: TappablesGame()), + codeLink: baseLink('controls/tappables.dart'), ) ..add( 'Overlaping Tappables', - (_) => GameWidget(game: OverlappingTapablesGame()), + (_) => GameWidget(game: OverlappingTappablesGame()), codeLink: baseLink('controls/overlaping_tappables.dart'), ) ..add( diff --git a/examples/lib/stories/controls/overlapping_tapables.dart b/examples/lib/stories/controls/overlapping_tappables.dart similarity index 73% rename from examples/lib/stories/controls/overlapping_tapables.dart rename to examples/lib/stories/controls/overlapping_tappables.dart index ffea51edd..c7a77d002 100644 --- a/examples/lib/stories/controls/overlapping_tapables.dart +++ b/examples/lib/stories/controls/overlapping_tappables.dart @@ -1,11 +1,11 @@ import 'dart:math' as math; import 'package:flame/components.dart'; +import 'package:flame/game.dart'; import 'package:flame/palette.dart'; import 'package:flutter/material.dart'; -import 'package:flame/game.dart'; -class TapableSquare extends PositionComponent with Tapable { +class TappableSquare extends PositionComponent with Tappable { static Paint _randomPaint() { final rng = math.Random(); final color = Color.fromRGBO( @@ -19,7 +19,7 @@ class TapableSquare extends PositionComponent with Tapable { Paint currentPaint; - TapableSquare({Vector2? position}) + TappableSquare({Vector2? position}) : currentPaint = _randomPaint(), super( position: position ?? Vector2.all(100), @@ -49,11 +49,11 @@ class TapableSquare extends PositionComponent with Tapable { } } -class OverlappingTapablesGame extends BaseGame with HasTapableComponents { +class OverlappingTappablesGame extends BaseGame with HasTappableComponents { @override Future onLoad() async { - add(TapableSquare(position: Vector2(100, 100))); - add(TapableSquare(position: Vector2(150, 150))); - add(TapableSquare(position: Vector2(100, 200))); + add(TappableSquare(position: Vector2(100, 100))); + add(TappableSquare(position: Vector2(150, 150))); + add(TappableSquare(position: Vector2(100, 200))); } } diff --git a/examples/lib/stories/controls/tapables.dart b/examples/lib/stories/controls/tappables.dart similarity index 77% rename from examples/lib/stories/controls/tapables.dart rename to examples/lib/stories/controls/tappables.dart index 821313da4..a4c0c758d 100644 --- a/examples/lib/stories/controls/tapables.dart +++ b/examples/lib/stories/controls/tappables.dart @@ -1,15 +1,15 @@ import 'package:flame/components.dart'; -import 'package:flutter/material.dart'; -import 'package:flame/game.dart'; import 'package:flame/extensions.dart'; +import 'package:flame/game.dart'; +import 'package:flutter/material.dart'; -class TapableSquare extends PositionComponent with Tapable { +class TappableSquare extends PositionComponent with Tappable { static final Paint _white = Paint()..color = const Color(0xFFFFFFFF); static final Paint _grey = Paint()..color = const Color(0xFFA5A5A5); bool _beenPressed = false; - TapableSquare({Vector2? position}) + TappableSquare({Vector2? position}) : super( position: position ?? Vector2.all(100), size: Vector2.all(100), @@ -41,10 +41,10 @@ class TapableSquare extends PositionComponent with Tapable { } } -class TapablesGame extends BaseGame with HasTapableComponents { +class TappablesGame extends BaseGame with HasTappableComponents { @override Future onLoad() async { - add(TapableSquare()..anchor = Anchor.center); - add(TapableSquare()..y = 350); + add(TappableSquare()..anchor = Anchor.center); + add(TappableSquare()..y = 350); } } diff --git a/packages/flame/CHANGELOG.md b/packages/flame/CHANGELOG.md index c79ee3271..bd172a2c5 100644 --- a/packages/flame/CHANGELOG.md +++ b/packages/flame/CHANGELOG.md @@ -6,6 +6,8 @@ - Extract shared logic when handling components set in BaseComponent and BaseGame to ComponentSet. - Rename `camera.shake(amount: x)` to `camera.shake(duration: x)` - Fix `SpriteAnimationComponent` docs to use `Future.wait` + - Rename `Tapable` to `Tappable` + - Rename `HasTapableComponents` to `HasTappableComponents` ## [1.0.0-releasecandidate.12] - Fix link to code in example stories diff --git a/packages/flame/lib/components.dart b/packages/flame/lib/components.dart index 0ce772106..e1e89970b 100644 --- a/packages/flame/lib/components.dart +++ b/packages/flame/lib/components.dart @@ -11,7 +11,7 @@ export 'src/components/mixins/has_game_ref.dart'; export 'src/components/mixins/hitbox.dart'; export 'src/components/mixins/hoverable.dart'; export 'src/components/mixins/single_child_particle.dart'; -export 'src/components/mixins/tapable.dart'; +export 'src/components/mixins/tappable.dart'; export 'src/components/nine_tile_box_component.dart'; export 'src/components/parallax_component.dart'; export 'src/components/particle_component.dart'; diff --git a/packages/flame/lib/src/components/mixins/tapable.dart b/packages/flame/lib/src/components/mixins/tappable.dart similarity index 74% rename from packages/flame/lib/src/components/mixins/tapable.dart rename to packages/flame/lib/src/components/mixins/tappable.dart index fd70a2bb4..4da00f3e9 100644 --- a/packages/flame/lib/src/components/mixins/tapable.dart +++ b/packages/flame/lib/src/components/mixins/tappable.dart @@ -5,7 +5,7 @@ import '../../game/base_game.dart'; import '../../gestures/events.dart'; import '../base_component.dart'; -mixin Tapable on BaseComponent { +mixin Tappable on BaseComponent { bool onTapCancel() { return true; } @@ -47,14 +47,14 @@ mixin Tapable on BaseComponent { } } -mixin HasTapableComponents on BaseGame { - void _handleTapEvent(bool Function(Tapable child) tapEventHandler) { +mixin HasTappableComponents on BaseGame { + void _handleTapEvent(bool Function(Tappable child) tapEventHandler) { for (final c in components.reversed()) { var shouldContinue = true; if (c is BaseComponent) { - shouldContinue = c.propagateToChildren(tapEventHandler); + shouldContinue = c.propagateToChildren(tapEventHandler); } - if (c is Tapable && shouldContinue) { + if (c is Tappable && shouldContinue) { shouldContinue = tapEventHandler(c); } if (!shouldContinue) { @@ -65,16 +65,16 @@ mixin HasTapableComponents on BaseGame { @mustCallSuper void onTapCancel(int pointerId) { - _handleTapEvent((Tapable child) => child.handleTapCancel(pointerId)); + _handleTapEvent((Tappable child) => child.handleTapCancel(pointerId)); } @mustCallSuper void onTapDown(int pointerId, TapDownInfo info) { - _handleTapEvent((Tapable child) => child.handleTapDown(pointerId, info)); + _handleTapEvent((Tappable child) => child.handleTapDown(pointerId, info)); } @mustCallSuper void onTapUp(int pointerId, TapUpInfo info) { - _handleTapEvent((Tapable child) => child.handleTapUp(pointerId, info)); + _handleTapEvent((Tappable child) => child.handleTapUp(pointerId, info)); } } diff --git a/packages/flame/lib/src/game/base_game.dart b/packages/flame/lib/src/game/base_game.dart index f63f7c4b4..df32d3f26 100644 --- a/packages/flame/lib/src/game/base_game.dart +++ b/packages/flame/lib/src/game/base_game.dart @@ -11,7 +11,7 @@ import '../components/mixins/draggable.dart'; import '../components/mixins/has_collidables.dart'; import '../components/mixins/has_game_ref.dart'; import '../components/mixins/hoverable.dart'; -import '../components/mixins/tapable.dart'; +import '../components/mixins/tappable.dart'; import '../fps_counter.dart'; import 'camera.dart'; import 'game.dart'; @@ -111,10 +111,10 @@ class BaseGame extends Game with FPSCounter { 'You can only use the Hitbox/Collidable feature with games that has the HasCollidables mixin', ); } - if (c is Tapable) { + if (c is Tappable) { assert( - this is HasTapableComponents, - 'Tapable Components can only be added to a BaseGame with HasTapableComponents', + this is HasTappableComponents, + 'Tappable Components can only be added to a BaseGame with HasTappableComponents', ); } if (c is Draggable) { diff --git a/packages/flame/lib/src/game/game_widget/gestures.dart b/packages/flame/lib/src/game/game_widget/gestures.dart index 9ce3e196f..a35c0f811 100644 --- a/packages/flame/lib/src/game/game_widget/gestures.dart +++ b/packages/flame/lib/src/game/game_widget/gestures.dart @@ -4,7 +4,6 @@ import 'package:flutter/widgets.dart'; import '../../../components.dart'; import '../../../extensions.dart'; import '../../components/mixins/draggable.dart'; -import '../../components/mixins/tapable.dart'; import '../../extensions/offset.dart'; import '../../gestures/detectors.dart'; import '../../gestures/events.dart'; @@ -24,7 +23,7 @@ bool hasBasicGestureDetectors(Game game) => bool hasAdvancedGesturesDetectors(Game game) => game is MultiTouchTapDetector || game is MultiTouchDragDetector || - game is HasTapableComponents || + game is HasTappableComponents || game is HasDraggableComponents; bool hasMouseDetectors(Game game) => @@ -231,7 +230,7 @@ Widget applyAdvancedGesturesDetectors(Game game, Widget child) { instance.onTapCancel = game.onTapCancel; instance.onTap = game.onTap; }); - } else if (game is HasTapableComponents) { + } else if (game is HasTappableComponents) { addAndConfigureRecognizer( () => MultiTapGestureRecognizer(), (MultiTapGestureRecognizer instance) { diff --git a/packages/flame/test/components/composed_component_test.dart b/packages/flame/test/components/composed_component_test.dart index c573f6e53..fb7ecd852 100644 --- a/packages/flame/test/components/composed_component_test.dart +++ b/packages/flame/test/components/composed_component_test.dart @@ -7,9 +7,9 @@ import 'package:test/test.dart'; import '../util/mock_canvas.dart'; import '../util/mock_gesture_events.dart'; -class MyGame extends BaseGame with HasTapableComponents {} +class MyGame extends BaseGame with HasTappableComponents {} -class MyTap extends PositionComponent with Tapable { +class MyTap extends PositionComponent with Tappable { late Vector2 gameSize; int tapTimes = 0; @@ -47,9 +47,9 @@ class MyAsyncChild extends MyTap { Future onLoad() => Future.value(); } -class MyComposed extends PositionComponent with HasGameRef, Tapable {} +class MyComposed extends PositionComponent with HasGameRef, Tappable {} -class MySimpleComposed extends BaseComponent with HasGameRef, Tapable {} +class MySimpleComposed extends BaseComponent with HasGameRef, Tappable {} // composed w/o HasGameRef class PlainComposed extends BaseComponent {} diff --git a/packages/flame/test/components/tapables_test.dart b/packages/flame/test/components/tapables_test.dart index df7c9e851..436316148 100644 --- a/packages/flame/test/components/tapables_test.dart +++ b/packages/flame/test/components/tapables_test.dart @@ -2,25 +2,25 @@ import 'package:flame/components.dart'; import 'package:flame/game.dart'; import 'package:test/test.dart'; -class _GameWithTapables extends BaseGame with HasTapableComponents {} +class _GameWithTappables extends BaseGame with HasTappableComponents {} -class _GameWithoutTapables extends BaseGame {} +class _GameWithoutTappables extends BaseGame {} -class TapableComponent extends PositionComponent with Tapable {} +class TappableComponent extends PositionComponent with Tappable {} void main() { - group('tapables test', () { + group('tappables test', () { test('make sure they cannot be added to invalid games', () async { - final game1 = _GameWithTapables(); + final game1 = _GameWithTappables(); game1.onResize(Vector2.all(100)); // should be ok - await game1.add(TapableComponent()); + await game1.add(TappableComponent()); - final game2 = _GameWithoutTapables(); + final game2 = _GameWithoutTappables(); game2.onResize(Vector2.all(100)); expect( - () => game2.add(TapableComponent()), + () => game2.add(TappableComponent()), throwsA(isA()), ); }); diff --git a/packages/flame/test/game/base_game_test.dart b/packages/flame/test/game/base_game_test.dart index fd6a35888..a5f2b9759 100644 --- a/packages/flame/test/game/base_game_test.dart +++ b/packages/flame/test/game/base_game_test.dart @@ -11,9 +11,9 @@ import 'package:test/test.dart'; import '../util/mock_gesture_events.dart'; -class MyGame extends BaseGame with HasTapableComponents {} +class MyGame extends BaseGame with HasTappableComponents {} -class MyComponent extends PositionComponent with Tapable, HasGameRef { +class MyComponent extends PositionComponent with Tappable, HasGameRef { bool tapped = false; bool isUpdateCalled = false; bool isRenderCalled = false; @@ -59,7 +59,7 @@ class MyAsyncComponent extends MyComponent { Future onLoad() => Future.value(); } -class PositionComponentNoNeedForRect extends PositionComponent with Tapable {} +class PositionComponentNoNeedForRect extends PositionComponent with Tappable {} Vector2 size = Vector2(1.0, 1.0); diff --git a/packages/flame_forge2d/example/lib/main.dart b/packages/flame_forge2d/example/lib/main.dart index 18682a305..4016c4879 100644 --- a/packages/flame_forge2d/example/lib/main.dart +++ b/packages/flame_forge2d/example/lib/main.dart @@ -11,7 +11,7 @@ import 'draggable_sample.dart'; import 'mouse_joint_sample.dart'; import 'position_body_sample.dart'; import 'sprite_body_sample.dart'; -import 'tapable_sample.dart'; +import 'tappable_sample.dart'; String link(String example) => 'https://github.com/flame-engine/flame_forge2d/tree/main/example/lib/$example'; @@ -52,9 +52,9 @@ void main() async { codeLink: link('position_body_sample.dart'), ) ..add( - 'Tapable Body', - (DashbookContext ctx) => GameWidget(game: TapableSample()), - codeLink: link('tapable_sample.dart'), + 'Tappable Body', + (DashbookContext ctx) => GameWidget(game: TappableSample()), + codeLink: link('tappable_sample.dart'), ) ..add( 'Draggable Body', diff --git a/packages/flame_forge2d/example/lib/tapable_sample.dart b/packages/flame_forge2d/example/lib/tappable_sample.dart similarity index 71% rename from packages/flame_forge2d/example/lib/tapable_sample.dart rename to packages/flame_forge2d/example/lib/tappable_sample.dart index e71d428be..2bebff0dc 100644 --- a/packages/flame_forge2d/example/lib/tapable_sample.dart +++ b/packages/flame_forge2d/example/lib/tappable_sample.dart @@ -1,26 +1,26 @@ -import 'package:flame_forge2d/flame_forge2d.dart'; -import 'package:forge2d/forge2d.dart'; -import 'package:flame_forge2d/forge2d_game.dart'; -import 'package:flame/palette.dart'; import 'package:flame/components.dart'; +import 'package:flame/palette.dart'; +import 'package:flame_forge2d/flame_forge2d.dart'; +import 'package:flame_forge2d/forge2d_game.dart'; +import 'package:forge2d/forge2d.dart'; import 'balls.dart'; import 'boundaries.dart'; -class TapableSample extends Forge2DGame with HasTapableComponents { - TapableSample() : super(zoom: 20, gravity: Vector2(0, -10.0)); +class TappableSample extends Forge2DGame with HasTappableComponents { + TappableSample() : super(zoom: 20, gravity: Vector2(0, -10.0)); @override Future onLoad() async { final boundaries = createBoundaries(this); boundaries.forEach(add); final center = screenToWorld(viewport.effectiveSize / 2); - add(TapableBall(center)); + add(TappableBall(center)); } } -class TapableBall extends Ball with Tapable { - TapableBall(Vector2 position) : super(position) { +class TappableBall extends Ball with Tappable { + TappableBall(Vector2 position) : super(position) { originalPaint = BasicPalette.white.paint(); paint = originalPaint; } diff --git a/tutorials/2_sprite_animations_gestures/README.md b/tutorials/2_sprite_animations_gestures/README.md index b7a7e280b..312492e75 100644 --- a/tutorials/2_sprite_animations_gestures/README.md +++ b/tutorials/2_sprite_animations_gestures/README.md @@ -171,7 +171,7 @@ Finally, we just render it on the game `render` function: You now should see the button on the screen, but right now, it is pretty much useless as it has no action at all. -So, to change that, we will now add some interactivity to our game and make the button tapable/clickable. +So, to change that, we will now add some interactivity to our game and make the button tappable/clickable. Flame provides several input handlers, which you can check with more in depth on [our docs](https://github.com/flame-engine/flame/blob/main/doc/input.md). For this tutorial, we will be using the `TapDetector` which enables us to detect taps on the screen, as well as mouse click when running on web or desktop.