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.

Video Transcript

Just like we did before with the keyboard we can also expand the tap from our component and its practically the same thing the only thing we have to do here is use a specific class so so that this doesnt generate noise Im going to comment this and here Im going to place the mixer called already with this Okay lets copy this because its practically the same control c I comment it we go back here we implement it in Excel called tappable and now we can place it Im going to place it down here this now it returns according to what we place we import here the input this again returns a Bull So we put return this for the propagation and this would be practically everything here Im going to save Im going to reload Remember that I commented here the code should work the one we have here we go back here and I start to give it some covers if we search here we have it so thats how easy it is to use the tap component from our component

20-08-2024 - Andrés Cruz

En español

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