Strona e-learningowa jest zgodna ze standardami WCAG 2.1 na poziomie AA, zapewniając dostępność dla wszystkich użytkowników.

MODUŁ III — TWORZENIE MAPY I ŚRODOWISKA GRY

Trzeci moduł szkolenia poświęcony jest budowie środowiska gry 2D oraz tworzeniu kompletnej mapy poziomu w silniku Unity. Uczestnicy uczą się projektować świat gry w oparciu o system TileMap.

W trakcie zajęć omawiane jest tworzenie siatki Grid, budowanie mapy z kafelków oraz korzystanie z Tile Palette. Uczestnicy poznają zasady snapowania obiektów, eliminowania prześwitów pomiędzy kafelkami oraz optymalnego układania elementów środowiska gry.

Moduł obejmuje również konfigurację Pixel Perfect, tworzenie prefabów (pojedynczych i wieloelementowych), organizację środowiska gry oraz pracę z warstwami tła i pierwszego planu. Uczestnicy poznają także efekt paralaksy jako sposób budowania głębi w grach 2D.

Moduł III Unity 2D - TileMap i środowisko gry

Moduł III — Szczegółowa lekcja: Tworzenie mapy i środowiska gry (TileMap)

1. Wprowadzenie do TileMap

🧱 TileMap to specjalny system w Unity służący do budowania map i poziomów gry 2D. Zamiast ustawiać każdy element osobno, możemy „rysować” poziom z gotowych kafelków (tiles), podobnie jak budowanie z klocków LEGO.

TileMap jest bardzo popularny w:

  • platformówkach 2D,
  • grach RPG,
  • grach pixel-art,
  • grach logicznych i puzzle.

Dzięki TileMap:

  • budowanie poziomów jest szybsze,
  • łatwiej zachować równe odstępy,
  • mapa wygląda profesjonalnie,
  • łatwiej dodawać kolizje.

🟢 KROK 1 — Utworzenie Grid

📌 Grid to „siatka”, na której Unity układa kafelki TileMap. Najpierw musimy ją utworzyć.

Jak to zrobić:

  • Przejdź do okna Hierarchy.
  • Kliknij prawym przyciskiem myszy.
  • Wybierz:
2D Object → Tilemap → Rectangular

Unity automatycznie utworzy:

  • Grid
  • Tilemap

W oknie Hierarchy pojawią się nowe obiekty.

🟢 KROK 2 — Co utworzyło Unity?

📌 Po utworzeniu TileMap zobaczysz:

  • Grid

    To główna siatka gry. Pomaga ustawiać kafelki równo obok siebie.
  • Tilemap

    To warstwa, na której będziemy rysować poziom gry.

🟢 KROK 3 — Otwarcie Tile Palette

📌 Tile Palette to okno służące do malowania mapy.

Jak otworzyć:

  • Na górze Unity kliknij:
Window → 2D → Tile Palette

Pojawi się nowe okno: Tile Palette.

🟢 KROK 4 — Dodanie kafelków (tiles)

📌 W tym kroku dodamy pierwsze kafelki (Tiles), z których później zbudujemy mapę gry. Kafelki to małe obrazki PNG reprezentujące np. ziemię, trawę, kamienie albo platformy.

🟢 Krok 4.1 — Dodanie obrazków PNG do Unity

Najpierw musimy dodać grafiki do projektu Unity.

  • Znajdź okno: Project (najczęściej znajduje się na dole Unity).
  • Kliknij folder: Assets.
  • Przeciągnij pliki PNG z komputera do folderu Assets.

📌 Mogą to być obrazki:

  • ziemi,
  • trawy,
  • kamieni,
  • platform,
  • ścian.

🟢 Krok 4.2 — Ustawienie Sprite

📌 Po dodaniu PNG trzeba powiedzieć Unity, że obrazek będzie używany jako grafika 2D.

  • Kliknij obrazek PNG w folderze Assets.
  • Po prawej stronie otworzy się: Inspector.
  • Znajdź: 
Texture Type

I ustaw: 

Sprite (2D and UI)

Następnie kliknij: 

Apply

✅ To bardzo ważny krok. Bez tego TileMap często nie działa poprawnie.

🟢 Krok 4.3 — Otwarcie Tile Palette

📌 Tile Palette to specjalne okno do malowania mapy.

Jak otworzyć:

  • Na górze Unity kliknij:
Window → 2D → Tile Palette

Pojawi się nowe okno: Tile Palette.

