Component level tap or click event - Flutter with Flame

The "tap" event refers to one of the many actions available to us as data input by the user (player) in which they tap or click in our game window on a screen with which the user can interact. , such as a smartphone with Android, iOS, a tablet, iPAD, etc.

The tap can be the action of touching the element with a finger, whereas on a computer, a tap can be the action of clicking the element with a mouse; and in Flame with Flutter this is essential;

The "tap" event is commonly used in desktop and mobile app development to allow users to interact with the user interface; It is the event par excellence together with the keyboard input that we deal with in another post.

With the tap event we can do all kinds of games like the typical plant vs zombies to select and place a plant, to indicate that a character has to jump, attack...

Ultimately, like all data entry, what you want to do is up to you.

 

The tap is now data entry that we can use in Flame, it is the tap on the screen that in the end is a click event; as with key-in, we can use the tap event at the class level as well as at the component level.

Component level tap

In order to use the tap event at the component level, we must first enable it at the component level in the Game type class:

lib/main.dart

class <LevelGame> extends FlameGame
    with
        HasTappables {}

And from the component, we implement the Tappable mixin:

class <Component> extends <TypeComponent> with Tappable {}

With this, we have access to the same functions as those used at the Game class level that we showed before.

For example, a possible implementation looks like:

lib\components\player_sprite_sheet_component.dart

class PlayeSpriteSheetComponent extends SpriteAnimationComponent with Tappable {
  ***
  @override
  bool onTapDown(TapDownInfo info) {
    print("Player tap down on ${info.eventPosition.game}");
    return true;
  }
  
  @override
  bool onTapUp(TapUpInfo info) {
    print("Player tap up on ${info.eventPosition.game}");
    return true;
  }
}

With the previous couple of functions, we can determine whether to execute the event when touching the screen or when releasing the screen respectively; usually used is the onTapDown, which is when the user clicks on the screen, but, you may also want to put some logic when the user lifts his finger or releases the click... in that case, you can use the onTapUp in its place.

Again, what you implement in these functions depends on your game, in our course and book on Flame for 2D game development, we make all kinds of games with them, whether it's to select the plants and place them, in our game of plants vs zombies, to select items, among others.

02-05-2023 - Andrés Cruz

En español

• Category
• /
• Flutter
• /
• Component level tap or click event - Flutter with Flame