Flutter, Flame y Android TV, también conocido como El bueno, el feo y el malo. | Por Polinc | Enero 2022

OK

Protagonista: Flutter. No se necesita presentación: todos ya conocen Flutter. es genial. Nada puede aumentar o disminuir. Por alguna razón, los señores de Flutter decidieron equipar el marco con una biblioteca de juegos, por lo que este breve artículo sobre mis aventuras utiliza una nueva biblioteca llamada Flame.

malo

Según la documentación, el objetivo del motor de llamas es proporcionar un conjunto completo de soluciones a problemas comunes que pueden compartir los juegos desarrollados con Flutter. Flame ofrece actualmente las siguientes funciones:

• Un bucle de juego.
• Sistema Componente/Objeto (FCS).
• Efectos y partículas.
• Comprobación de impacto.
• Gesto y soporte de entrada.
• Imágenes, animaciones, sprites y hojas de sprites.
• Utilidades adicionales para facilitar el desarrollo.

Esta es la teoría. Para ponerlo en práctica, decidí hacer un pequeño juego. Un simple one-pager basado en un esquema de cruce de calles. Entonces, ¿qué pasa con las llamas? malo. No digo que sea malo, pero… sí, es básicamente malo. Tengo mucha experiencia en el desarrollo de juegos con libGDX y JMonkey, hago juegos con estos motores y es difícil incluso compararlos con Flame. Primero, está seriamente subdesarrollado, pero es difícil esperar algo avanzado en la versión 1.0. Tengo algunos problemas para actualizar el estado cuando uso componentes del juego. Todo es tan básico. En segundo lugar, en realidad no hay documentación razonable, al menos actualizada. Encontré varios tutoriales relacionados con Flame beta. Por último, pero no menos importante, cambiar de la estructura de código basada en árbol y el patrón de diseño de estado de Flutter a la programación basada en bucles es muy difícil. Entonces, al final, Flame hizo un trabajo terrible. Puede mejorar con el tiempo con futuros lanzamientos, aunque puede surgir una pregunta: ¿para qué? No creo que nadie haya pedido este motor de juego.

feo

Es hora de ser feo. Eso es Android TV. Bueno, porque no estoy usando un televisor con Android. En cambio, tengo un dispositivo Mi Box físico con Android. Es el reproductor multimedia doméstico de Xiaomi, por lo que básicamente es un dispositivo externo que se conecta a tu televisor y luego lo usa como pantalla. En el modo en línea, Mi Box puede descargar aplicaciones de Google Play. En modo sin conexión, puede instalar la aplicación desde el archivo apk. Entonces, la parte fea es cómo el dispositivo físico maneja el juego. Mi box está controlado por control remoto bluetooth, tiene algunos botones adicionales como el botón OK o flechas direccionales, sin mencionar los botones físicos estándar de Android como el botón de inicio. Tratar con ellos es una conjetura. No hay absolutamente ninguna documentación sobre qué códigos clave devuelven las teclas de Mi Box, aunque Flame nos permite manejar eventos clave físicos y lógicos.

Para manejar eventos clave en Flame, la clase de juego principal se amplía con un mixin:

class MyGame extends FlameGame with KeyboardEvents{…}

El manejo se realiza en el método anulado onKeyEvent:

@overrideKeyEventResult onKeyEvent(RawKeyEvent event, Set keysPressed) {final isKeyDown = event is RawKeyDownEvent;…}

Mi primer desafío fue cómo manejar las flechas direccionales. En teoría, los botones de flecha pueden ser tanto físicos como lógicos. Probablemente por eso puedo usar las clases PhysicalKeyboardKey y LogicalKeyboardKey para manejar las teclas de flecha. Elegí quedarme con PhysicalKeyboardKey:

if (event.physicalKey == PhysicalKeyboardKey.arrowLeft) { }else if (event.physicalKey == PhysicalKeyboardKey.arrowRight) { }else if (event.physicalKey == PhysicalKeyboardKey.arrowUp) { }else if (event.physicalKey == PhysicalKeyboardKey.arrowDown) {}

La gran pregunta es qué hacer con el botón Atrás. En los dispositivos Android normales es un botón virtual, mientras que en Mi box es un botón físico, por lo que creo que también puede ser manejado por las clases PhysicalKeyboardKey y LogicalKeyboardKey. Sorprendentemente, no hay goBack en la clase PhysicalKeyboardKey, pero LogicalKeyboardKey hace el trabajo:

else if (event.logicalKey == LogicalKeyboardKey.goBack) {}

Lo último que hay que tratar es el botón Aceptar. Inicialmente pensé que esta sería la parte más fácil ya que el teclado virtual tiene un botón de entrada, pero… no es así. Probé muchos otros eventos clave, tanto físicos como lógicos, desde abrir, guardar, reproducir hasta aceptar. Entonces, la solución es el evento de selección de PhysicalKeyboardKey:

else if (event.physicalKey == PhysicalKeyboardKey.select) { }

últimos retoques

Para crear una aplicación de Android TV adecuada, tuve que hacer algunos pequeños ajustes. Primero, necesito crear un banner en lugar de un ícono de aplicación, que es una imagen de 320×180 píxeles.Lo nombré banner.png y lo copié en

carpeta android/app/src/main/res/drawable. A continuación, agrego el banner a mi aplicación en el archivo AndroidManifest.xml:

android:name="io.flutter.app.FlutterApplication"
android:label="flutter_android_tv"
android:banner="@drawable/banner"
android:icon="@mipmap/ic_launcher">
...

Lo siguiente es agregar algunos Pestañas para manejar problemas de pantalla completa y pantalla táctil:

package="com.polinc.sisandbro.sisandbro">------

También tuve que agregar un filtro de intención:

Finalmente, dado que quiero tener una aplicación para dispositivos móviles, necesito una forma de verificar si la aplicación se está ejecutando en el televisor. Lo uso para agregar un joystick virtual. La solución más fácil es comprobar la resolución:

bool isTV (){final data = MediaQueryData.fromWindow(window);return data.size.longestSide < 800 ? false : true;}

final feliz

Después de lidiar con todos los errores de Flame y el hardware de terceros, debo decir que no fue tan fácil como pensaba, aunque podría haber sido peor. ¿Vale la pena? No, no es. Existen bibliotecas basadas en Java mejores y más simples. Puedes ver el juego por ti mismo: Google Play