Hexagonal Tactical Battle Engine with Sprites & Animations in JavaScript
This JavaScript-based sprite engine delivers smooth unit animations, movement, and interactions on a point-top hex grid with even-r row offset. It supports dynamic resizing on screen resize—including rotation on mobile devices. High-level APIs let you issue commands like moving to a target hex or attacking an enemy without diving into low-level logic.
At the low level, functions are available for switching sprite animations, smoothly moving objects, placing units on hexes, and pathfinding. Algorithms highlight reachable tiles for movement and attack. Animations include walking, attacking, taking damage, and death—dead units remain on the battlefield.
Different animations play at adaptive speeds: idle states are slower, while dynamic actions like attacks are faster.
Desktop and Mobile Controls
Unit movement: Clicking a target hex highlights the path, just like in classic Heroes-style games. On mobile without a cursor, double-tap the hex to confirm.
Attack: Click a hex occupied by an enemy to reveal possible attack positions. A second click triggers the attack; clicking elsewhere cancels the selection. For units spanning multiple hexes, each hex is divided into zones to resolve ambiguity. Optimization suggestion: a second tap on the enemy initiates attack from the closest valid tile.
Attack timing includes a 50% chance of instant kill against the opponent.
AI-Generated Sprites
Sprites were created using ChatGPT (free and paid versions produce identical quality). Backgrounds are fully prompt-driven; sprites require post-processing: background removal, centering, and manual animation refinement.
Common issues:
- Lack of alternating leg motion in walking cycles — manually corrected.
- Weapon swapping between hands (e.g., elf rider).
- Artifacts in archer animations: arrows without bows or bows without strings.
- Fantastical distortions in rider death animations.
- Unwanted text overlays on images.
Corrective prompts are ineffective; new generation sessions are required. Post-processing involves cutting out elements, rotating fragments, and blending seams.
Future Development Roadmap
Next steps:
- Unit stats (attack, defense, health), damage formulas, initiative system for turn order (separate from speed, for balance—e.g., catapults).
- Grouping units into rectangles with health indicators (DOM elements with progress bars).
- Hover tooltips displaying unit info.
- Ranged units with projectile animations (arrows, rocks, beams).
- Flying units that overlay other units.
- AI for solo combat scenarios.
- Networked PvP architecture based on client-server model.
- Two-hex attacks (dragons, cyclopes).
Key Highlights
- Point-top even-r hex grid with pathfinding and placement algorithms.
- Adaptive animations with variable speed and responsive scaling.
- Cross-platform controls: clicks/taps for desktop and mobile.
- AI-generated sprites requiring mandatory post-processing.
- High-level API for tactical commands.
Demo available on Netlify and itch.io. Project focuses on tactical battles without full campaign mode.
— Editorial Team
No comments yet.