Breaking

Post Top Ad

Your Ad Spot

martes, 8 de octubre de 2019

Juego de serpiente 2D en Flutter & Hummingbird

Hola de nuevo amigos! He pasado algún tiempo jugando con Flutter y Hummingbird desde mi última publicación y me he involucrado en otro experimento.
Esta vez, decidí recrear un viejo videojuego clásico llamado Snake en Flutter y Hummingbird.
Hablé sobre Flutter y Hummingbird en un artículo anterior. Detalla las principales diferencias y arquitecturas de ellos también. Puedes revisarlo aquí .
Eso lleva a la pregunta, ¿es diferente la arquitectura de Flutter y Flutter Web?
En realidad no, pero entonces sí!
La mayoría de la arquitectura es común, solo el motor cambiará en FlutterWeb. La arquitectura móvil es la siguiente.
Flutter para arquitectura móvil
Se explica por sí mismo y si no lo entiendes, Internet es tu amigo para este. Hay toneladas de material disponible en arquitectura, pero una descripción básica es la siguiente:
Flutter Engine está expuesto como la biblioteca de nivel más bajo en Flutter como dart: ui . No sabe nada sobre widgets, física, animación o diseño (excepto el diseño de texto). Todo lo que sabe es cómo componer imágenes en la pantalla y convertirlas en píxeles. Sería difícil escribir aplicaciones directamente sobre dart: ui. Por eso se crearon las capas superiores.
Skia es un motor gráfico de código abierto desarrollado inicialmente por una compañía que lleva el mismo nombre, que luego fue entregado a Google y ahora es utilizado por Google Chrome, Android, Chrome OS y muchos otros productos.
El motor de texto representa y gestiona los diseños de texto y Dart es el componente de tiempo de ejecución en el nivel más bajo.
Aleteo para la arquitectura web
El Proyecto Hummingbird se encuentra en las primeras etapas de desarrollo en este momento. Todos los complementos aún no son compatibles y el rendimiento puede parecer lento a veces. No todas las API de Flutter son compatibles (¡el equipo planea agregar compatibilidad para todas las API de Flutter eventualmente!) Y la interacción completa del escritorio no está completa. A medida que el proyecto madure, se espera que estos problemas se resuelvan.
Su arquitectura difiere de Flutter Mobile de la siguiente manera.
Vuelve a implementar la capa Dart UI con enlaces al DOM y HTML5 Canvas en lugar de usar directamente Skia. Los elementos que no se pueden representar con elementos DOM se dibujan con el lienzo.
Hagamos un viaje por el carril de la memoria.

Construyendo el juego.

Flutter es una de las mejores plataformas para desarrollar un videojuego, especialmente los videojuegos 2D.

Empezando

El primer paso es definir algunos tipos personalizados utilizando la enumpalabra clave. Es importante definir los estados del juego start, running, failurey también los controles (direcciones) left, right, up, downAhora, creemos la interfaz de usuario que tendrá un cuadro y una tabla de puntuación y 4 controladores.
El siguiente fragmento representa la interfaz de usuario de la imagen de Box donde su hijo se utiliza como un widget de detector de gestos desde el cual, se reciben detalles del toque y, en función de estos comentarios, se cambia el estado del juego. Digamos que si un jugador toca el botón de inicio, el juego recibe una entrada para iniciar el programa, que inicia el juego.
Ahora, es importante generar la interfaz de usuario para el marcador. Se hace posible utilizando un Contenedor simple con dimensiones 100 X 100y una variable scoreque gobierna la longitud de la serpiente.
A continuación, creamos la interfaz de usuario para los controladores (direcciones). Esta interfaz de usuario contendrá algunos botones direccionales y algunos colores para diferenciarlos. Al hacer clic en un controlador en particular, el estado se establece con esa dirección en particular, que cambia la dirección de la serpiente. Digamos, si el usuario hace clic en la dirección correcta, el estado se establece right y la serpiente se mueve en la dirección correcta en su posición.
La serpiente comienza con 3 puntos como su cuerpo desde el centro del tablero. Los puntos aleatorios se generan en el tablero como coleccionables. Si la cabeza de la serpiente (el primer punto de la serpiente en la dirección del movimiento) golpea la posición del nuevo punto, se agrega un nuevo punto al cuerpo de la serpiente y eso aumenta su longitud.
Los niños están siendo cambiados según el estado del juego. Si se inicia el estado del juego, se activa un niño que muestra el mensaje 'Toca para iniciar el juego y no toques muros' y el puntaje se establece de manera predeterminada en cero. Esta funcionalidad está integrada en el siguiente fragmento de código.
Del mismo modo, si el estado del juego se está ejecutando, el juego funciona como se describe anteriormente. newSnakePointInGamees el punto aleatorio que se muestra, snakePiecesWithNewPointses el último cuerpo de serpiente después de recoger el punto aleatorio.
Cuando finaliza el juego, el estado se convierte en fracaso y se muestra el puntaje mientras se muestra un mensaje para comenzar de nuevo.
La serpiente parece moverse en una dirección cuando se inicia un nuevo juego. ¿Cómo se logra eso?
El truco es que está controlado por un temporizador donde, después de cada 400 ms, se elimina un punto del final y se agrega a la posición de inicio. Esto da la impresión de que la serpiente se mueve en una dirección particular. Las posiciones y el movimiento se crean de la siguiente manera:
Y finalmente, basándose en las left, right, up, downflechas, decida la posición en la que se moverá la serpiente.
El resultado final es esta pequeña cosa divertida.
Y en la web, el mismo juego se parece a esto.
Este increíble juego de bolsillo es fácil de construir y divertido de jugar. Puede agregar aún más funciones y sprites para que se vea bien y sea más desafiante. Puedes encontrar el repositorio de GitHub para el juego a continuación.

No hay comentarios.:

Publicar un comentario

Dejanos tu comentario para seguir mejorando!

Post Top Ad

Your Ad Spot

Páginas