MapGenerator

MapGenerator to pełnofunkcjonalny generator świata proceduralnego, który transformuje jedno ziarno w w pełni zrealizowaną mapę fantasy. Spring Boot backend produkuje deterministyczny teren przy użyciu FastNoiseLite i przesyła go do klienta Vue 3 + TypeScript, który renderuje cały świat na kanwie HTML5 Canvas.

Celem projektu jest połączenie powtarzalności generacji opartej na ziarnie z bogatością wizualną ręcznie tworzonej mapy — stylizowana woda, miękkie cienie topografii i proceduralne rozmieszczone miasta — przy jednoczesnym utrzymaniu gładkiej renderyzacji na kliencie.

Kluczowe funkcje

• Interaktywny widok: Panning i zoom w stylu Google Maps wewnątrz stałego widoku 800x600, wspierany przez wirtualną kanwę, dzięki czemu każdą ramkę rysowana jest tylko widoczna część.
• Animacja stylizowanej wody: Proceduralne wzory fal zainspirowane grami takimi jak Don't Starve, z dynamiczną przezroczystością i subtelnym falowaniem linii brzegu.
• Tekstury proceduralne terenu: Ziarno, pęczki, grzbiery i falowania są generowane po stronie klienta w czasie rzeczywistym, dzięki czemu teren pozostaje ostry na każdym poziomie powiększenia.
• Topografia i cienie: Cieniowanie gradientu wysokości zapewnia wrażenie 3D bez opuszczania potoku renderowania 2D.
• Miasta proceduralne: Każda osada jest renderowana z unikalnie wygenerowanymi domami i wieżowcami, dzięki czemu żadne dwa miasta nie wyglądają tak samo.

Architektura

System jest podzielony na deterministyczny backend generacji i frontend skoncentrowany na prezentacji, połączony poprzez streaming API.

      
[ Seed ] --> [ Spring Boot + FastNoiseLite ] --> [ Streaming API ]
                                                       ↓
                                           [ Vue 3 / TS / Canvas ]
                                                       ↓
                                          [ Virtual Canvas Renderer ]
      
    

• Backend: Spring Boot, Spring Data JPA, Hibernate, PostgreSQL i FastNoiseLite do generacji terenu opartej na szumie.
• Frontend: Vue 3 Composition API, TypeScript, Vite i Axios, renderowanie bezpośrednio do HTML5 Canvas.
• Infrastruktura: Docker i Docker Compose do lokalnej konfiguracji całego stosu za jedno polecenie.

Wydajność

Renderer używa hybrydowego podejścia wirtualnej kanwy: statyczny teren jest wstępnie renderowany w warstwy poza ekranem, a tylko elementy animowane (woda, cienie, szczegóły budynków) są przerysowywane każdą ramkę. To utrzymuje gładkość doświadczenia nawet na dużych światach, przy jednoczesnym zachowaniu wyglądu proceduralnego na każdym poziomie powiększenia.