Motor para batallas en hexágonos en JS: sprites y animaciones

Motor de Combate Estratégico Hexagonal con Sprites y Animaciones en JavaScript

Este motor basado en JavaScript ofrece animaciones suaves de unidades, movimiento y interacciones sobre una cuadrícula hexagonal con vértice superior y desplazamiento par en filas. Soporta redimensionamiento dinámico al cambiar el tamaño de la pantalla, incluida la rotación en dispositivos móviles. Sus APIs de alto nivel permiten emitir órdenes como moverse a un hexágono objetivo o atacar a un enemigo sin necesidad de profundizar en lógica de bajo nivel.

A nivel bajo, se disponen funciones para cambiar animaciones de sprites, mover objetos con suavidad, colocar unidades en hexágonos y realizar búsqueda de caminos. Los algoritmos destacan las casillas alcanzables para movimiento y ataque. Las animaciones incluyen caminar, atacar, recibir daño y morir — las unidades muertas permanecen en el campo de batalla.

Diferentes animaciones se reproducen a velocidades adaptativas: los estados inactivos son más lentos, mientras que las acciones dinámicas como los ataques son más rápidas.

Controles para Escritorio y Móvil

Movimiento de unidades: hacer clic en un hexágono objetivo resalta la ruta, tal como en juegos clásicos del estilo Heroes. En móviles sin cursor, toca dos veces el hexágono para confirmar.

Ataque: haz clic en un hexágono ocupado por un enemigo para ver posibles posiciones de ataque. Un segundo clic activa el ataque; hacer clic en otra parte cancela la selección. Para unidades que abarcan múltiples hexágonos, cada uno se divide en zonas para resolver ambigüedades. Sugerencia de optimización: un segundo toque sobre el enemigo inicia el ataque desde el tile más cercano válido.

El momento del ataque incluye un 50 % de probabilidad de matanza instantánea contra el oponente.

Sprites Generados por IA

Los sprites fueron creados usando ChatGPT (las versiones gratuita y de pago generan calidad idéntica). Los fondos son completamente generados mediante prompts; los sprites requieren postprocesamiento: eliminación de fondo, centrado y refinamiento manual de animaciones.

Problemas comunes:

• Falta de movimiento alternado de piernas en ciclos de caminar — corregido manualmente.
• Intercambio de arma entre manos (por ejemplo, jinete elfo).
• Artefactos en animaciones de arqueros: flechas sin arcos o arcos sin cuerdas.
• Distorsiones fantásticas en animaciones de muerte de jinetes.
• Textos no deseados superpuestos en imágenes.

Los prompts correctivos no funcionan; se requieren nuevas sesiones de generación. El postprocesamiento implica recortar elementos, rotar fragmentos y mezclar costuras.

Hoja de Ruta para el Desarrollo Futuro

Próximos pasos:

• Estadísticas de unidades (ataque, defensa, salud), fórmulas de daño y sistema de iniciativa para el orden de turnos (separado de velocidad, para equilibrio — por ejemplo, catapulta).
• Agrupación de unidades en rectángulos con indicadores de salud (elementos DOM con barras de progreso).
• Tooltip al pasar el ratón mostrando información de la unidad.
• Unidades a distancia con animaciones de proyectiles (flechas, piedras, rayos).
• Unidades voladoras que se superponen a otras.
• Inteligencia artificial para escenarios de combate individual.
• Arquitectura PvP en red basada en modelo cliente-servidor.
• Ataques de dos hexágonos (dragones, cíclopes).

Destacados Clave

• Cuadrícula hexagonal punto-arriba con desplazamiento par, con algoritmos de búsqueda de camino y colocación.
• Animaciones adaptables con velocidad variable y escalado responsive.
• Controles multiplataforma: clics/taps para escritorio y móvil.
• Sprites generados por IA que requieren postprocesamiento obligatorio.
• API de alto nivel para comandos tácticos.

Demo disponible en Netlify e itch.io. El proyecto se centra en combates tácticos sin modo campaña completo.

— Editorial Team