Dotar al usuario para que pueda interactuar con el juego mediante:
- Teclado
- Drag and Drop
- Gestos
- Tap/toque (en la mayoría de los casos, equivalente al evento click)
- Joystick virtual
Entre otros; las entradas, son una funcionalidad fundamental en cualquier juego hoy en día; en Flame, podemos implementar este tipo de funcionalidades mediante eventos los cuales son escuchados mediante una función escuchadora.
En este apartado, vamos a trabajar con las entradas de teclado; Flame ofrece dos formas diferentes de tomar entradas de teclado:
- A nivel de la clase Game.
- A nivel de componentes.
En cualquiera de los escenarios, su uso es muy sencillo y es similar a otros enfoques, por ejemplo, el de JavaScript, en el cual, tenemos una función listener llamada onKeyEvent que se ejecuta cada vez que presiona una tecla, en dicha función, recibimos el evento con la tecla presionada a la cual, podemos aplicar cualquier lógica.
Nivel de la clase Game
Para poder dotar a la aplicación para que reconozca los eventos de teclado, es decir, que, al presionar una tecla, poder asignar alguna función, podemos emplear la clase de KeyboardEvents sobre la clase de tipo Game.
Esta viene siendo la manera más global ya que, los eventos se ejecutan a nivel de la clase Game, que recordemos que es global a toda la aplicación y no de los componentes que es donde la mayoría de las veces nos interesa interactuar; es decir, como vimos en el ejemplo anterior, en el cual dibujamos un sprite en un componente, si quisiéramos mover ese sprite, que puede simular nuestro jugador o player, nos interesa es que dicho componente reciba los eventos de teclado (o entrada en general); aun así, es importante conocer que a nivel de la clase Game podemos agregar este tipo de interactividad ya que, muchas veces es necesario que varios componentes necesitan realizar alguna funcionalidad cuando ocurre (por ejemplo) una entrada de teclado; por ejemplo, tenemos dos componentes:
- Un jugador
- El escenario
Que tal cual vimos, son dos clases apartes, dependiendo de la lógica de tu juego, puede ser que, al presionar (por ejemplo) la tecla de movimiento (flecha arriba o la tecla W) esto aplique el movimiento en el jugador y un cambio en el escenario, y en estos casos, hay que comunicar dos componentes y no solamente uno.
A nivel de la clase FlameGame, debemos de agregar el mixin de KeyboardEvents y con esto, sobrescribir la función onKeyEvent; este método recibe dos parámetros los cuales devuelven las teclas presionadas:
Caso práctico
Siguiendo con nuestra aplicación, vamos a colocar a nivel de la clase FlameGame, el escuchador de las entradas de teclado:
class MyGame extends FlameGame with KeyboardEvents {
***
@override
KeyEventResult onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
super.onKeyEvent(event, keysPressed);
//print(keysPressed);
print(event);
return KeyEventResult.handled;
}
}Al presionar distintas teclas, con cualquiera de los eventos, veremos una salida como la siguiente:
{LogicalKeyboardKey#00301(keyId: "0x100000301", keyLabel: "Arrow Down", debugName: "Arrow Down")}
RawKeyUpEvent#881c1(logicalKey: LogicalKeyboardKey#00304(keyId: "0x100000304", keyLabel: "Arrow Up", debugName: "Arrow Up"), physicalKey: PhysicalKeyboardKey#70052(usbHidUsage: "0x00070052", debugName: "Arrow Up"))En el caso anterior, se presionó la tecla de flecha arriba o arrow up.
Para este experimento, no realizaremos ninguna adaptación más en la aplicación ya que, la lógica del juego va a estar implementada en los componentes y no a nivel de juego.
Puedes crear condiciones como:
keysPressed.contains(LogicalKeyboardKey.arrowUp)Para preguntar por la tecla presionada.
Transcripción del vídeo
Ahora vamos a agregar nuevamente algo de interactividad a nuestra aplicación es decir que nuestro usuario pueda interactuar con nuestra aplicación las que tenemos aquí ya que el ejercicio que vamos a querer hacer un poco más adelante Es que le pegas aquí un tap Entonces por aquí vamos a cambiar la animación para comenzar a hacer todo el proceso que te explicaba anteriormente por supuesto lo puedes hacer con teclado pero no quiero hacerlo Al menos de esa manera así pues también aprovechamos para presentar otro mecanismo en el cual Tenemos aquí para las entradas de datos recuerda que aquí estamos en la documentación de flame yo aquí seleccione la última que sería esta la fecha por aquí le damos aquí en input y por aquí tenemos el de teclado que ya lo vimos y también tenemos el de tap que es el de toque como el de click pero toque la pantalla el cual es muy pero muy sencillo a la final puedes recordar un poco lo que te comentaba las entradas son el mecanismo con el cual nosotros es decir el jugador puede interactuar con nuestra aplicación ya sea por el teclado en este caso sería por los toques pero es para que lo puedas mover saltar todo depende del tipo aplicación que esté llevando a cabo ya que por ejemplo puede ser un juego tipo flappy Bird en el caso en este caso no sería necesario el teclado si no serían simplemente toques a la pantalla pero Puede que sea sin juegos tipo Mario Pokémon o lo que sea en la cual tenemos ya sea las crucetas en la pantalla o directamente el teclado todo depende lo que quieras hacer y por eso que tenemos estas entradas vamos a ver aquí la etapa el cual vamos a comenzar nuevamente aquí por la clase ya que también lo tenemos a nivel de componentes como puede ver por aquí aquí también tenemos para llevar la componentes de momento no vamos a ver eso pero aquí también lo tenemos para simplemente la clase tipo game en este caso sería la de playing Espero que me haya explicado correctamente y bueno por lo demás al agregar la clase no sería esta sería la detector bueno en fin ahorita la revisamos vamos a tener uso de estas funciones que son varias como puedes ver Te pudieras preguntar por qué demonios tenemos cuatro funciones es decir:
Tenemos aquí la de la de la de up y finalmente aquí la de cancel bueno tenemos cuatro porque varios escenarios posibles este sería la modelo es decir la que nosotros prácticamente Siempre vamos a emplear que cuando el usuario toca la pantalla cuál es el problema Cuál es la situación que hay dos tipos de toques al igual que ocurre con los clips tenemos un clic sostenido es decir el de tipo long o lo tenemos simple y es básicamente lo que tenemos aquí este Sería para cuando el usuario presiona la tecla por unas pocas milésimas de segundos Entonces ya tenemos un clic sostenido y este sería el típico un toque simple por eso que tenemos dos una para este y otra para el otro cuál utilizar Depende de tu aplicación También tenemos otro que fíjate que es interesante ya que este se va a ejecutar solamente cuando la secuencia anterior es decir esta función fue exitosa lo que nos lleva al siguiente caso voy a dejar aquí este de por medio para explicar este luego creo que se entiende mejor este aquí Tenemos uno llamado optan Cancel y este se va a ejecutar cuando ocurren problemas es decir cuando falló el evento Te pudieras preguntar cómo demonios puedes pasar eso bueno tal cual te indica por aquí hay varios escenarios por ejemplo cuando el usuario presiones Pero luego se convierte en Data Es decir para arrastrar que es otra de las entradas que tenemos aquí o simplemente cuando el componente cambio de lugar desapareció la aplicación se cerró este tipo de escenarios significan que se va a ejecutar esta función es decir cuando ocurren problemas los que no lleven a este que tenemos acá y este solamente se va a ejecutar Cuando no tenemos problemas es decir cuando no ocurre el cáncer y se va a ejecutar justamente luego desde Qué significa cuando Bueno y este evento es cuando levantamos el dedo Y tenemos todo nuevamente Este es el que se va a ejecutar cuando damos un toque este sería Cuando tenemos el token este sería Cuando tenemos problemas y este sería cuando levantamos el dedo eso sería todo por eso que tenemos cuatro y en fin para utilizarlo vamos a venir aquí a la clase de main al archivo de main y por aquí no sé si me lo van a tomarlo voy a colocar aquí el de pack detector ya con esto podemos hacer uso de las funciones anteriores yo voy a colocar aquí dos para no complicarme de más voy a ver si la reconoce un tap aquí tenemos el de Down:
class MyGame extends FlameGame with KeyboardEvents {
***
@override
KeyEventResult onKeyEvent(
RawKeyEvent event,
Set<LogicalKeyboardKey> keysPressed,
) {
super.onKeyEvent(event, keysPressed);
//print(keysPressed);
print(event);
return KeyEventResult.handled;
}
}El que te indicaba vamos a imprimir aquí el info colocó y también tenemos el de up y lo mismo voy a imprimir aquí el esto más que todo nos da información sobre donde el usuario presionó es decir en qué parte En base unas coordenadas el usuario tocó la pantalla eso sería prácticamente todo damos aquí una recarga Bueno aquí tenemos todo esto tenemos que descontar esto ahora Para que no haga ruido ya que lo probamos voy a comentar el pin creo que no era Este era este por comentar aquí El pin para probar esto de una mejor manera Y regresamos por aquí aquí tenemos la aplicación damos un toque damos otro toque y aquí lo tenemos tal cual puedes ver fíjate que primero se ejecuta el de Down Y luego el dedo cuando termina el toque y aquí tenemos distancia del mismo.
en fin nuevamente lo puedes emplear En caso de que quieras más información Generalmente no es necesario Aunque depende nuevamente el juego que esté realizando pero ya con el toque ya tú puedes encadenar algo ya sea por ejemplo saltar en nuestro caso va a ser cambiar la animación Aunque claro está para esto necesitamos es atar todos estos eventos directamente en el componente y no aquí en nuestra clase principal es decir a la clase en el nivel de clase en este caso la clase de tipo flame game Pero eso lo vemos en el siguiente video.
- Andrés Cruz
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter