Cómo agregar un HUD a tu juego Flame

Esta es la última parte de mi serie de 4 partes donde aprendo cómo construir un juego de plataformas simple con el motor Flame. Ya sabemos cómo agregar un personaje de jugador animado al que llamé The Boy, cómo crear un nivel de juego desplazable usando el editor de mosaicos y cómo agregar gravedad y saltos con la ayuda de la detección de colisiones (partes , , ). 1 2 3 En esta parte, agregaremos monedas, que el personaje podría recolectar, HUD para mostrar cuántas monedas tiene el jugador y una pantalla de victoria, que mostraremos una vez que se hayan recolectado todas las monedas. Agregar monedas Necesitamos decirle al juego dónde generar monedas (o cualquier otro objeto del juego). Como habrás adivinado, vamos a usar el editor de mosaicos para agregar otra capa de objetos, de manera similar a como agregamos plataformas, pero con dos diferencias: Con las plataformas, incorporamos imágenes de sprites en los datos de nivel. Este método no es muy adecuado para las monedas, porque queremos eliminar el objeto una vez que el jugador lo recoge. Por lo tanto, solo agregaremos puntos de generación para saber dónde deben aparecer las monedas en el juego, y el renderizado se realizará utilizando los componentes de Flame. Para las plataformas, usamos rectángulos de cualquier tamaño, pero para las monedas, agregaremos puntos de generación para que tengan el tamaño de 1 mosaico. Sin embargo, si desea agregar una línea de monedas una tras otra (hola, Mario), puede hacerlo fácilmente modificando el código del juego y considerando el tamaño de un punto de generación al agregar objetos de monedas. Pero para los propósitos de esta serie, asumimos que los puntos de generación de monedas son 1x1. Abra nuestro nivel en el editor de mosaicos y cree una nueva capa de objetos llamada Monedas. Luego, usando la herramienta Rectangular, agregue varios puntos de generación en el mapa para que podamos agregar componentes de monedas usando el motor del juego. Mi nivel ahora se ve así: Debo agregar que nuestro juego es bastante simple y sabemos que estos rectángulos vacíos se convertirán en monedas en el tiempo de ejecución del juego. Pero si queremos agregar más tipos de objetos, será difícil distinguirlos. Afortunadamente, Tiled tiene una herramienta para eso, llamada "Insertar mosaico", que puede agregar señales visuales para cada objeto, pero estas imágenes no se renderizarán en el juego. Muy bien, guarde el nivel y regrese al IDE. Agreguemos nuestra clase a la carpeta . Coin /objects/ class Coin extends SpriteAnimationComponent with HasGameRef { late final SpriteAnimation spinAnimation; late final SpriteAnimation collectAnimation; Coin(Vector2 position) : super(position: position, size: Vector2.all(48)); @override Future onLoad() async { spinAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.COIN), SpriteAnimationData.sequenced( amount: 4, textureSize: Vector2.all(16), stepTime: 0.12, ), ); collectAnimation = SpriteAnimation.fromFrameData( game.images.fromCache(Assets.COIN), SpriteAnimationData.range( start: 4, end: 7, amount: 8, textureSize: Vector2.all(16), stepTimes: List.filled(4, 0.12), loop: false ), ); animation = spinAnimation; final hitbox = RectangleHitbox() ..collisionType = CollisionType.passive; add(hitbox); return super.onLoad(); } } Tenemos 2 animaciones diferentes para girar y recolectar y un , para verificar las colisiones con el jugador más adelante. RectangleHitbox el método Luego, regrese a game.dart y modifique spawnObjects para generar nuestras monedas: final coins = tileMap.getLayer ("Coins"); for (final coin in coins!.objects) { add(Coin(Vector2(coin.x, coin.y))); } Ejecute el juego y vea las monedas añadidas: Ahora hagamos que desaparezcan cuando el jugador los recopile. el método Regrese a coin.dart y agregue collect : void collect() { animation = collectAnimation; collectAnimation.onComplete = () => { removeFromParent() }; } Cuando se llame a este método, cambiaremos la animación giratoria a la de recolección y, una vez que haya terminado, eliminaremos este componente del juego. la clase el método Luego, vaya a theboy.dart y anule onCollisionStart : @override void onCollisionStart(Set intersectionPoints, PositionComponent other) { if (other is Coin) { other.collect(); } super.onCollisionStart(intersectionPoints, other); } La razón por la que usamos en lugar de es que queremos que la devolución de llamada de colisión se active solo una vez. onCollisionStart onCollision Las monedas ahora están desapareciendo al chocar con The Boy. Agreguemos la interfaz de usuario para rastrear la cantidad de monedas recolectadas. Agregando el HUD HUD, o pantalla de visualización frontal, es simplemente una barra de estado que muestra cualquier información sobre el juego: puntos de golpe, munición, etc. Mostraremos un ícono de moneda para cada moneda recolectada. En aras de la simplicidad, voy a almacenar el número de monedas en una variable, pero para interfaces más complejas, considere usar un paquete , que le permite actualizar y observar el estado del juego de manera conveniente. flame_bloc Agregue una nueva clase que contendrá lógica HUD: lib/hud.dart class Hud extends PositionComponent with HasGameRef { Hud() { positionType = PositionType.viewport; } void onCoinsNumberUpdated(int total) { final coin = SpriteComponent.fromImage( game.images.fromCache(Assets.HUD), position: Vector2((50 * total).toDouble(), 50), size: Vector2.all(48)); add(coin); } } Dos cosas interesantes aquí: Establecemos en para pegar nuestro HUD en la esquina de la pantalla. Si no lo hacemos, debido al movimiento de la cámara, HUD se moverá con el nivel. positionType PositionType.viewport Se llamará al método cada vez que el jugador recolecte la moneda. Utiliza el parámetro para calcular el desplazamiento del siguiente icono de moneda y luego agrega un nuevo objeto de moneda a la posición calculada. onCoinsNumberUpdated total archivo Luego, regrese al game.dart y agregue nuevas variables de clase: int _coins = 0; // Keeps track of collected coins late final Hud hud; // Reference to the HUD, to update it when the player collects a coin componente : Luego agregue el Hud en la parte inferior del método onLoad hud = Hud(); add(hud); Y agregue un nuevo método: void onCoinCollected() { _coins++; hud.onCoinsNumberUpdated(_coins); } de Finalmente, llámelo desde el método de collect Coin : void collect() { game.onCoinCollected(); animation = collectAnimation; collectAnimation.onComplete = () => { removeFromParent() }; } ¡Brillante, nuestro HUD ahora muestra cuántas monedas hemos recolectado! Pantalla de victoria Lo último que quiero agregar es la pantalla Win, que se mostrará una vez que el jugador recolecte todas las monedas. clase Agregue una nueva const a la PlatformerGame : late int _totalCoins; método Y asígnale el número de monedas que tenemos en el nivel. Agregue esta línea al final del spawnObjects : _totalCoins = coins.objects.length; Y agregue esto al final del método . onCoinCollected Tenga en cuenta que es posible que deba agregar a mano. import 'package:flutter/material.dart'; if (_coins == _totalCoins) { final text = TextComponent( text: 'U WIN!', textRenderer: TextPaint( style: TextStyle( fontSize: 200, fontWeight: FontWeight.bold, color: Colors.white, ), ), anchor: Anchor.center, position: camera.viewport.effectiveSize / 2, )..positionType = PositionType.viewport; add(text); Future.delayed(Duration(milliseconds: 200), () => { pauseEngine() }); } Aquí, verifico si el contador de monedas es igual a la cantidad de monedas en el nivel, y si es así, agrego una etiqueta Ganar en la parte superior de la pantalla del juego. Luego pausa el juego para detener el movimiento del jugador. También agregué un retraso de 200 ms para que la etiqueta se renderice antes de hacer una pausa. Debe tener un aspecto como este: ¡Y ese es el juego! Por supuesto, no parece un juego terminado ahora, pero con todo lo que expliqué, debería ser bastante fácil agregar más niveles, enemigos u otros elementos coleccionables. Resumen Esta parte concluye la serie. El motor de Flame tiene mucho más para ofrecer que no cubrí, incluido el motor de física Forge2D, partículas, efectos, menús de juego, audio, etc. Pero después de completar esta serie, comprendo cómo es el motor y tener una comprensión de cómo construir juegos más complejos. Flame es una herramienta poderosa pero fácil de usar y aprender. Es modular, lo que permite traer otras cosas geniales como Box2D y se mantiene activamente. Pero una de las mayores ventajas de Flame es que está construido sobre Flutter, lo que significa que brinda soporte multiplataforma con un poco de trabajo adicional. Sin embargo, ser una extensión de Flutter significa que todos los problemas de Flutter también persisten en Flame. Por ejemplo, ha estado abierto durante varios años sin resolución, y es posible que también lo notes en el juego que construimos. Pero en general, es una gran herramienta para crear juegos que vale la pena probar. el error antialiasing de Flutter Otras historias de la serie: Enseñando a tu personaje a correr en Flame Diseñando tu nivel en Flame Usar la detección de colisiones para hacer que tu personaje del juego salte El código completo para este tutorial, lo puedes encontrar en mi github Recursos Al final de cada parte, agregaré una lista de increíbles creadores y recursos de los que aprendí. Recursos del juego de plataformas Arcade de GrafxKid Documentación del editor de mosaicos Serie de desarrollo de juegos Flame de DevKage: https://youtu.be/mSPalRqZQS8 Canal de Craig Oda https://youtu.be/hwQpBuZoV9s Tutorial del juego Ember Quest Documentación de Flame Engine