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.
- Andrés Cruz
In english
Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter