Herní engine pro hex-bitvy v JS: sprity a animace

Správný herní engine pro taktické boje na hexagonální síti v JavaScriptu

Herní engine v JavaScriptu nabízí animace jednotek, pohyb a interakce na hexagonální síti s vrcholovou orientací a posunutím řad (even-r). Podporuje dynamické přizpůsobení velikosti při změně velikosti obrazovky, včetně otočení na mobilních zařízeních. Vysokou úrovní API umožňuje provádět akce jako pohyb do určeného pole nebo útok cíle bez nutnosti znát podrobnosti nízké úrovně logiky.

Na nízké úrovni jsou k dispozici funkce pro přepínání animací spritů, plynulý pohyb objektů, umístění na hexagonech a hledání tras. Algoritmy zvýrazňují dostupná pole pro pohyb i útok. Animace zahrnují pohyb, útok, zranění a smrt; mrtvé jednotky zůstávají na poli.

Různé animace se přehrávají s adaptivní rychlostí: stavy klidu jsou pomalejší než dynamické akce jako útok.

Ovládání na počítači a mobilních zařízeních

Pohyb jednotky: kliknutí na cílový hex zvýrazní trasu, stejně jako u klasických her typu Heroes. Na mobilních zařízeních bez kurzoru – dvojité klepnutí na hex pro potvrzení.

Útok: kliknutí na hex s nepřítelem zvýrazní možné pozice útoku. Opětovné kliknutí aktivuje útok; kliknutí mimo zruší výběr. U jednotek širších než jedno pole je hex rozdělen na zóny pro vyřešení neurčitostí. Navrhovaná optimalizace: druhé kliknutí na nepřítele spustí útok z nejbližšího pole.

Časová realizace útoku – 50% šance na okamžitou smrt nepřítele.

Generování spritů pomocí AI

Spritové obrázky byly vytvořeny prostřednictvím ChatGPT (bez rozdílu mezi zdarma a placenou verzí ve výsledné kvalitě). Pozadí se generuje plně pomocí promptů; sprity vyžadují postprocesing: odstranění pozadí, zarovnání, ruční úprava animací.

Běžné chyby:

• Chybějící střídání nohou při chůzi – opravuje se ručně.
• Přesun zbraně mezi rukama (např. u elfského jezdce).
• Artefakty u lukostřelců: šipka bez luku nebo luk bez struny.
• Fantastické deformace v animacích smrti jezdců.
• Nadbytečné texty na obrázcích.

Korekční prompty nejsou efektivní; vyžaduje se nový dialog s generátorem. Postprocesing zahrnuje výřez, rotaci fragmentů a zakrytí švů.

Plány rozvoje engine

Následující úkoly:

• Charakteristiky jednotek (útok, obrana, život), vzorce poškození, iniciativa pro pořadí tahu (odděleně od rychlosti, např. pro rovnováhu jako u katapulty).
• Skupinové uspořádání jednotek do obdélníků s indikátorem životních bodů (DOM prvky s pruhovými ukazateli).
• Nápady s informacemi při najetí myší.
• Střelecké jednotky s animacemi projektilů (šipky, kameny, paprsky).
• Letící jednotky s překryvem nad jinými.
• AI pro samostatné boje.
• Síťová PvP architektura na základě klient-server.
• Dvojhexový útok (draci, cyklopy).

Co je důležité

• Hexagonální síť s vrcholovou orientací even-r s algoritmy pro hledání cest a umístění.
• Adaptivní animace s proměnnou rychlostí a přizpůsobením velikosti.
• Křížové platformové ovládání: kliknutí/tapy pro počítače i mobily.
• Generování spritů pomocí AI s povinnou postprocesingovou úpravou.
• Vysokou úrovní API pro taktické příkazy.

Demo je dostupná na Netlify a itch.io. Projekt je zaměřen na taktické boje bez kompletní kampaně.

— Editorial Team