🟢 Krok 4.4 — Utworzenie nowej palety

📌 Jeśli Tile Palette jest pusta, musimy stworzyć nową paletę kafelków.

  • Kliknij: Create New Palette
  • Wpisz nazwę: 
MainPalette
  • Kliknij: Create

Unity zapyta gdzie zapisać paletę.

Wybierz folder: 

Assets/Tilemaps

Jeśli folder nie istnieje:

  • Kliknij prawym przyciskiem myszy w Assets.
  • Wybierz: Create → Folder
  • Nazwij folder: Tilemaps

🟢 Krok 4.5 — Dodanie kafelków do Tile Palette

📌 Teraz dodamy nasze PNG do systemu TileMap.

  • Przeciągnij obrazki PNG z folderu Assets do Tile Palette.
  • Unity wyświetli komunikat: 
Where do you want to save the new Tile Assets?

Wybierz folder: 

Assets/Tilemaps

I kliknij: 

Select Folder

✅ Po tej operacji kafelki pojawią się w Tile Palette i będą gotowe do budowania mapy.

🟢 KROK 5 — Rysowanie mapy

📌 Teraz możemy budować poziom gry.

  • Kliknij wybrany kafelek w Tile Palette.
  • Następnie klikaj w oknie: Scene.

Unity będzie automatycznie układać kafelki na siatce Grid.

🎮 W ten sposób budujesz:

  • podłogi,
  • platformy,
  • ściany,
  • całe poziomy gry.

🟢 KROK 6 — Test działania

📌 Po narysowaniu kilku kafelków:

  • kliknij przycisk Play,
  • sprawdź czy mapa wyświetla się poprawnie,
  • upewnij się, że kafelki są równo ustawione.

🟢 Ćwiczenie praktyczne

  • Utwórz Grid i TileMap.
  • Otwórz Tile Palette.
  • Dodaj minimum 3 kafelki PNG.
  • Narysuj prostą platformę.
  • Stwórz mały poziom z podłogą i ścianą.

🚀 Po ukończeniu ćwiczenia uczestnicy będą potrafili tworzyć pierwsze mapy 2D z wykorzystaniem systemu TileMap w Unity.

2. Tworzenie siatki Grid

📐 Grid to podstawowa struktura, na której opiera się TileMap. Umożliwia układanie kafelków w równych komórkach.

  • Dodanie obiektu Grid do sceny.
  • Tworzenie TileMap (2D Object → TileMap).
  • Struktura Grid → TileMap Renderer.

3. Tile Palette i budowanie mapy

🎨 Tile Palette to narzędzie do malowania mapy przy użyciu grafik kafelkowych.

  • Tworzenie palety kafelków.
  • Import sprites jako tiles.
  • Malowanie poziomu gry.
  • Usuwanie i edycja kafelków.

4. Snapowanie i eliminacja prześwitów

🧩 Snapowanie zapewnia idealne dopasowanie kafelków bez widocznych przerw.

  • Ustawienie rozmiaru siatki.
  • Poprawne skalowanie sprite’ów.
  • Eliminacja błędów wizualnych (gapów).

5. Pixel Perfect

🖼️ Pixel Perfect zapewnia ostre i stabilne wyświetlanie grafiki 2D bez rozmycia.

  • Konfiguracja Pixel Perfect Camera.
  • Ustawienia PPU (Pixels Per Unit).
  • Zapobieganie rozmyciu sprite’ów.

6. Prefaby i budowa środowiska

🧠 Prefaby pozwalają zapisywać gotowe obiekty i wielokrotnie je wykorzystywać w grze.

  • Tworzenie prefabów pojedynczych obiektów.
  • Prefabrykaty wieloelementowe (np. platformy).
  • Organizacja środowiska gry.

7. Warstwy tła i efekt paralaksy

🌄 Paralaksa to efekt wizualny, który tworzy wrażenie głębi w grze 2D.

  • Tworzenie warstw tła.
  • Ruch tła względem kamery.
  • Efekt głębi w grze 2D.

Ćwiczenia praktyczne:

  • Utwórz Grid i TileMap.
  • Stwórz własną mapę z kafelków.
  • Skonfiguruj Tile Palette.
  • Włącz Pixel Perfect i popraw grafikę.
  • Utwórz prefab platformy.
  • Dodaj tło z efektem paralaksy.

Po ukończeniu tej lekcji uczestnicy będą potrafić tworzyć kompletne poziomy gry 2D, korzystając z TileMap, prefabów oraz efektów wizualnych.