Evento tap o click a nivel de los componentes - Flutter con Flame
El evento "tap" se refiere a una de las muchas acciones que tenemos disponibles como entrada de datos por parte del usuario (jugador) en la que tocan o hacen click en la ventana de nuestro juego sobre una pantalla con la cual puede interactuar el usuario, como sería un teléfono inteligente con Android, iOS, una tableta, iPAD, etc
El tap puede ser la acción de tocar el elemento con un dedo, mientras que en una computadora, un tap puede ser la acción de hacer clic con un mouse en el elemento; y en Flame con Flutter esto es fundamental;
El evento "tap" se utiliza comúnmente en el desarrollo de aplicaciones móviles y de escritorio para permitir que los usuarios interactúen con la interfaz de usuario; es el evento por excelencia junto con la entrada de teclado que lo tratamos en otra entrada.
Con el evento tap podemos hacer toda clase te juegos como el tipico planta vs zombies para seleccionar y colocar una planta, para indicar que un caracer tiene que saltar, atacar…
Em definitiva, como toda entrada de datos, lo que queiras hacer depende de ti.
El tap es ora entrada de datos que podemos utilizar en Flame, es el de tap sobre la pantalla que a la final viene siendo un evento click; al igual que con la entrada de teclado, podemos utilizar el evento tap a nivel de la clase como a nivel de componentes.
Tap a nivel de componente
Para poder utilizar el evento de tap a nivel del componente, primero, debemos de habilitarlo a nivel del componente en la clase tipo Game:
lib/main.dart
class <LevelGame> extends FlameGame
with
HasTappables {}Y desde el componente, implementamos el mixin de Tappable:
class <Component> extends <TypeComponent> with Tappable {}Con esto, tenemos acceso a las mismas funciones que las usadas a nivel de la clase Game que mostramos antes.
Por ejemplo, una posible implementación queda como:
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;
}
}Con el par de funciones anteriores, podejos determinar si ejecutar el evento al tocar la pantalla o al dejar de precionar la pantalla respetivamente; usualmente se usa es la de onTapDown, que es cuando el usurio da un click sobre la pantalla, pero, tambien puedes que quieras colocar alguna lógica cuando el usuario levanta el dedo o libera el click… en ese caso, puedes usar el de onTapUp en su lugar.
Nuevamente, lo que implementes en estas funciones depende de tu juego, en nuestro curso y libro sobre Flame para el desarrollo de juegos en 2D, hacemos toda clase de juegos con las mismas, ya sea para seleccionar las plantas y colcoarlar, en nuestro juego de plantas vs zombies, para seleccionar items, entre otros.
Transcripción del vídeo
Al igual que hicimos antes con el teclado también podemos ampliar el tap desde nuestro componente y es prácticamente lo mismo lo único que tenemos que hacer aquí es emplear una clase en específico así que, para que esto no nos genere ruido voy a comentar esto y por aquí voy a colocar el mixer llamado ya con esto Bueno vamos a copiar esto porque prácticamente lo mismo control c lo comento regresamos aquí implementamos en Excel llamado tappable y ahora lo podemos colocar voy a colocarlo por aquí abajo esto ahora devuelve según colocamos importamos aquí la entrada del input esto nuevamente devuelve un Bull Así que colocamos retorno este para la propagación y esto sería prácticamente todo por aquí voy a guardar voy a recargar Recuerda que comenté aquí el código debería de funcionar ese que tenemos aquí regresamos acá y empiezo a darle que algunos tapa si buscamos aquí lo tenemos así que así de fácil es emplear el componente de tap desde nuestro componente.
- Andrés Cruz
Este material forma parte de mi curso y libro completo; puedes adquirirlos desde el apartado de libros y/o cursos Curso y Libro Primeros pasos con Forge2D y Flame con Flutter.
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter