1.2 Game Development: Praktyczne budowanie UI

Zajęcia stacjonarne	Warsztat 1x45min
Opis jednozdaniowy	Uczestnicy nauczą się tworzyć interfejs użytkownika w Unity, korzystając z Canvas, Layout Groups, anchoringu i responsywnego skalowania.
Materiały źródłowe	Podstawowe: https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/UIBasicLayout.html  https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/class-RectTransform.html https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/UIAutoLayout.html https://docs.unity3d.com/Packages/com.unity.ugui@2.0/manual/HOWTO-UIMultiResolution.html  Opcjonalnie: https://learn.unity.com/project/creative-core-ui
Czemu służy ta lekcja	Celem zajęć jest opanowanie przez uczestników podstaw tworzenia i zarządzania interfejsem użytkownika w grze. Uczestnicy powinni poznać jak korzystać z przycisków, paneli, tekstów, czy pasków postępu, oraz w jaki sposób można je programować poprzez wykorzystanie skryptów. W trakcie zajęć warto wspomnieć o dobrych praktykach związanych z budową interfejsów (np. budowanie z wykorzystaniem prefabów) czy ogólnie przyjętych zasad tworzenia intuicyjnych interfejsów.

Jak się przygotować

Aby przygotować się do zajęć, trener powinien najpierw zapoznać się dokładnie z mechaniką działania Canvas w Unity oraz różnicami pomiędzy podstawowymi typami jego konfiguracji (Screen Space – Overlay, Screen Space – Camera, World Space). Warto także przygotować krótką demonstracyjną scenę z kilkoma gotowymi obiektami UI, takimi jak panele, przyciski oraz pola tekstowe, aby łatwiej wytłumaczyć uczestnikom koncepcje hierarchii UI oraz sposób renderowania elementów.

Kluczowym zagadnieniem, które prowadzący powinien opanować i jasno przedstawić, jest działanie komponentu RectTransform: w szczególności anchorowanie, pivot oraz zasady, według których elementy UI zachowują się przy zmianach rozdzielczości ekranu. Trener powinien samodzielnie sprawdzić różne ustawienia Canvas Scaler, aby podczas zajęć pokazać, w jaki sposób wpływają one na responsywność interfejsu.

W ramach warsztatu należy przygotować prosty, realistyczny przykład interfejsu gry — najlepiej ekran główny (menu startowe), który składa się z logo, zestawu przycisków (Start, Settings, Quit) oraz prostego widoku „Settings”. Dzięki temu prowadzący będzie mógł przeprowadzić uczestników przez proces budowy interfejsu od podstaw: od dodawania elementów, ustawiania layoutu i anchoringu, aż po konfigurację przycisków.

Na koniec trener powinien zweryfikować, że scenariusz warsztatu działa w kilku różnych aspect ratio, aby móc zwrócić uwagę na najczęstsze problemy i pułapki początkujących twórców UI w Unity.

Jaką wiedzę należy przekazać

Dzięki udziałowi w zajęciach uczestnicy:

• Jak działa Canvas i jak wpływa na rendering UI.
• Czym jest RectTransform i jak używać anchoringu.
• Jak korzystać z Layout Groups i Content Size Fitter.
• Jak tworzyć przyciski, tekst, okna i elementy HUD.
• Jak podłączyć UI do skryptów (OnClick, eventy).
• Jak tworzyć responsywne UI działające w różnych rozdzielczościach.
• Jak prefabować UI (menu, panele, popupy).
• Podstawowe interakcje: hover, click, disable/enable.
• Dobre praktyki struktury hierarchii UI.

Powyższe efekty to minimum wiedzy i umiejętności jakie muszą być przekazane podczas zajęć.

Warto zapamiętać

Kluczowe zagadnienia, które powinny zostać przyswojone przez uczestników:

• Canvas renderuje UI inaczej niż reszta sceny — warto minimalizować liczbę Canvasów.
• Anchoring = klucz do poprawnego i responsywnego layoutu.
• Layout Groups oszczędzają czas i pomagają utrzymać porządek.
• TextMeshPro jest standardem — zwykły Text jest przestarzały.
• Używaj prefabs — zwłaszcza dla powtarzalnych elementów UI.
• UI zawsze należy testować w różnych rozdzielczościach i aspect ratio.
• Małe zmiany w scale/anchor mogą zaoszczędzić godziny debugowania.

Pytania z testu

1. Kiedy używamy Canvas w Unity, najlepiej stosować Render Mode: Screen Space – Overlay, jeśli:
   1. Chcemy, żeby UI było zawsze widoczne na ekranie niezależnie od kamery
   2. Chcemy, żeby UI było częścią obiektów 3D i podlegało oświetleniu
   3. Chcemy, żeby UI wyświetlał się jedynie dla wybranej kamery
2. Czym różni się Local Position od World Position w Transform?
   1. Local Position jest względem rodzica, a World Position względem sceny
   2. Local Position to pozycja UI, World Position to pozycja na scenie
   3. To to samo, Unity używa zamiennie
3. Za co odpowiada komponent Canvas w Unity?
   1. Służy do renderowania animacji
   2. Służy do renderowania widoku gry
   3. Służy do renderowania interfejsu użytkownika
4. Czym różni się Local Position od World Position w Transform?
   1. Local Position jest względem rodzica, a World Position względem sceny
   2. Local Position to pozycja UI, World Position to pozycja na scenie
   3. To to samo, Unity używa zamiennie
5. Jaki element UI w Unity najlepiej nadaje się do dynamicznego paska zdrowia?
   1. Button
   2. Slider
   3. Text
6. Do czego służą anchory w RectTransform?
   1. Wizualizacja środka elementu w przestrzeni UI
   2. Blokowanie elementów UI przed przypadkowym przesunięciem
   3. Definicja pozycjonowania elementu względem rodzica
7. Najczęstszym problemem z UI, który powoduje brak reakcji Buttona, jest:
   1. Brak przypisanego Collidera na przycisku
   2. Brak przypisanego kursora w projekcie
   3. Brak EventSystem