Reto: Mover sprite al pulsar flechas de direcciones en Flutter Flame

- Andrés Cruz

In english
Reto: Mover sprite al pulsar flechas de direcciones en Flutter Flame

Ya sabemos como usar los eventos de teclado en Flame a nivel de clase y componente, ahora, como reto, adapta el código anterior y además de las flechas, que se puedan utilizar las teclas de w (arriba), d (derecha), s (abajo) y a (izquierda).

Resolución reto

Para agregar las teclas típicas en de WASD en nuestro script, podemos hacer un sencillo condicional con un OR:

@override
bool onKeyEvent(
    RawKeyEvent event,
    Set<LogicalKeyboardKey> keysPressed,
  ) {
    if (keysPressed.contains(LogicalKeyboardKey.arrowUp) ||
        keysPressed.contains(LogicalKeyboardKey.keyW)) {
      position = Vector2(centerX, centerY--);
    } else if (keysPressed.contains(LogicalKeyboardKey.arrowDown) ||
        keysPressed.contains(LogicalKeyboardKey.keyS)) {
      position = Vector2(centerX, centerY++);
    } else if (keysPressed.contains(LogicalKeyboardKey.arrowRight) ||
        keysPressed.contains(LogicalKeyboardKey.keyD)) {
      position = Vector2(centerX++, centerY);
    } else if (keysPressed.contains(LogicalKeyboardKey.arrowLeft) ||
        keysPressed.contains(LogicalKeyboardKey.keyA)) {
      position = Vector2(centerX--, centerY);
    }
    return true;
}

Como puedes ver, la lógica es sencilla, basta con detectar las teclas típicas de WASD y de direcciones y desplazar el player en la posición acorde; recordemos que para:

  • X si es positivo, se mueve a la derecha y negativo a la izquierda.
  • Y si es positivo hacia abajo y negativo hacia arriba.
Andrés Cruz

Desarrollo con Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz en Udemy

Acepto recibir anuncios de interes sobre este Blog.