Silnik do bitew heksowych na JS: sprite'y i animacje

Silnik animacji dla walk taktycznych na siatce heksagonalnej w JavaScript

Silnik oparty na JavaScript zapewnia animacje jednostek, ich przemieszczanie oraz interakcje na siatce heksagonalnej z orientacją 'point-top' i przesunięciem parzystych rzędów. Obsługuje dynamiczne dostosowanie rozmiaru podczas zmiany wielkości ekranu, w tym obrót na urządzeniach mobilnych. Wysokopoziomowe API pozwalają na wykonywanie poleceń takich jak przechodzenie do wybranej komórki lub atakowanie celu bez konieczności szczegółowego rozumienia logiki niskiego poziomu.

Na niższym poziomie dostępne są funkcje do przełączania animacji sprite’ów, płynnego przemieszczania obiektów, umieszczania na heksach oraz wyszukiwania ścieżek. Algorytmy automatycznie podświetlają możliwe pola do ruchu i ataku. Animacje obejmują poruszanie się, uderzenie, otrzymywanie obrażeń i śmierć – ciała zabitych jednostek pozostają na planszy.

Różne animacje odtwarzane są z adaptacyjną prędkością: stany spoczynku są wolniejsze niż dynamiczne działania, takie jak atak.

Sterowanie na komputerach i urządzeniach mobilnych

Przesunięcie jednostki: kliknięcie w docelowy heks podświetla trasę, jak w klasycznych grach typu Heroes. Na urządzeniach mobilnych bez kursora — dwukrotne dotknięcie heksa potwierdza wybór.

Atak: kliknięcie w heks z przeciwnikiem podświetla możliwe pozycje ataku. Powtórne kliknięcie aktywuje atak; kliknięcie w inne miejsce anuluje wybór. Dla jednostek zajmujących więcej niż jedną komórkę, heks dzieli się na strefy, aby rozwiązać niejednoznaczność. Zalecana optymalizacja: drugie kliknięcie na przeciwniku inicjuje atak z najbliższej dostępnej komórki.

Realizacja ataku czasowo: 50% szansy na natychmiastową śmierć przeciwnika.

Generowanie sprite’ów za pomocą AI

Sprite’y zostały stworzone przez ChatGPT (wersje darmowa i płatna są równoważne pod względem jakości). Tła generowane są całkowicie na podstawie promptów; sprite’y wymagają post-processingu: usunięcie tła, wyśrodkowanie, ręczna korekta animacji.

Typowe błędy:

• Brak naprzemiennego kroku nogami – poprawia się ręcznie.
• Przesuwanie broni między rękami (np. u elfa jeźdźca).
• Artefakty u łuczników: strzała bez łuku albo łuk bez cięciwy.
• Fantastyczne deformacje w animacjach śmierci jeźdźców.
• Nadmiarowe napisy na obrazkach.

Poprawne prompty nie działają skutecznie – wymagany nowy dialog generatora. Post-processing obejmuje wycinanie, obracanie fragmentów oraz maskowanie szwów.

Plany rozwoju silnika

Następne zadania:

• Charakterystyki jednostek (atak, obrona, życie), formuły obrażeń, inicjatywa do kolejności ruchu (oddzielnie od szybkości, dla balansu np. katapulty).
• Grupowanie jednostek w prostokąty z wyświetlaniem zdrowia (elementy DOM z paskami stanu).
• Podpowiadające tooltipy z informacjami przy najechaniu kursorem.
• Jednostki strzelające z animacjami pocisków (strzały, kamienie, promienie).
• Jednostki latające z nakładaniem się na inne jednostki.
• AI do pojedynków jednoosobowych.
• Architektura PvP w sieci z klient-serwer.
• Atak dwuszęściowy (smoki, cyklopy).

Co jest ważne

• Siatka heksagonalna point-top z przesunięciem parzystych rzędów, algorytmy pathfinding i umieszczania.
• Animacje adaptacyjne z zmienną prędkością i skalowalnością.
• Sterowanie krzyżoplatformowe: kliknięcia/tapy dla komputerów i urządzeń mobilnych.
• Generowanie sprite’ów przez AI z wymogiem post-processingu.
• Wysokopoziomowe API do poleceń taktycznych.

Demo dostępne na Netlify i itch.io. Projekt skierowany jest na walki taktyczne bez pełnej kampanii.

— Editorial Team