Moteur pour batailles hex sur JS : sprites et animations

Moteur de combat tactique hexagonal avec sprites et animations en JavaScript

Ce moteur sprite basé sur JavaScript offre des animations fluides pour les unités, leur déplacement et leurs interactions sur une grille hexagonale pointe-haut avec décalage des lignes paires. Il prend en charge le redimensionnement dynamique lors du changement de taille d’écran — y compris la rotation sur les appareils mobiles. Des API haut niveau permettent d’envoyer des commandes comme se déplacer vers une case cible ou attaquer un ennemi sans plonger dans la logique basse couche.

Au niveau bas, des fonctions sont disponibles pour changer les animations des sprites, déplacer des objets de manière fluide, placer des unités sur les cases hexagonales et effectuer des calculs de cheminement. Les algorithmes mettent en évidence les cases accessibles pour le mouvement et l’attaque. Les animations incluent la marche, l’attaque, les dégâts subis et la mort — les unités décédées restent sur le champ de bataille.

Des vitesses adaptatives régulent les animations : les états inactifs sont plus lents, tandis que les actions dynamiques comme les attaques sont accélérées.

Contrôles desktop et mobile

Déplacement des unités : cliquez sur une case cible pour visualiser le chemin, comme dans les jeux classiques du style Heroes. Sur mobile, sans curseur, double-tappez la case pour confirmer.

Attaque : cliquez sur une case occupée par un ennemi pour révéler les positions d’attaque possibles. Un second clic déclenche l’attaque ; cliquer ailleurs annule la sélection. Pour les unités qui couvrent plusieurs cases, chaque case est divisée en zones pour éviter toute ambiguïté. Astuce d’optimisation : un deuxième tap sur l’ennemi lance l’attaque depuis la case valide la plus proche.

Le timing d’attaque inclut une chance de 50 % de tuer instantanément l’adversaire.

Sprites générés par IA

Les sprites ont été créés à l’aide de ChatGPT (les versions gratuites et payantes produisent une qualité identique). Les arrière-plans sont entièrement générés via prompt ; les sprites nécessitent un post-traitement : suppression du fond, centrage et affinage manuel des animations.

Problèmes fréquents :

• Absence de mouvement alterné des jambes dans les cycles de marche — corrigé manuellement.
• Échange de l’arme entre les mains (ex. cavalier elfe).
• Artifacts dans les animations des archers : flèches sans arc ou arcs sans cordes.
• Distorsions fantastiques dans les animations de mort des cavaliers.
• Textes superposés non désirés sur les images.

Les prompts correctifs sont inefficaces ; il faut lancer de nouvelles sessions de génération. Le post-traitement consiste à découper les éléments, faire pivoter les fragments et fusionner les joints.

Plan d’évolution futur

Étapes suivantes :

• Statistiques d’unités (attaque, défense, santé), formules de dégâts, système d’initiative pour l’ordre des tours (distinct de la vitesse, pour l’équilibre — ex. catapultes).
• Regroupement des unités en rectangles avec indicateurs de santé (éléments DOM avec barres de progression).
• Tooltip au survol pour afficher les informations des unités.
• Unités à distance avec animations de projectiles (flèches, pierres, rayons).
• Unités volantes qui chevauchent d’autres unités.
• Intelligence artificielle pour les scénarios de combat solo.
• Architecture PvP réseau basée sur modèle client-serveur.
• Attaques sur deux cases (dragons, cyclopes).

Points forts

• Grille hexagonale pointe-haut, décalage pair-r, avec algorithmes de cheminement et de placement.
• Animations adaptatives à vitesse variable et mise à l’échelle réactive.
• Contrôles multiplateformes : clics/taps pour desktop et mobile.
• Sprites générés par IA nécessitant un post-traitement obligatoire.
• API haut niveau pour commandes tactiques.

Démonstration disponible sur Netlify et itch.io. Le projet se concentre sur les combats tactiques sans mode campagne complet.

— Editorial Team