Sprite-Engine für Hex-Kämpfe auf JS: Sprites und Animationen

Taktisches Kampfsystem mit Hexagon-Gitter und Animationen in JavaScript

Dieser JavaScript-basierte Sprite-Engine bietet reibungslose Animationsabläufe für Einheiten, Bewegung und Interaktionen auf einem punkt-oben Hexagon-Gitter mit gerader Zeilenverschiebung. Die Engine unterstützt dynamische Größenanpassung bei Fenstergroßveränderungen – inklusive Drehung auf mobilen Geräten. Hochwertige APIs ermöglichen Befehle wie das Bewegen zu einem Zielhexagon oder den Angriff auf einen Feind, ohne tief in die Low-Level-Logik einzusteigen.

Auf niedriger Ebene stehen Funktionen zur Verfügung, um Sprites zu wechseln, Objekte nahtlos zu bewegen, Einheiten auf Hexagon-Felder zu platzieren und Pfadfindung durchzuführen. Algorithmen markieren erreichbare Felder für Bewegung und Angriff. Zu den Animationen gehören Gehen, Angreifen, Schaden nehmen und Tod – tote Einheiten bleiben auf dem Schlachtfeld liegen.

Verschiedene Animationen laufen mit adaptiver Geschwindigkeit: Ruhezustände sind langsamer, während dynamische Aktionen wie Angriffe schneller ablaufen.

Steuerung für Desktop und Mobile

Einheit bewegen: Klicken Sie auf ein Zielhexagon, um den Weg hervorzuheben – genau wie in klassischen Heroes-artigen Spielen. Auf Mobilgeräten ohne Cursor doppelklicken Sie einfach auf das Hexagon, um die Auswahl zu bestätigen.

Angriff: Klicken Sie auf ein Hexagon mit einer gegnerischen Einheit, um mögliche Angriffspositionen zu sehen. Ein zweiter Klick löst den Angriff aus; ein Klick außerhalb hebt die Auswahl auf. Bei Einheiten, die mehrere Hexagone besetzen, werden die Felder in Zonen unterteilt, um Unklarheiten zu vermeiden. Optimierungstipp: Ein zweiter Tipp auf den Gegner startet den Angriff von der nächstgelegenen gültigen Position aus.

Die Angriffszeit beinhaltet eine 50-prozentige Chance auf sofortige Kopfzertrümmerung des Gegners.

KI-generierte Sprites

Die Sprites wurden mit ChatGPT erstellt (kostenlose und kostenpflichtige Versionen liefern identische Qualität). Hintergründe sind vollständig promptbasiert; Sprites erfordern Nachbearbeitung: Hintergrundentfernung, Zentrierung und manuelle Verbesserung der Animationen.

Häufige Probleme:

• Fehlende Wechselbewegung der Beine im Gehen – manuell korrigiert.
• Waffenwechsel zwischen den Händen (z. B. Elfenreiter).
• Artefakte in Bogenschützenanimationen: Pfeile ohne Bogen oder Bögen ohne Sehne.
• Fantastische Verzerrungen in Reiter-Todesanimationen.
• Unwünschte Textüberlagerungen auf Bildern.

Korrektur-Prompts wirken nicht; neue Generations-Sessions sind erforderlich. Die Nachbearbeitung umfasst Ausschneiden von Elementen, Drehen von Fragmenten und Nahtverblendung.

Zukünftige Entwicklungspläne

Nächste Schritte:

• Einheitenstatistiken (Angriff, Verteidigung, Gesundheit), Schadensformeln, Initiative-System für Spielreihenfolge (getrennt von Geschwindigkeit für Balance – z. B. Katapulte).
• Gruppierung von Einheiten in Rechtecken mit Gesundheitsanzeigen (DOM-Elemente mit Fortschrittsbalken).
• Hover-Tooltips zur Anzeige von Einheiteninformationen.
• Fernkampfeinheiten mit Projektil-Animationen (Pfeile, Steine, Strahlen).
• Fliegende Einheiten, die über andere Einheiten hinwegfliegen.
• KI für Solo-Kampfszenarien.
• Netzwerk-PvP-Architektur basierend auf Client-Server-Modell.
• Zweihexagon-Angriffe (Drachen, Zyklopen).

Hauptmerkmale

• Punkt-oben-gerader-Hexagon-Gitter mit Pfadfindung und Platzierungsalgorithmen.
• Adaptive Animationen mit variabler Geschwindigkeit und responsive Skalierung.
• Cross-Plattform-Steuerelemente: Klicks/Taps für Desktop und Mobile.
• KI-generierte Sprites mit obligatorischer Nachbearbeitung.
• Hochwertige API für taktische Befehle.

Demo verfügbar auf Netlify und itch.io. Das Projekt konzentriert sich auf taktische Schlachten ohne vollständigen Kampagnenmodus.

— Editorial Team