O hře › Technologie

Na čem City Defense běží: použité technologie

City Defense je čistě webová hra: mapa, 3D město, hledání cest nepřátel, simulace i test botem běží v prohlížeči hráče. Server jen posílá statické soubory. Hra stojí na MapLibre GL JS (mapa), Three.js (3D), vektorových dlaždicích OpenFreeMap z dat OpenStreetMap, TypeScriptu a Vite.

Aktualizováno 30. září 2026

Přehled technologií

Mapa: MapLibre a vektorové dlaždice

Mapu kreslí MapLibre GL JS, otevřená knihovna pro vektorové mapy v prohlížeči. Podklad je styl Liberty od OpenFreeMap, který servíruje vektorové dlaždice ve schématu OpenMapTiles vytvořené z dat OpenStreetMap. Nejpodrobnější dlaždice mají zoom 14.

Hra si nic nestahuje předem. Ulice, budovy, povrchy a vodu čte z dlaždic, které mapa stejně načetla pro zobrazení (funkce querySourceFeatures). Ikony obchodů a restaurací ze stylu schovává, aby mapa působila čistě a boj byl čitelný.

Herní svět z mapových dat

• Síť ulic je graf s vahami podle třídy ulice. Nejkratší cesty k branám bráněné plochy hledá Dijkstrův algoritmus z více zdrojů najednou. Po zřícení budovy se trasy přepočítají.
• Výšková mapa má krok 1 m a výšky v decimetrech. Po poškození budovy se přepočítá jen její obdélník.
• Výhled věží se počítá paprskem nad výškovou mapou (průchod mřížkou podle Amanatidese a Woo). Při stavbě věže vznikne tabulka výhledu po 1 m podél ulic v dosahu, za běhu se jen vyhledává.
• Balistika má herní gravitaci 30 m/s², úhel náměru ze vzorce a kontrolu nárazu paraboly do fasád a střech.
• Simulace běží s pevným krokem 1/60 s a se seedovanou náhodou. Stejné tahy dají stejnou hru, takže testy a boti jsou opakovatelní.

3D ve stejném plátně jako mapa

Three.js kreslí do stejného WebGL kontextu jako MapLibre, jako vlastní vrstvy mapy: zem, město se stromy a postavy. Díky společné hloubce budovy správně zakrývají nepřátele. Nepřítel schovaný za domem je vidět jako barevná silueta („rentgen“).

• Ve 3D je jen hrací plocha a 60 m okolo, zbytek mapy zůstává plochý. V Brně je to asi 1 100 budov.
• Stíny budov počítá statická stínová mapa 4096 × 4096 (na dotykových zařízeních 2048 × 2048), přepočítá se jen při změně.
• Stylizovaný styl kreslí fasády, okna po patrech, střechy i poškození shadery bez textur.
• Realistický styl používá fotografické textury CC0 a okna kreslená v kódu. Barvy omítek a střech volí podle regionu (7 regionů od střední Evropy po východní Asii) podle souřadnic mise.

Web Workery: těžká práce mimo hlavní vlákno

Geometrii města, ruiny, hromady sutí a masku povrchů země (po 1 m, v Brně 1 400 × 1 400 buněk) staví Web Worker, aby se hra při načítání nezasekávala. Ve workerech běží i test mise botem: na počítači se čtyřmi a více jádry hrají oba boti současně.

Textury KTX2

Realistický styl má pět polí textur ve formátu KTX2 (Basis Universal): 11 omítek a zdí, 3 fasády výškových budov, 7 krytin střech, 3 druhy sutí a 11 povrchů země. Celkem 3,24 MB. Stahují se jen při volbě realistického stylu a grafická karta je dostane ve formátu, který umí. Převodník (transkodér) je součástí hry, nic se nenačítá z cizích CDN.

Hosting: statické soubory, výpočet u hráče

Hra je statický web na Cloudflare Workers s doménou citydefense.app. Server nic nepočítá – simulace, trasy, 3D i boti běží v prohlížeči hráče. Z prohlížeče se volají jen dvě cizí služby: dlaždice OpenFreeMap a v editoru vyhledávání Photon. Hra nemá účty ani vlastní databázi. Mise se ukládají v prohlížeči a sdílejí odkazem.

Testy

Čistou logiku hry hlídá přes tisíc automatických testů ve Vitestu. Regresní testy běží na čtyřech skutečných dlaždicích Brna uložených v repozitáři (síť ulic, budovy, povrchy země). Balanční test hraje misi počítačovými boty a hlídá, aby obtížnost zůstala v dohodnutém pásmu. Shadery kontroluje glslang.