Godot: CyberTD - Tower defense game

Tower defense hra vytvořená v Godotu.

Godot: CyberTD - Tower defense game

Začalo to celkem nevinně: postavit tower defense hru inspirovanou Infinitode 2. Pár věží, pár nepřátel, mřížka a cesta. Prostě pohodový projekt na odpoledne.

O několik hodin později už po obrazovce létaly projektily, AStar2D algoritmus přepočítával cestu kolem zdí a CRT shader ohýbal obraz do podoby starého CRT monitoru. Tak vzniklo CyberTD.

Základ: Godot a pořádná mřížka

Hru jsem postavil v Godotu 4.7 a psal v GDScriptu. Herní plocha je mřížka 18 × 12 polí, na které hráč pravým tlačítkem staví zdi a na ně následně pokládá věže.

Zdi ale nejsou jen dekorace. Každá nová zeď mění trasu nepřátel, takže po jejím položení nastoupí AStar2D a ověří, jestli stále existuje cesta mezi spawnerem a základnou. Pokud by hráč průchod kompletně zazdil, hra stavbu odmítne a vrátí mapu do původního stavu.

Tohle byla jedna z nejdůležitějších částí projektu. Tower defense, ve kterém lze nepřátele zazdít do kouta a jít si uvařit kafe, by totiž měl poněkud krátkou životnost.

Věže, které nejsou jen barevné čtverečky

CyberTD má několik typů věží s rozdílnou cenou, dostřelem, rychlostí útoku a typem projektilu. Každá dostala vlastní geometrický tvar a barvu, aby byla čitelná i bez textur:

  • základní univerzální věž
  • sniper s dlouhým dosahem
  • cannon pro tvrdší zásahy
  • freezing věž pro zpomalování
  • venom věž s jedovým efektem
  • splash věž proti skupinám

Věže sledují nepřátele na trase, vybírají cíl podle jeho postupu a vypouštějí samostatné projektily. Lze je vylepšovat až do desáté úrovně nebo prodat a získat část investovaných goldů zpět.

Ekonomika dostala jednoduché, ale důležité pojistky. Když nejsou goldy, věž se nepostaví. A když jsou na mapě nepřátelé, nelze měnit zdi a přepočítávat jim trasu pod nohama. Stavět se znovu smí až ve chvíli, kdy je obrazovka čistá (bez nepřátel).

Vlny, nepřátelé a okamžik, kdy dojdou životy

Wave manager skládá jednotlivé vlny a postupně přidává rychlé, tankové a shielded nepřátele. Každý z nich dostane aktuální cestu z AStar2D grafu a vyrazí od červeného spawneru směrem k zelené základně.

Pokud projde, základna ztratí život. Při nule se hra skutečně zastaví, odstraní zbývající nepřátele a zobrazí GAME OVER obrazovku s možností okamžitého restartu.

CRT obraz, neon a trochu osmdesátek

Funkční hra byla jen půlka plánu. CyberTD mělo vypadat jako hra vytažená ze starého arcade kabinetu, takže přišel na řadu fullscreen CRT shader:

  • jemné zakřivení obrazu
  • scanlines
  • vinětace
  • chromatická aberace
  • lehce zvýrazněný jas

UI dostalo tmavé panely, cyan linky a pulzující prvky. Tlačítko Start Wave nemá klasické pozadí ani rámeček; pouze pomalu dýchá neonovým textem. Stejným způsobem pulzuje i mřížka a tečkovaná linka vypočítané cesty.

Spawner a základna nakonec dostaly vlastní animaci čtvercových vln. Ze spawneru se obrysy šíří ven, jako by nepřátelé vylézali z portálu. U základny se pohybují dovnitř, protože tam naopak mizí. Po prvním testu animace běžela tak rychle, že málem otevřela portál do čtvrté dimenze. Teď už pulzuje civilizovaně.

Z Godotu rovnou do arcade automatu

Hotovou hru jsem vyexportoval do WebAssembly a spustil v prohlížeči. Samotný canvas by ale byl trochu nuda, takže jsem kolem něj postavil ještě jednu vrstvu: obrázek arcade automatu s průhledným výřezem pro obrazovku.

HTML obal přesně zarovnává Godot canvas pod výřez o poměru 16:9. Automat se responzivně škáluje podle velikosti okna a PNG zůstává nad hrou jako skutečný rám kabinetu. Výsledek působí, jako by CyberTD běželo přímo v malé herní mašině na webu.

Arcade kabinet s hrou CyberTD

Bohužel výsledná hra byla na ovládání příliš malá a proto jsem se rozhodl servovat hru ve fullscreen módu. Většina hráčů si tak může vychutnat CyberTD v celé své kráse, ať už na monitoru nebo na tabletu.

Co jsme použili

  • Godot 4.7 a GDScript
  • AStar2D pro dynamické hledání cesty
  • vlastní grid a stavební systém
  • dynamické věže, projektily a wave manager
  • canvas shader pro CRT post-processing
  • Tween animace pro jemné UI efekty
  • HTML/CSS obal pro webový arcade kabinet
  • WebAssembly export pro hraní přímo v prohlížeči

A co dál?

CyberTD už má funkční herní smyčku: postavit obranu, spustit vlnu, vydělat goldy, vylepšovat věže a snažit se udržet základnu při životě. Teď přichází ta příjemnější část vývoje: ladění balancu, nové typy nepřátel, další věže, zvuky a možná i pořádný high-score systém.

Každopádně základ stojí. Cesta se počítá, věže střílejí, CRT svítí a arcade automat čeká na další minci. Chceš si zahrát? START GAME